DOM事件探秘之三-键盘事件

最新推荐文章于 2024-06-16 09:35:13 发布

香雪儿sofia

最新推荐文章于 2024-06-16 09:35:13 发布

阅读量1.8k

点赞数

分类专栏： JS小功能 DOM事件文章标签： dom JS抽奖键盘事件抽奖系统 keyup事件

本文链接：https://blog.csdn.net/sofia92/article/details/50536761

版权

DOM事件同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

JS小功能

4 篇文章 0 订阅

订阅专栏

键盘事件

keyDown:按下任意字符键事触发，如果按着不放会重复触发此事件；
keyPress:按下任意字符键事触发，如果按着不放会重复触发此事件；
keyUp：松开时触发的事件。

本次预期是实现一个抽奖的小功能，当鼠标点击开始或者第一次按下回车键时，系统开始抽奖；鼠标点击结束或者第二次按下回车键时，停止抽奖。
实现效果：
这里写图片描述

【HTML结构】

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

【JS】

var data=['Phone5','Ipad','三星笔记本','佳能相机','惠普打印机','谢谢参与','50元充值卡','1000元超市购物券'],
    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;
      //keycode返回键盘中按下的是哪个键，13是回车键。第一次敲回车键，flag为0，执行开始，后面flag置为1，第二次敲回车。flag是1，执行结束
      if(event.keyCode==13){
         if(flag==0){
           playFun();
           flag=1;
         }else{
           stopFun();
           flag=0;
         }
      }
   }
}
// 获取到开始的点击操作，调用playfun函数，每隔50毫秒生成一个随机数，根据这个随机数查找到数组中的那一个，赋值给title。
function playFun(){
    var title=document.getElementById('title');
    var play=document.getElementById('play');
  //clearInterval() 方法可取消由 setInterval() 设置的 timeout。clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
  //加一个定时器之前先清除一个定时器
    clearInterval(timer);
    timer=setInterval(function(){
    //Math.random()  生成随机数（0到1之间的浮点数）用数组长8去乘以这个浮点数，math.floor()取整0到7
       var random=Math.floor(Math.random()*data.length);
       title.innerHTML=data[random];
    },50);//浏览器每隔50毫秒去执行这个脚本，生成随机数。
    play.style.background='#999';
}
function stopFun(){
  // 点击结束时，计时器停止，开始按钮背景色恢复
    clearInterval(timer);
    var play=document.getElementById('play');
    play.style.background='#036';
}

【CSS】

*{margin:0;
  padding:0;}

.title{width:400px;
       height:70px;
       margin:0 auto;
       padding-top:30px;
       text-align:center;
       font-size:24px;
       font-weight:bold;
       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;}

香雪儿sofia

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
DOM事件探秘之三-键盘事件

键盘事件 keyDown:按下任意字符键事触发，如果按着不放会重复触发此事件； keyPress:按下任意字符键事触发，如果按着不放会重复触发此事件； keyUp：松开时触发的事件。本次预期是实现一个抽奖的小功能，当鼠标点击开始或者第一次按下回车键时，系统开始抽奖；鼠标点击结束或者第二次按下回车键时，停止抽奖。实现效果：【HTML结构】 <body> <di
复制链接

扫一扫

专栏目录