随机点名

<!DOCTYPE html>

<head>

<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>

</div>

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>

推荐阅读更多精彩内容