js通过键盘或者鼠标事件模拟抽奖效果
摘要:我们想通过键盘按钮来写抽奖效果之前,我们可以先写一个比较简单的,也就是单纯利用鼠标点击事件来写抽奖效果。下面我们开始布局 HTML: div id='title'抽奖开始啦!/divdiv id='btns'span
我们想通过键盘按钮来写抽奖效果之前,我们可以先写一个比较简单的,也就是单纯利用鼠标点击事件来写抽奖效果。下面我们开始布局
HTML:
<div id='title'>抽奖开始啦!</div> <div id='btns'> <span id='play'>开 始</span> <span id='stop'>停 止</span> </div>CSS:
*{margin:0; padding: 0;} #title{width: 400px; height: 70px; line-height:70px; margin: 20px auto; color:red; font-size: 24px; text-align:center; font-weight:700;} #btns{ width: 190px; margin: 0 auto;} #btns span{ width:80px; height: 30px; line-height: 30px; display:inline-block; cursor:pointer; text-align:center; background:#036; color:#fff; border-radius:7px; margin-right:10px;}因为我们主要的目的是简洁抽奖效果的制作,所以对于样式上的调整我们就不做详细的写了,大家可以根据自己的喜好来跳转样式。下面我们就主要讲解js的部分
var eles=['iphone 5s','ipad mini','1000元优惠券','100元充值卡','三星笔记本'], //首先我们定义一组数组用来存放奖品 timer=null, //定义定时器 window.onload=function(){ var otitle=document.getElementById('title'), oplay=document.getElementById('play'), ostop=document.getElementById('stop'); //开始按钮 oplay.onclick=playfn; ostop.onclick=stopfn; function playfn(){ clearInterval(timer); //每次点击开始按钮时,清除原来的定时器,否则抽奖效果会越来越快。大家可以把这句话去掉重复点击开始按钮实验一下 timer=setInterval(function(){ var i=Math.floor(Math.random()*eles.length); //随机产生数字 otitle.innerHTML=eles[i]; //把对应的数组内容放到标题内容中 },50); this.style.backgroundColor='#999'; //开始按钮改变样式 } //停止按钮 function stopfn(){ clearInterval(timer); oplay.style.backgroundColor='#036'; } }如上,我们可以通过点击“开始”和“停止”按钮来控制抽奖效果了,然后我们在上面代码的基础上增加键盘事件
//键盘事件 document.onkeyup=function(event){ event = event || window.event; if(event.keyCode==13){ if(flag==0){ playfn(); flag=1; }else{ stopfn(); flag=0; } } }首先我们在代码最上面定义数组的地方定义flag进行标识一下,var flag=0; 我们通过改变flag的值来告诉键盘本次点击是开始还是停止抽奖,如果flag等于0那么则是开始抽奖,如果flag等于1就相当于停止抽奖。需要注意的是event.keyCode==13这句话的意思是回车键,也就是说上面这个代码的意思是让我们通过点击回车键来控制抽奖效果,如果你想通过空格键来进行操作只需要把13改成空格所对于的键盘编码就可以了。
可是当我们把这段代码放到js文件里运行的时候发现控制台会给我们报错,仔细观察错误内容发现是我们playfn()这个函数内改变按钮背景的这句代码有问题,这是因为什么呢?其实很简单,this在这里使用的不当,当我们使用键盘事件来操作时就不能使用this了,我们只需把this替换成oplay就可以了。然后再运行就发现不管是通过鼠标进行点击还是通过键盘进行操作都没有问题了。
可能又有人会问那么我们如果键盘和鼠标事件混合使用时该怎么写呢,其实这也是很简单的,我们只要巧妙使用flag这个变量就能很好的解决这个问题。下面我们给出js的完整代码,我们点击“开始”按钮后也可以通过点击回车键来进行停止,这样鼠标和键盘可以根据用户自己的习惯进行操作了。
var eles=['iphone 5s','ipad mini','1000元优惠券','100元充值卡','三星笔记本'], timer=null, flag=0; window.onload=function(){ var otitle=document.getElementById('title'), oplay=document.getElementById('play'), ostop=document.getElementById('stop'); //开始按钮 oplay.onclick=playfn; ostop.onclick=stopfn; function playfn(){ clearInterval(timer); timer=setInterval(function(){ var i=Math.floor(Math.random()*(eles.length)); otitle.innerHTML=eles[i]; },50); oplay.style.backgroundColor='#999'; flag=1; } //停止按钮 function stopfn(){ clearInterval(timer); oplay.style.backgroundColor='#036'; flag=0; } //键盘事件 document.onkeyup=function(event){ event = event || window.event; //console.log(event.keyCode); if(event.keyCode==13){ if(flag==0){ playfn(); }else{ stopfn(); } } } }
演示程序: