您的位置：首页 > 其它

imooc -dom事件练习（抽奖练习）

2017-04-04 21:20 134 查看

又学完了一个imooc课程

练习抽奖小练习

主要是几个dom事件：

keypress 按下任意键执行

keydown 按下字符键执行

keyup 释放键盘执行

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<link rel="stylesheet" type="text/css" href="">
<body>
<div>
<center>
<br>
<p>开始抽奖了！</p>
<div id="content" style="margin: 30px; width: 200px;height: 50px;">
</div>

<button id="play">开始</button>
<button id="stop">停止</button>
<p id="result"></p>
</center>
</div>

<script type="text/javascript">
var data=['笔记本','iphone4','iphone6','ipad','ipod','geogoo glasses','macbook','iphone7','thx','hello word'];
var timer=null;
var flag=0;
window.onload=function(){
var play=document.getElementById('play'),
stop=document.getElementById('stop');
play.onclick=playFun;
stop.onclick=stopFun;
document.onkeyup=function(event){
if (event.keyCode==13) {
if (flag==0) {
flag=1;
playFun();

}else{
stopFun();
flag=0;
}

}
}
}

function playFun(){

clearInterval(timer);
timer=setInterval(function(){
var content=document.getElementById('content');
var random=Math.floor(Math.random()*data.length);
content.innerHTML=data[random];
},100);

}
function stopFun(){
clearInterval(timer);
}

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航