点击有惊喜

<div class="box">
    点击有惊喜！！
</div>

*{
    padding: 0;
    margin: 0;
}
.box{
    width: 200px;
    height: 200px;
    background: red;
    text-align: center;
    color: white;
    line-height: 200px;
    font-size: 23px;
    font-weight: bold;
    margin: 20px auto;
}

var oBox = document.getElementsByClassName('box')[0];

//初始化点击的次数。通过次数的增加来改变DOM的样式
var a = 0;
oBox.onclick  = function(){
    a++;
    if(a%4===1){
        this.style.background = 'green';
        this.innerText = '继续点击哦！';
    }else if(a%4==2){
        this.style.background = 'blue';
        this.innerText = '哈哈！骗你的';
    }else if(a%4==3){
        this.style.background = 'transparent';
        this.innerText = '';
    }else{
        this.style.background = 'red';
        this.innerText = '点击有惊喜！！';
    }    

}

转载于:https://www.cnblogs.com/fmgao-technology/p/9252192.html