一、方式一
幾個頁面點擊一次切換一次
步驟：
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{
width: 200px;
height: 200px;
background-color: red;
margin: auto;
text-align: center;
line-height: 200px;
font-size: 30px;
color: white;
}
</style>
</head>
<body>
<div >
點擊有驚喜！
</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 }
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/122772.html
標籤：JavaScript
上一篇：前端之jQuery
下一篇：用原生JS找出所有的水仙花數