SOURCE

const bulb = document.getElementById("bulb");
const status = document.getElementById("status");
let curStatus = "off";

function light(){
    bulb.className = "light";
    status.innerText = "on";
}

function dark(){
    bulb.className = "dark";
    status.innerText = "off";
}

function change(){
    console.log("状态变化：");
    if(curStatus==="off"){
        console.log("from: off, to: on");
        curStatus = "on";
        light();
    }else{
        console.log("from: on, to: on");
        curStatus = "off";
        dark();
    }
}

function init(){
    console.log("初始化状态：off");
    dark();
}

init();

<div id="bulb">
    <div></div>
    <div></div>
    <div></div>
</div>
<br>
<button onclick="change()">change</button>

<div>status:
    <span id="status"></span>
</div>

.dark>div:first-child, .light>div:first-child{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    background: #ccc;
}
.dark>div:nth-child(2), .light>div:nth-child(2){
    width: 18px;
    height: 30px;
    border-radius: 50%;
    margin-left: 15px;
    margin-top: -18px;
    background: #ccc;
}
.dark>div:nth-child(3), .light>div:nth-child(3){
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin-left: 16.5px;
    margin-top: -10px;
    background: #ccc;
}

.light>div:first-child, .light>div:nth-child(2){
    background: #fbff03;
}

.light>div:nth-child(3){
    background: #333;
}