<!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>
2016-08-23
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文件如上。不知道你是不是這個意思
2016-04-03
<!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>
這是我寫的 你可以看看