<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>抽奖</title>
<style>
*{margin:0;padding:0;}
#title{
width:200px;height:50px;
margin:100px auto 0;
text-align:center;
font-size:24px;
font-weight:bold;
color:red;
}
#btn{
width:200px;height:20px;
margin:10px auto 0;
text-align:center;
}
#btn input{
width:50px;height:30px;
background-color:grey;
font-size:16px;
margin-right:10px;
}
</style>
<script>
var data=['爱疯','苹果','女朋友','游戏机']
window.onload=function(){
var timer;
var flag=0;
var start=document.getElementById('start');
var stop=document.getElementById('stop');
var title=document.getElementById('title');
//鼠标点击
start.onclick=function(){
start.style.background='#234';
play();
//设置flag的变化可以键盘鼠标配合使用，更加人性化
flag=1;
}
stop.onclick=function(){
start.style.background="#036";
if(title.innerHTML=='爱疯'){
clearInterval(timer);}
else{
play();}
//clearInterval(timer);
flag=0;
}
function play(){
clearInterval(timer);
timer=setInterval(function(){
var title=document.getElementById('title');
var num=Math.floor(Math.random()*data.length);
title.innerHTML=data[num];
},30)
}
//点击回车键
document.onkeyup=function(e){
e=event||window.event;
if(e.keyCode==13){
if(flag==0){
start.style.background='#234';
play();
flag=1;}
else{
start.style.background="#036";
if(title.innerHTML=='爱疯'){
clearInterval(timer);
flag=0;}
else{
play();}
//clearInterval(timer);
}
}
}
}
</script>
</head>
<body>
<div id="title">
开始抽奖
</div>
<div id="btn">
<input type="button" value="开始" id="start">
<input type="button" value="停止" id="stop">
</div>
</body>
</html>var data = ['iphone5', 'ipad', '佳能单反', '迪拜双人游', '巴厘岛三人游', '科颜氏套装', 'NewBalance复古鞋'],
timer = null;
window.onload = function(){
var title = document.getElementById('title'),
play = document.getElementById('play'),
stop = document.getElementById('stop');
// 开始抽奖
play.onclick = playFun;
// 停止
stop.onclick = stopFun;
}
function playFun(){
timer = setInterval(function(){
// 随机
var random = Math.floor(Math.random() * data.length);
title.innerHTML = data[random];
}, 50);
}
function stopFun(){
clearInterval(timer);
title.innerHTML = data[0];//每次停止时都显示iphone5
}js文件如上。不知道你是不是这个意思
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>抽奖</title>
<style type="text/css">
/*标签样式部分 开始*/
span{display:inline-block;width:100px;height:50px;text-align:center;line-height:50px;cursor:pointer;font-size: 24px;font-weight:bold;color:#F7F7F7;background: #268BD2;}
/*标签样式部分 开始*/
/*类样式部分 开始*/
.title{width:400px;height:70px;text-align:center;line-height:70px;font-size:36px;font-weight:bold;color:red;margin:0 auto;margin-top:50px;}
.play{margin-left:41.5%;margin-top:10px;}
/*.play:hover{background:#B9BFBF;}*/
/*类样式部分 结束*/
</style>
<script type="text/javascript">
//奖品信息
var date = ['Iphone5S','佳能相机','50元充值卡','三星S7','小米5','电冰箱','小汽车','惠普打印机','LG显示器'],
timer = null,//定时器
flag = 0;
window.onload = function(){
var play = document.getElementById("play"),//开始
stop = document.getElementById("stop");//结束
//鼠标开始
play.onclick = function(){
flag=1;
this.style.backgroundColor = "#B9BFBF";
clearInterval(timer);
var title = document.getElementById("title");
clearInterval(timer);
timer = setInterval(function(){
var title = document.getElementById("title"),
//获取角标
dateM = Math.floor(Math.random()*date.length);
title.innerHTML = date[dateM];
},50)
}
//鼠标暂停
stop.onclick = function(){
clearInterval(timer);
var play = document.getElementById("play");
play.style.backgroundColor="#268BD2";
}
//键盘开始
document.onkeydown = function(event){
var event = event?window.event:event;
clearInterval(timer);
if(event.keyCode==13){
if(flag==0){
playFun();
console.log(event.keyCode);
flag=1;
}else{
clearInterval(timer);
flag=0;
}
}
}
}
//开始抽奖
function playFun(){
//抽奖前清除定时器
clearInterval(timer);
var title = document.getElementById("title");
timer = setInterval(function(){
var title = document.getElementById("title"),
//获取角标
dateM = Math.floor(Math.random()*date.length);
title.innerHTML = date[dateM];
},50)
}
</script>
</head>
<body>
<div id="title" class="title"></div>
<span id="play" class="play" >开 始</span>
<span id="stop" class="stop">停 止</span>
</body>
</html>
这是我写的 你可以看看