js实现可键盘控制的简单抽奖程序-南京廖华答案网

js实现可键盘控制的简单抽奖程序下载本文

内容发布更新时间 : 2024/11/16 0:37:53星期一下面是文章的全部内容请认真阅读。

本文实例为大家分享了js抽奖程序的编写代码，以及编写注意事项，感兴趣的小伙伴们可以参考一下代码：

<!DOCTYPE html> <html lang=\ <head>

<meta charset=\

*{margin:0;padding:0;}

.box{width: 400px;height: 300px;margin:50px auto;background: red}

.title{color: #fff;font-size: 30px;font-weight:700px;padding: 50px 0;text-align: center;height:40px;}

.btm{text-align: center;padding:20px 0;}

.btm a{display: inline-block;width: 120px;height:60px;line-height: 60px;background: #FEF097;margin:0 10px;text-decoration: none;} </style> <script>

var data=['Iphone','Ipad','笔记本','相机','谢谢参与','充值卡','购物券'], timer=null,//定时器 flag=0;//阻止多次回车 window.onload=function(){

var play=document.getElementById('play'), stop=document.getElementById('stop'); // 开始抽奖

play.onclick=playFun; stop.onclick=stopFun; // 键盘事件

document.onkeyup=function(event){ event = event || window.event; // 回车键的code值：13 if(event.keyCode==13){ if(flag==0){

playFun(); flag=1; }else{

stopFun(); flag=0; } } }

function playFun(){

var title=document.getElementById('title'); var play=document.getElementById('play'); clearInterval(timer);

timer=setInterval(function(){

var random=Math.floor(Math.random()*data.length); title.innerHTML=data[random]; },60);

play.style.background='#999'; }

function stopFun(){

clearInterval(timer);

var play=document.getElementById('play'); play.style.background='#FEF097'; } }

</script> </head> <body>

<div class=\

<div class=\淘家趣抽奖</div> <div class=\

<a href=\开始</a> <a href=\停止</a> </div> </div> </body> </html> 注意点：

1.随机数，取数组的其中一个；取0-n之间：Math.random()*(n+1) 2.定时器，开始抽奖时要停止前面的一次抽奖，不然会定时器重叠

3.按键操作，要判断是抽奖进行中，还是未开始，所有设置了变量 flag

以上就是本文的全部内容，希望对大家的学习有所帮助