js实现抽奖功能_JavaScript

js实现抽奖功能

2021-11-30 14:29codeTcy JavaScript

这篇文章主要为大家详细介绍了js实现抽奖功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js实现抽奖功能的具体代码，供大家参考，具体内容如下

html部分：

				?

									<div id="title" class="title">开始抽奖啦</div>

									 <div class="btns">

									 <span id="play">开始</span>

									 <span id="stop">结束</span>

									</div>

css部分：

				?

									*{

									margin: 0;

									padding: 0;

									}

									.title{

									width: 400px;

									height:70px ;

									/*水平居中*/

									margin: 0 auto;

									padding-top: 30px;

									text-align: center;

									font-size: 24px;

									color:#F00;

									}

									.btns{

									width: 190px;

									height: 30px;

									margin: 0 auto;

									}

									.btns span{

									display: block;

									float:left;

									width:80px;

									height:27px;

									line-height:27px;

									background:#036;

									border:1px solid #eee;

									border-radius:7px;

									margin-right:10px;

									color:#FFF;

									text-align:center;

									font-size:14px;

									font-family:"微软雅黑";

									cursor:pointer;

									}

Js部分：

				?

									var data=['Phone5','Ipad','笔记本','相机','打印机','谢谢参与','50元券'];

									var timer=null;

									 window.function(){

									 var play=document.getElementById('play');

									 var stop=document.getElementById('stop');

									 play.playFun;

									 stop.stopFun;

									 }

									 function playFun(){

									 var play=document.getElementById('play');

									 var title=document.getElementById('title');

									 clearInterval(timer);

									 timer=setInterval(function(){

									 var random=Math.floor(Math.random()*data.length);

									 title.innerHTML=data[random];

									 },50)

									 play.style.background='#eee';

									 }

									 function stopFun(){

									 var play=document.getElementById('play');

									 clearInterval(timer);

									 play.style.background='#036';

									 }