SOURCE

console 命令行工具 X clear

                    
>
console
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>红绿灯</title>
	<style>
		#box {
			width: 100px;
			height: 100px;
			border-radius: 50%;
			margin: 20px;
			background: green;
		}
	</style>
</head>

<body>
	<button id="btn">开关</button>
    <div id="box"></div>
    <script>
        function changeColor(color){
            box.style.backgroundColor = color
        }
        // 定义一个关闭状态的类   
        class OffLightState {
            constructor(light) {
                this.light = light
            }
            // 每个类都需要这个方法,在不同状态下按都需要触发这个方法
            pressBtn() {
                this.light.setState(this.light.weekLightState)
                console.log('黄灯');
                changeColor('yellow')
            }
        }

        // 定义一个弱光状态的类   
        class WeekLightState {
            constructor(light) {
                this.light = light
            }
            pressBtn() {
                this.light.setState(this.light.strongLightState)
                console.log('红灯')
                changeColor('red')
            }
        }

        // 定义一个强光状态的类
        class StrongLightState {
            constructor(light) {
                this.light = light
            }
            pressBtn() {
                this.light.setState(this.light.offLightState)
                console.log('绿灯')
                changeColor('green')
            }
        }

        class Light {
            constructor() {
                this.offLightState = new OffLightState(this)
                this.weekLightState = new WeekLightState(this)
                this.strongLightState = new StrongLightState(this)
                this.currentState = null
            }
            setState(newState) {
                this.currentState = newState
            }
            init() {
                this.currentState = this.offLightState
            }
        }

        let light = new Light()
        light.init()
        var btn = document.getElementById('btn')
        btn.onclick = function() {
            light.currentState.pressBtn()
        }
    </script>
</body>

</html>