JavaScript实现抽奖系统，包括键盘事件

来源：互联网发布：网络与信息中心编辑：程序博客网时间：2024/04/29 18:44

keyDown:当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事件

keyPress:当用户按下键盘上的字符键时触发，而且如果按住不放的话，会重复触发此事件

keyUp:当用户释放键盘上的键时触发

EVENT对象的keyCode属性用于得到键盘对应键的键码值

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">#title {text-align: center;color: red;font-size: 24px;}.btns {text-align: center;margin-top: 30px;}.btns span {display: inline-block;width: 100px;height: 30px;line-height: 30px;cursor: pointer;background: #000;color: #fff;border-radius: 10px;}</style></head><body><div class="" id="title">开始抽奖啦！</div><div class="btns"><span id="start">开始</span><span id="stop">停止</span></div><script type="text/javascript">var data = ["刘英帅", "李登昌", "李旭峰", "韩宇鹏", "连宇杰", "李俊奇"];var timer = null;window.onload = function() {var start = document.getElementById("start");var stop = document.getElementById("stop");var flag = 0;//开始抽奖start.onclick = playFun;stop.onclick = stopFun;//键盘事件document.onkeypress = function(event) {event = event || window.event;if(event.keyCode == 13) {//键码等于13时表明按下的是回车键if(flag == 0) {playFun();flag = 1;} else {stopFun();flag = 0;}}}}function playFun() {var title = document.getElementById("title");var start = document.getElementById("start");clearInterval(timer);timer = setInterval(function() {var random = Math.floor(Math.random() * data.length);title.innerHTML = data[random];}, 50)start.style.background = '#999';}function stopFun() {clearInterval(timer);var start = document.getElementById("start");start.style.background = '#000';}</script></body></html>

0 0