页面点名小程序
方式一
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>点名器</title>
<style>
body{
background-color: gray;
}
.box{
width: 1000px;
height: 280px;
margin: 0 auto;
margin-top: 100px;
clear: both;
}
#btn,#btn2,#btn3,#btnStop{
width: 150px;
height: 50px;
margin-top: 50px;
font-size: 18px;
}
.name{
width: 100px;
height: 30px;
float: left;
background-color: antiquewhite;
margin-left: 10px;
margin-top: 10px;
text-align: center;
line-height: 30px;
}
#span{
float: right;
position: relative;
top: 55px;
right: 185px;
}
h1{
text-align: center;
}
.high{
background-color: #FFDEAD;
font-weight:500;
}
</style>
</head>
<body>
<h1>随机点名系统</h1>
<span id="span"></span>
<!-- 存放生成的名单div -->
<div class="box" id="box"></div>
<!-- 存放开始和停止按钮 -->
<div style="text-align:center">
<input type="button" id="btn" value="点名"/>
<input type="button" id="btnStop" value="停止"/>
</div>
</body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
var arrs = [
"张恒",
"李伟",
"文子昂",
"李彦松",
"廖彬",
"金鑫",
"夏华伶",
"邓洪",
"陈紫桥",
"罗继财",
"陈治豪",
"李坤耀",
"母天鑫",
"冯思皓",
"谷康杰",
"李辉",
"李先进",
"米俊杰",
"彭小平",
"唐旭",
"万云松",
"向星宇",
"张全鑫",
"邬建科",
"徐江涛",
"李连辉",
"肖云龙",
"徐浪",
"马俊杰",
"欧阳平",
"周雨凡"
];
window.onload = function() {
boxNode = document.getElementById("box");
boxNode.innerHTML = "";
for (var i = 0; i < arrs.length; i++) {
var divNode = document.createElement("div");
divNode.innerHTML=arrs[i];
divNode.className="name";
boxNode.appendChild(divNode);
}
}
let time = null;
$("#btn").click(function() {
clearInterval(time);
time = setInterval(function(){
let index = Math.floor(Math.random() * arrs.length);
$("#box div").css("background-color", "");
let mySelector = "#box div:eq(" + index +")";
$(mySelector).css("background-color", "green");
}, 100)
})
$("#btnStop").click(function() {
clearInterval(time);
})
</script>
方式二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>点名小程序</title>
<style>
.cor {
background-color: #6083cd;
}
#box {
width: 800px;
border: 2px solid black;
margin: 0 auto;
height: 800px;
}
ul {
list-style: none;
}
li {
width: 50px;
height: 50px;
margin: 20px;
float: left;
line-height: 50px;
text-align: center;
}
.center {
width: 156px;
height: 40px;
line-height: 40px;
margin: 0 auto;
}
#pp {
display: block;
text-align: center;
margin-top: 40px;
font-size: 35px;
}
</style>
</head>
<body>
<div id="box">
<h1 style="text-align: center;">点名系统</h1>
<div class="center">
<input type="button" id="start" value="开始">
<input type="button" id="end" value="停止">
</div>
<span id="pp"></span>
<div id="dv"></div>
</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
function my(id) {
return document.getElementById(id);
}
let str = "文鑫,向贞好,胥员员,李勇,熊明,杜凯,熊国良,付帅,龚文曦,吴世林,李鹏,宋小明,黄海,曾光鹏,墙世川,幸勇,彭清亮,杨崇鑫,王一舟,汪家鹏,高茂鑫,张松恒,杨海峰,付杨恒,唐浩翔,张攀"
let arr = str.split(",");
let oul = document.createElement("ul");
my("dv").appendChild(oul);
for (let i = 0; i < arr.length; i++) {
let oli = document.createElement("li");
oul.appendChild(oli);
oli.innerHTML = arr[i];
}
olis = oul.getElementsByTagName("li");
let timer;
my("start").onclick = function(){
clearInterval(timer);
timer = setInterval(function(){
let num = parseInt(Math.random()*arr.length);
console.log(num);
for (let j = 0; j < olis.length; j++) {
olis[j].className = "";
}
olis[num].className = "cor";
my("pp").innerHTML = arr[num];
},100)
}
my("end").onclick = function(){
clearInterval(timer);
}
</script>
</html>
