模拟简单的抽奖
今天的学习中有一个模拟抽奖系统的,主要是练习鼠标事件和键盘事件。依然自己先模仿再看老师给的代码~ 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!