一、方式一
几个页面点击一次切换一次
步骤：
1.建box1,设置box1的宽 高 背景色 位置 其内部文本行高 字体大小 字体颜色
2.设置box1点击事件
代码演示：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
200px;
height: 200px;
background-color: red;
margin: auto;
text-align: center;
line-height: 200px;
font-size: 30px;
color: white;
}
</style>
</head>
<body>
<div class="box">
点击有惊喜！
</div>
<script>
var box=document.getElementsByClassName("box")[0]
var count=0
box.onclick=function () {
count++
if (count == 1){
this.style.backgroundColor="green"
this.innerText="继续点击！"
}else if(count == 2){
this.style.backgroundColor="yellow"
this.innerText="精彩即将揭晓"
}else if(count == 3){
this.style.backgroundColor="pink"
this.innerText="骗你的傻逼"
}else {
this.style.backgroundColor="red"
this.innerText="点击有惊喜！"
count=0
}
}
</script>
</body>
</html>
二、方式二
步骤一样，就是在方式一上稍有改动
利用javaScript取余用法
改动代码演示：
box.onclick=function () { count++ if (count % 4 == 1){ this.style.backgroundColor="green" this.innerText="继续点击！" }else if(count % 4 == 2){ this.style.backgroundColor="yellow" this.innerText="精彩即将揭晓" }else if(count % 4 == 3){ this.style.backgroundColor="pink" this.innerText="骗你的傻逼" }else { this.style.backgroundColor="red" this.innerText="点击有惊喜！" // count=0 }