模拟简单的抽奖

Emi Wang

Sep 10, 2015 • 2 min read

今天的学习中有一个模拟抽奖系统的，主要是练习鼠标事件和键盘事件。依然自己先模仿再看老师给的代码~ btw，今天是教师节，老师们节日快乐~

<!DOCTYPE html>
<html>
<head>
    <title>lottery_system</title>
	<meta charset="utf-8" />
    <style>
        #contain {
            width: 200px;
            margin: 20px auto;
            text-align: center;
        }
        #lottery {
            padding: 10px;
        }
        .btn {
            margin: 5px;
        }
    </style>
</head>
<body>
    <div id="contain">
        <div id="lottery">lottery</div>
        <div>
            <input type="button" value="play" id="play" class="btn" />
            <input type="button" value="stop" id="stop" class="btn" />
        </div>
    </div>

    <script>
        var lotteryList = ["谢谢", "娃哈哈一瓶", "抽纸一盒", "插座一个", "充电宝一只", "iPad迷你"];
        var lotteryShow = document.getElementById("lottery");
        var play = document.getElementById("play");
        var stop = document.getElementById("stop");
        var start;
        var num = 0;
        function lottery() {
            clearTimeout(start); //解决按play按钮多次后 停不下来的bug 老师威武
            var x = Math.floor(Math.random() * lotteryList.length);
            lotteryShow.innerHTML = lotteryList[x];
            start = setTimeout(lottery, "100");
        }

        //鼠标事件
        play.addEventListener("mousedown", lottery);
        stop.addEventListener("mousedown", function () {
            clearTimeout(start);
        });

        document.addEventListener("keypress", function (event) {
            var keynum = event.which;
            if (keynum == 13) {
                if (num == 0) {
                    lottery();
                    num = 1;
                } else if (num == 1) {
                    clearTimeout(start);
                    num = 0;
                }
            }
        });
    </script>
</body> 
</html>

最近断断续续的都有在写代码，觉得顺手多了，虽然代码还是以实现简单功能为最终目标，不考虑兼容、不考虑性能、不考虑...但比起以前还是顺手多啦，至少不觉得很迷茫了，看见题目有清晰的思路，虽然很多具体的细节都不知道怎么实现而要查文档或者请教别人。我会更加努力的！Fighting!

Sign up for more like this.