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;/*离顶部200px，并且居中*/
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;/*距离底部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>
实现效果如下图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持华域联盟。
您可能感兴趣的文章:
- javascript实现的一个随机点名功能
- 使用javascript做的一个随机点名程序
- JS实现课堂随机点名和顺序点名
- js实现随机点名系统(实例讲解)
- JS+CSS实现随机点名(实例代码)
- js实现随机点名小功能
- JS实现随机点名器
- JavaScript实现班级随机点名小应用需求的具体分析
- JavaScript实现随机点名器
- JavaScript实现随机点名器实例详解
本文由 华域联盟 原创撰写：华域联盟 » JavaScript实现随机点名网页
转载请保留出处和原文链接：https://www.cnhackhy.com/80894.htm
