<!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>
div {
width: 200px;
height: 200px;
background-color: rgb(95, 241, 76);
line-height: 200px;
font-size: 20px;
text-align: center;
border-radius: 50%;
cursor: pointer;
}
</style>
</head>
<body>
<div id="btn">3</div>
</body>
<script>
let btn = document.querySelector("#btn")//获取dom节点
btn.onclick = function () {//点击事件
let num = 3;//申明初始变量
let timer = setInterval(function () {//实现倒计时
num--;
console.log(num);
//显示改变后的值
btn.innerText = num
if (num === 0) {
clearInterval(timer);
btn.innerText = "时间到啦！！！"
}
// 生成随机颜色
let red = int(0, 255)
let blue = int(0, 255)
let green = int(0, 255)
console.log(red, blue, green);// 用随机数改变背景颜色
btn.style.background = `rgb(${red},${blue},${green})`
}, 1000)
}
function int(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min)
}
</script>
</html>
907
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
