<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container {
width:670px;
margin:100px auto;
}
.box {
width:670px;
height:110px;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:center;
}
#btn {
outline:none;
width:120px;
height:30px;
background-color:#ABCDEF;
border:solid 1px grey;
margin:100px 275px 0;
}
#sj{
position:relative;
top:20px;
left:430px;
}
</style>
</head>
<body>
<div class="container">
<div id="sj"></div>
<div class="box">
</div>
<input id="btn" type="button" value="点名">
</div>
<script>
var sj=document.getElementById('sj');
function addZero(z) {
return z <10 ?"0" + z : z;
}
function time() {
var dt =new Date();
var y =dt.getFullYear();//获取年份
var m =dt.getMonth() +1;//获取月份
var d =dt.getDate();//获取日期
var h =dt.getHours();//获取时
var min =dt.getMinutes();//获取分
var s =dt.getSeconds();//获取秒
var x =dt.getDay();//获取星期
if (x ==0) {
x ="天";
}
var week=['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];
document.getElementById('sj').innerHTML ="<h5 style='color:skyblue;'>" +y +'年' +addZero(m) +'月' +addZero(d) +"日" +addZero(h) +'时' +addZero(min) +"分" +addZero(s) +"秒" +week[x] +"</h5>";
}
window.onload =function () {
time();
setInterval(time,1000);
}
var box =document.getElementsByClassName('box')[0];
var btn =document.getElementById('btn');
var list = ['小明1','小明1','小明1','小明1','小明1','小明1','小明1','小明1','小明1','小明1','小明1','小明1'];
for (var i =0;i
var ds =document.createElement('div');
ds.className='name';
ds.style.width ='160px';
ds.style.height ='30px';
ds.style.lineHeight ='30px';
ds.style.textAlign ='center';
ds.style.backgroundColor ='#ABCDEF';
ds.innerHTML =list[i];
box.appendChild(ds);
}
var names=document.getElementsByClassName('name');
btn.onclick=function () {
if (this.value==='点名'){
timer=setInterval(function () {
for (var j=0;j
names[j].style.backgroundColor='#ABCDEF';
}
var s=Math.floor(Math.random()*12);
names[s].style.backgroundColor='orange';
},100);
this.value='停止';
}else {
clearInterval(timer);
this.value='点名';
}
}
</script>
</body>
</html>
