抽奖小案例

最新推荐文章于 2022-05-05 20:38:59 发布

where_slr

最新推荐文章于 2022-05-05 20:38:59 发布

阅读量549

点赞数

分类专栏：练手小插件文章标签： random 键盘对象 javascript

本文链接：https://blog.csdn.net/where_slr/article/details/72598265

版权

练手小插件专栏收录该内容

6 篇文章 0 订阅

订阅专栏

涉及知识

keyDown:当用户按下键盘上的任意键是触发，而且如果按住不放的话，会重复触发此事件
keyPress:当用户按下键盘上的自附件是触发，而且如果按住不放的话，会重复触发此事件
keyUp:当用户释放键盘上的键时触发
keyCode：event对象的keyCode属性用于得到键盘对应键的键码值
var random=Math.floor(Math.random()*data.length);//随机数取整（向下取整）

//判断是第几次敲击键盘
var flag = 0;
f(flag == 0){   
            playFun();//开始
            flag = 1;
    }else{
            stopFun();//停止
            flag = 0;
    }

HTML

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>抽奖</title>
  <link type="text/css" rel="stylesheet" href="css/style.css" />
  <script src="js/style.js"></script>
 </head>
 <body>
    <div id ="title" class="title">开始抽奖！</div>
    <div class="btns">
        <span id="play">开 始</span>
        <span id="stop">停 止</span>
    </div>
 </body>
</html>

CSS

*{
    margin:0;
    padding:0;
}
.title {
    width:400px;
    height:70px;
    margin:0 auto;
    margin-top:70px;
    text-align:center;
    font-size:28px;
    color:red;
    font-weight:bold;
    font-family:"微软雅黑";
}
.btns{
    width:210px;
    height:30px;
    margin:0 auto;
}
.btns span{
    display:block;
    float:left;
    width:90px;
    height:25px;
    line-height:25px;
    text-align:center;
    margin-right:10px;
    border-radius:7px;
    border:1px solid #eee;
    background-color:#369;
    cursor:pointer;
}

Javascript

var data = ["phone","IPad","三星笔记本","佳能相机","谢谢关注","50元充值卡","1000元购物券","惠普笔记本"],
        timer = null,flag = 0;

window.onload = function(){
    var title=document.getElementById("title");
    var play = document.getElementById("play");
    var stop = document.getElementById("stop");
    //开始抽奖
    play.onclick = playFun;
    //停止抽奖
    stop.onclick = stopFun;
    //键盘按下开始
    document.onkeyup = function(event){
        event = event || window.event;
        if(event.keyCode == 13){
            //keyCode 键值
            if(flag == 0){   //判断是第几次敲击键盘
                    playFun();
                    flag = 1;
            }else{
                    stopFun();
                    flag = 0;
            }           
        }
    }
}
    function playFun(){
        var title = document.getElementById("title");
        var play = document.getElementById("play");
        if(timer){
            clearInterval(timer);
        }
        timer = setInterval(function(){
            var random = Math.floor(Math.random()*data.length);//随机产生一个数，作为data的下标，但是范围在0-7之间
            title.innerHTML = data[random];
        },100);
        play.style.backgroundColor = "#c1b1b1";

    }

    function stopFun(){
        clearInterval(timer);
        play.style.backgroundColor = "#369";
    }

这里写图片描述

where_slr

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
抽奖小案例

涉及知识keyDown:当用户按下键盘上的任意键是触发，而且如果按住不放的话，会重复触发此事件keyPress:当用户按下键盘上的自附件是触发，而且如果按住不放的话，会重复触发此事件keyUp:当用户释放键盘上的键时触发keyCode：event对象的keyCode属性用于得到键盘对应键的键码值var random=Math.floor(Math.random()*data.length)
复制链接

扫一扫

专栏目录