javascript写一个随机点名网页，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <m
javascript写一个随机点名网页，供大家参考，具体内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#box {
border: 1px solid black;
width: 500px;
height: 500px;
margin: 100px auto;
background-color: #000000;
position: relative;
}
p{
width: 500px;
height: 200px;
text-align: center;
line-height: 200px;
font-size: 80px;
color: #ffff00;
}
#anniu {
width: 200px;
height: 50px;
background-color:#00aaff;
position: absolute;
bottom: 100px;
left: 50%;
margin-left: -100px;
color: #ffffff;
font-size: 20px
}
</style>
</head>
<body>
<div id="box">
<p id="wenben">随机点名册</p>
<input type="button" value="开始点名" id="anniu">
</div>
</body>
<script>
var wenben = document.getElementById("wenben")
var anniu = document.getElementById("anniu")
var timer //定义计时器
var arr = ['刘一','陈二','张三','李四','王五','赵六','孙七','周八','吴九','郑十']
var test = true
anniu.onclick = function() {
if (test) {
start()
anniu.innerHTML = "结束"
test = false
} else {
stop()
anniu.innerHTML = "开始"
test = true
}
}
function start() {
timer = setInterval(function random() {
var index = parseInt(Math.random() * arr.length)
wenben.innerHTML = arr[index]
}, 50);
}
function stop() {
clearInterval(timer)
}
</script>
</html>实现效果如下图：
--结束END--
本文标题: JavaScript实现随机点名网页
本文链接: https://www.lsjlt.com/news/134364.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0