<!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> is named </ 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 "Microsoft elegant black";
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: "Microsoft elegant black";
font-weight: bold;
}
</style>
<script type="text/javascript">
var students = [ "dawn", "Aaron", "Zhang", "Week odd", "Wang Shi poem", "Li Conghui", "Wang Bingna", "Zhao Meili"];
function $(id){
return document.getElementById(id);
}
were hours;
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(){
// get a random number as an array of names there subscript
// to take to the name assigned to TXT
// then again a picture array subscript
// replace the background image to random index
// names and pictures on the timer which time synchronization
function getId(id){
return document.getElementById(id);
}
getRandom function (max) {
return parseInt(Math.random()*max);
}
// Register the Start button event
var p = getId('txt');
getId('run').onclick = function(){
// Set the timer
if (p.timer) {
clearInterval(p.timer);
}
p.timer = setInterval(function(){
//1.1 extracting a random array name from students
//1.2 obtaining a random [0 - students.length-1] is an integer in the range of
// this integer index, students get the object from the array
p.innerHTML = students[getRandom(students.length)];
//1.3 acquired a random avatar image path
getId('icon').src = 'imgs/' + getRandom(8) + '.png';
},100);
}
// stop timer
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>