<!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>抽獎(jiǎng)</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=['愛瘋','蘋果','女朋友','游戲機(jī)']
????window.onload=function(){
????????var?timer;
????????var?flag=0;
????????var?start=document.getElementById('start');
????????var?stop=document.getElementById('stop');
?var?title=document.getElementById('title');
????????//鼠標(biāo)點(diǎn)擊
????????start.onclick=function(){
????????????start.style.background='#234';
????????????play();
//設(shè)置flag的變化可以鍵盤鼠標(biāo)配合使用，更加人性化
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)
????????????????}
????????//點(diǎn)擊回車鍵
????????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">
??開始抽獎(jiǎng)
??</div>
??<div?id="btn">
??<input?type="button"?value="開始"?id="start">
??<input?type="button"?value="停止"?id="stop">
??</div>
??</body>
??</html>
2016-08-23
var?data?=?['iphone5',?'ipad',?'佳能單反',?'迪拜雙人游',?'巴厘島三人游',?'科顏氏套裝',?'NewBalance復(fù)古鞋'], ?timer?=?null; window.onload?=?function(){ ?var?title?=?document.getElementById('title'), ??play?=?document.getElementById('play'), ??stop?=?document.getElementById('stop'); ?//?開始抽獎(jiǎng) ?play.onclick?=?playFun; ?//?停止 ?stop.onclick?=?stopFun; } function?playFun(){ ?timer?=?setInterval(function(){ ??//?隨機(jī) ??var?random?=?Math.floor(Math.random()?*?data.length); ??title.innerHTML?=?data[random]; ?},?50); } function?stopFun(){ ?clearInterval(timer); ?title.innerHTML?=?data[0];//每次停止時(shí)都顯示iphone5 }js文件如上。不知道你是不是這個(gè)意思
2016-04-03
<!DOCTYPE html>
<html>
?<head>
??<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
??<title>抽獎(jiǎng)</title>
??<style type="text/css">
???/*標(biāo)簽樣式部分 開始*/
???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;}
???/*標(biāo)簽樣式部分 開始*/
???/*類樣式部分 開始*/
???.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;}*/
???/*類樣式部分 結(jié)束*/
??</style>
??<script type="text/javascript">
???//獎(jiǎng)品信息
???var date = ['Iphone5S','佳能相機(jī)','50元充值卡','三星S7','小米5','電冰箱','小汽車','惠普打印機(jī)','LG顯示器'],
????timer = null,//定時(shí)器
????flag = 0;
??window.onload = function(){
???
???var?play = document.getElementById("play"),//開始
????stop = document.getElementById("stop");//結(jié)束
???//鼠標(biāo)開始
???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"),
?????//獲取角標(biāo)
?????dateM = Math.floor(Math.random()*date.length);?
????title.innerHTML = date[dateM];
????},50)
???}
???//鼠標(biāo)暫停
???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;
?????}
????}
???}
??}
??//開始抽獎(jiǎng)
??function playFun(){
???//抽獎(jiǎng)前清除定時(shí)器
???clearInterval(timer);
???var title = document.getElementById("title");
???timer = setInterval(function(){
????var title = document.getElementById("title"),
?????//獲取角標(biāo)
?????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>
這是我寫的 你可以看看