<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>点人名</title>
<meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport"/>
<meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)" name="viewport"/>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<style>
h2{
font-size: 5em;
text-align: center;
margin-top: 50px;
height: 250px;
350px;
margin: 50px auto;
border: 1px solid #ccc;
box-shadow: 0 0 5px #000;
line-height: 250px;
}
.btn{
text-align:center;
}
.btn input{
padding:10px 20px;
margin:10px 30px;
color:#000;
}
.texrt{
text-shadow: 1px 2px 4px red;
}
</style>
</head>
<body>
<h2 id="num">
开始点人
</h2>
<div class="btn">
<input type="button" value="开始" id="start"/>
<input type="button" value="结束" id="stop"/>
</div>
<script>
var arry = ['张武','赵欣','赵瑛','赵子怡','菲菲','雷囧','马季','小辣椒','龙卷风','名阿凡','秒速','艾莉婕','奥拉基'];
var num = document.getElementById('num');
var start = document.getElementById('start');
var stop = document.getElementById('stop');
var time = null;
start.onclick=function(){
num.className = 'texrt';
this.disabled=true;
time = setInterval(function(){
var n = Math.round(Math.random()*(arry.length-1)); //随机产生 0 - arry.length 之间的数字
num.innerHTML = arry[n];
},50);
};
stop.onclick=function(){
start.disabled=false;
clearInterval(time);
};
</script>
</body>
</html>