zoukankan      html  css  js  c++  java
  • 抽奖系统(慕课网题目)

    要求实现功能:

    1.点击左侧按键,开始抽奖,点击右侧按键,停止抽奖;

    2.敲击回车键,开始抽奖,再次敲击回车键,停止抽奖;

    3.开始抽奖后,左侧按钮变色;

    html:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>抽奖</title>
        <link rel="stylesheet" href="style.css">
        <script src="eventUtil.js"></script>
        <script src="js.js"></script>
    </head>
    <body>
    <div class="box">
        <div id="header">开始抽奖啦!</div>
        <div id="btn">
            <span id="start">开始</span>
            <span id="stop">结束</span>
        </div>
    </div>
    </body>
    </html>

    css:

    body{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 400px;
        height: 200px;
        border: 1px solid #0C4E7C;
        margin: 0 auto;
    }
    #header{
        color:darkred;
        font-size: 24px;
        text-align: center;
        width: 400px;
        height: 60px;
        line-height: 60px;
    }
    #btn{
        width: 200px;
        overflow: hidden;
        margin: 30px auto 0;
    }
    #btn span{
        cursor: pointer;
        border: 2px solid #a09a09;
        border-radius: 7px;
        margin-right: 10px;
        color: #000;
        display: inline-block;
        height: 40px;
        width: 80px;
        background-color: #f2ec55;
        line-height: 40px;
        text-align: center;
    }

    JavaScript:

    js.js:
    var date = ["谢谢参与", "谢谢参与", "谢谢参与", "50元话费", "ipad", "佳能相机", "苹果手机", "3DS", "switch", "1000元超市购物卡"];
    var timer = null;
    var flag = 0;
    
    
    window.onload = function () {
    
        // var header = document.getElementById("header");优化前
        var start = document.getElementById("start");
        var stop = document.getElementById("stop");
    //鼠标抽奖
        eventUtil.addHandler(start, "click", getStart);
        eventUtil.addHandler(stop, "click", getStop);
    //键盘抽奖;
        document.onkeyup = function (event) {
            var e = event || window.event;
            //检测按键键值;
            // console.log(e.keyCode);
            if (e.keyCode === 13) {
                if (flag === 0) {
                    getStart();
                    flag = 1;
                } else {
                    getStop();
                    flag = 0;
                }
            }
        };
    
        function getStart() {
            clearInterval(timer);
            var header = document.getElementById("header");//优化后
            timer = setInterval(function () {
                //代码优化前
                //var x = parseInt(Math.random()*10);
                var random = Math.floor(Math.random() * date.length);
                header.innerHTML = date[random];
            }, 50);
            start.style.backgroundColor = "#999";
            flag = 1;
        }
    
        function getStop() {
            clearInterval(timer);
            start.style.backgroundColor = "#f2ec55";
            flag = 0;
        }
    };
    eventUtil.js
    var eventUtil = {
        getEvent:function (event) {
            return event?event:window.event;
        },
        getType: function (event) {
            return event.type;
        },
        getTarget:function (event) {
            return event.target||event.srcElement;
        },
        //阻止冒泡
        stopPropagation:function (event) {
            if(event.stopPropagation){
                event.stopPropagation();
            }else {
                event.cancelBubble=true;
            }
        },
        //阻止事件默认行为;
        preventDefault:function(event){
            if(event.preventDefault){
                event.preventDefault();
            }else {
                event.returnValue = false;
            }
        },
        //添加具柄;
        addHandler: function (element, type, Handler) {
            if (element.ç) {
                element.addEventListener(type, Handler, false);
            } else if (element.attachEvent) {
                element.attachEvent("on" + type, Handler);
            } else {
                element["on" + type] = Handler;
            }
        },
        //删除具柄;
        removeHandler: function (element, type, Handler) {
            if (element.removeEventListener) {
                element.removeEventListener(type, Handler, false);
            } else if (element.detachEvent) {
                element.detachEvent("on" + type, Handler);
            } else {
                element["on" + type] = null;
            }
        }
    };
  • 相关阅读:
    Python3之random模块常用方法
    Go语言学习笔记(九)之数组
    Go语言学习笔记之简单的几个排序
    Go语言学习笔记(八)
    Python3之logging模块
    Go语言学习笔记(六)
    123. Best Time to Buy and Sell Stock III(js)
    122. Best Time to Buy and Sell Stock II(js)
    121. Best Time to Buy and Sell Stock(js)
    120. Triangle(js)
  • 原文地址:https://www.cnblogs.com/sunxirui00/p/7512570.html
Copyright © 2011-2022 走看看