<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 500px;
height: 400px;
border: 1px solid green;
margin: 100px auto;
}
.btns {
width: 100%;
height: 200px;
display: flex;
justify-content: space-around;
background-color: skyblue;
}
button {
margin-top: 40px;
width: 100px;
height: 100px;
background-color: red;
font-size: 30px;
border-radius: 50%;
}
#nameBox {
width: 100%;
height: 200px;
text-align: center;
line-height: 200px;
font-size: 40px;
font-weight: bold;
background-color: aqua;
}
.box1 {
width: 400px;
height: 600px;
border: 1px solid red;
position: fixed;
bottom: 0;
right: 0;
background: url(img/6.gif) no-repeat;
background-size: 100% 100%;
/* display: none; */
opacity: 0;
/* transform: translate(200px,300px); */
animation:move;
}
marquee {
font-size: 28px;
color: red;
margin-top: 30px;
}
span {
cursor: pointer;
}
</style>
<script src="../jsTOOL/data.js"></script>
<script src="../jsTOOL/tool.js"></script>
</head>
<body>
<div class="box">
<div class="btns">
<button id="btn1">开始点名</button>
<button id="btn2">结束点名</button>
</div>
<div id="nameBox">陈麒麟</div>
</div>
<div class="box1" id="box1">
<span style="color:aliceblue" id="close">关闭</span>
<marquee behavior="" direction="">大家好,我是神仙姐姐,支持我就送小花花!!!!</marquee>
</div>
<script>
var btn1 = document.getElementById('btn1')
var btn2 = document.getElementById('btn2')
var nameBox = document.getElementById('nameBox')
var timer = null
var box = document.getElementById('box1')
var close = document.getElementById('close')
// nameBox.innerText = '杜鑫'
// console.log(nameList)
// 2. 给btn1 绑定事件
btn1.onclick = function () {
function getColor() {
return 'rgb(' + randomNum(0, 255) + ',' + randomNum(0, 255) + ',' + randomNum(0, 255) + ')'
}
// console.log(123)
// 开启定时器
timer = setInterval(function () {
// 随机索引
var index = randomNum(0, nameList.length - 1)
// console.log(nameList[index])
// 设置nameBox的内容
nameBox.innerText = nameList[index]
document.getElementById('nameBox').style.color = getColor()
document.getElementById('nameBox').style.backgroundColor = getColor()
}, 10)
}
// 3.给btn2 绑定事件
btn2.onclick = function () {
// console.log(456)
clearInterval(timer)
}
setTimeout(function () {
box.style.opacity = 1
}, 5000)
close.onclick = function (e) {
e.stopPropagation()
box.style.opacity = 0
setTimeout(function () {
box.style.opacity = 1
}, 10000)
}
box.onclick = function (e) {
// e.stopPropagation()
window.location.href = 'http://www.4399.com'
}
</script>
</body>
</html>
定义timer的目的是为了确保只有一个定时器在运行。在这段代码中,当点击btn1时,会开启一个定时器,并且每隔30毫秒执行一次定时器中的函数。如果没有定义timer,那么每次点击btn1时都会开启一个新的定时器,导致多个定时器同时执行,可能会造成程序混乱或无法控制的效果。
通过定义一个timer变量并将定时器的返回值赋值给它,可以方便地取消之前开启的定时器。当再次点击btn1时,可以先取消之前的定时器,再开启一个新的定时器,确保只有一个定时器在运行。这样可以避免多个定时器交叉执行的问题,保持程序的稳定性和可控性。
封装一个tool.js工具
/*
*
区间的随机整数
@params { Number} a, b表示数字
@return a, b区间的一个随机整数
*
*/
function randomNum(a, b) {
var min = Math.min(a, b)
var max = Math.max(a, b)
return Math.floor(Math.random() * (max - min + 1)) + min
}