抽奖系统

最新推荐文章于 2024-08-24 17:30:53 发布

大龄下岗程序员

最新推荐文章于 2024-08-24 17:30:53 发布

阅读量788

点赞数

分类专栏： JavaScript代码文章标签： JavaScript 抽奖系统

JavaScript代码专栏收录该内容

1 篇文章 0 订阅

订阅专栏

play.html

<!doctype html>
<html>
<head>
	<title>抽奖</title>
	<meta charSet="UTF-8"/>
   <link type="text/css" rel="stylesheet" href="style.css">
   <script type="text/javascript" src="script.js"></script>
</head>

<body>
	<div id="title" class="title">开始抽奖啦!</div>
	<div class="btns">
		<span id="play">开 始</span>
		<span id="stop">停 止</span>
	</div>
	
</body>
</html>

script.js

var data=['Phone5','Ipad','三星笔记本','佳能相机','惠普打印机','谢谢参与','50元充值卡','1000元超市购物券'],
    timer=null,
    flag=0;
window.οnlοad=function(){
	var title=document.getElementById('title');
	var play=document.getElementById('play');
	var stop=document.getElementById('stop');
	//触发方法	
	play.οnclick=playFun;
	stop.οnclick=stopFun;

   // 键盘事件 Enter
   document.οnkeyup=function(event){ 
      event = event || window.event; 
      if(event.keyCode==13){
  		 if(flag==0){
           playFun();
           flag=1;
         }else{
           stopFun();
           flag=0;
         }
      }
   }
	//方法定义
	function playFun(){
		clearInterval(timer);
		timer=setInterval(function(){
	    var random=Math.floor(Math.random()*data.length);
	    title.innerHTML=data[random];
	},80);
	 stop.style.background='#036';
	 play.style.background='#999';
	}

	function stopFun(){
	  play.style.background='#036';
      stop.style.background='#999';
     clearInterval(timer);
 	}
}

style.css

*{margin:0;padding: 0;}
.title{width: 400px;
	height: 80px;
	margin: 0 auto;
	padding-top: 20px;
	text-align:center;
	font-size:24px;
	font-weight:bold;
	color:#F00;}
.btns{
	width: 200px;
	height: 40px;
	margin:0 auto;}

.btns span{
	display: block;
	float: left;
	width: 90px;
	height: 27px;
	line-height: 27px;

	background:#036;
	border-radius: 7px;
	margin-right: 10px;
	text-align: center;
	color: #FFF;
	text-align:center;
	font-size: 14px;
	font-family: "微软雅黑";
	cursor:pointer;
}