<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>点名器</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 750px;
height: 700px;
margin: 20px auto;
text-align: center;
}
.box .screen{
width: 100%;
height: 600px;
background: url(imgs/bg.jpg);
background-size:100% 100%;
}
.box input{
width: 150px;
height: 40px;
font: 20px/40px "微软雅黑";
border: none;
background-color: orange;
color: #fff;
margin: 20px;
cursor: pointer;
font-weight: bold;
border: 1px solid orange;
border-radius: 8px;
}
.box .screen img{
width: 200px;
height: 200px;
margin-top: 100px;
}
.box .screen p{
font-size: 60px;
font-family: "微软雅黑";
font-weight: bold;
}
</style>
<script type="text/javascript">
var students = ["黎明","郭富城","张明","周奇","王诗诗","李聪慧","王炳南","赵美丽"];
function $(id){
return document.getElementById(id);
}
var timer;
window.onload=function(){
$("run").onclick=function(){
if(timer){
clearInterval(timer);
}
timer=setInterval(function(){
var rd=Math.random();
rd=Math.round(rd*(students.length-1));
$("txt").innerHTML=students[rd];
$("icon").src="imgs/"+rd+".png";
},200);
}
$("stop").onclick=function(){
clearInterval(timer);
}
}
/*window.onload = function(){
//取一个随机数作为存有姓名的数组的下标
//把取到的姓名赋值给TXT
//再随即一个图片数组的下标
//用随机到的 图片下标 替换掉 背景图
//姓名放在定时器里面 时间和图片同步
function getId(id){
return document.getElementById(id);
}
function getRandom(max){
return parseInt(Math.random()*max);
}
//注册开始按钮事件
var p = getId('txt');
getId('run').onclick = function(){
// 设置定时器
if (p.timer) {
clearInterval(p.timer);
}
p.timer = setInterval(function(){
//1.1随机的从students数组中抽取一个人名
//1.2随机获取一个[0 - students.length-1]范围内的整数
//以此整数为下标，从students数组中获取对象
p.innerHTML = students[getRandom(students.length)];
//1.3随机的获取一个头像图片的路径
getId('icon').src = 'imgs/' + getRandom(8) + '.png';
},100);
}
//停止定时器
getId('stop').onclick = function(){
clearInterval(p.timer);
}
}*/
</script>
</head>
<body>
<div class="box">
<div class="screen">
<img src="imgs/1.png" alt="" id="icon"/>
<p id="txt">张三</p>
</div>
<input type="button" value="开始" id="run"/>
<input type="button" value="停止" id="stop"/>
</div>
</body>
</html>