HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点名册</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="box">
<button id="begin">开始点名</button>
<button id="end">结束点名</button>
<div id="name"></div>
<div id="sz">
<div id="hour"></div>
<div id="min"></div>
<div id="second"></div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
CSS代码:
*{
margin: 0;padding: 0;
}
body{
text-align: center;
}
#box{
width: 400px;height: 400px;border: 4px solid ghostwhite;
background-color: #fff;margin: 0 auto;margin-top: 200px;position: relative;
}
button{
background-color: #fff;width: 100px;height: 40px;margin-top:100px;
}
#name{
width: 220px;height: 140px;text-align: center;margin: 0 auto;font-size: 40px;
color: red;padding-top: 50px;margin-top: 20px;
}
#sz{
width: 100px;height: 100px;background-color: #fff;
position: absolute;right: 4px;bottom: 4px;background: url("img/clock.jpg");
}
#hour,#min,#second{
position: absolute;width: 5px;height: 100px;top: 0;left: 50%;margin-left: -2px;
}
#hour{
background: url("img/hour.png");
}
#min{
background: url("img/minute.png");
}
#second{
background: url("img/second.png");
}
JS代码:
/**
* Created by Fengy.
*/
window.onload = function(){
/*1.获取所需要的标签*/
var begin = document.getElementById('begin');
var end = document.getElementById('end');
var name = document.getElementById('name');
var hour = document.getElementById('hour');
var min = document.getElementById('min');
var second = document.getElementById('second');
/*2.定义变量*/
var timer = null;
var nameArr = ['学号01','学号02','学号03','学号04','学号05','学号06','学号07','学号08','学号09','学号10','学号11','学号12','学号13','学号14','学号15','学号16','学号17','学号18','学号19','学号20','学号21','学号22','学号23','学号24','学号25','学号26','学号27','学号28','学号29','学号30','学号31','学号32','学号33','学号34','学号35','学号36','学号37','学号38','学号39','学号40','学号41','学号42','学号43','学号44','学号45','学号46','学号47','学号48'];
/*name.innerText = nameArr[0];*/
/*3.监听事件的点击*/
begin.onclick = function(){
/*3.1清除定时器*/
clearInterval(timer);
/*3.2设置定时器*/
timer = setInterval(function(){
/*3.3随机数*/
var s_index = parseInt(Math.random()*nameArr.length);
var s_num = nameArr[s_index];
name.innerText =s_num;
},1)
};
end.onclick =function(){
/*4.1结束定时器*/
clearInterval(timer);
};
/*开启时钟的定时器*/
setInterval(function(){
/*5.1获取时间戳*/
var date = new Date();
/*5.2求出总毫秒数*/
var millS = date.getMilliseconds();
var s = date.getSeconds() + millS /1000;
var m = date.getMinutes() + s / 60;
var h = date.getHours() % 12+ m /60;
/*5.3.旋转*/
hour.style.transform = 'rotate('+ h * 30 + 'deg)';
min.style.transform = 'rotate('+ m * 6 + 'deg)';
second.style.transform = 'rotate('+ s * 6 + 'deg)';
},10)
};
效果图: