简易抽奖小模块

最新推荐文章于 2024-11-16 19:59:13 发布

闪现A小兵

最新推荐文章于 2024-11-16 19:59:13 发布

阅读量455

点赞数

CC 4.0 BY-SA版权

分类专栏： js常见效果图文章标签： web前端 js常见效果

本文链接：https://blog.youkuaiyun.com/moguzhale/article/details/53231277

js常见效果图专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个简易抽奖模块的设计与实现，该模块使用了多种触发事件、定时器管理、键盘事件监听等技术。通过jQuery实现了抽奖过程的动态展示，并利用flag变量控制开始与停止的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是一个简易抽奖的小模块，用到了多种触发事件，涉及到了一些兼容性问题，定时器的使用以及定时器的清除(不使定时器累加)， event.keyCode属性的运用，flag的建立控制按下同一个键实现不同的效果，还有一些数组知识的运用;

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.8.3.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
#div1{
width: 250px;
margin: 100px auto;
border: 2px solid pink;
}
#div2{
width: 240px;
height: 40px;
padding-top: 10px;
text-align: center;
font-size:24px;
font-weight: bold;
color:#f00;
}
#div3 span{
display: inline-block;
width: 80px;
margin: 20px;
border-radius: 10px;
background: pink;
text-align: center;
cursor: pointer;
}

</style>
</head>
<body>
<div id="div1">
<div id="div2">开始抽奖</div>
<div id="div3">
<span id="play">开始</span>
<span id="stop">停止</span>
</div>
</div>

<script>
var eles=["苹果7","MacBook","1000元购物卡","500元购物卡","尼康相机","小米手环","三星Note7","航空母舰"];
var timer,
flag=0;
window.onload=function(){
var play=document.getElementById("play"),
stop=document.getElementById("stop");
play.onclick=s4_play;
stop.onclick=s4_stop;
document.onkeyup=s4_play_keyup;
}
function s4_play(){
clearInterval(timer);
var play=document.getElementById("play"),
num=Math.floor(Math.random()*8);
timer=setInterval(s4_cj,50);
play.style.background="#999";
}
function s4_cj(){
var div2=document.getElementById("div2");
var num=Math.floor(Math.random()*8);
var goods=eles[num];
div2.innerHTML=goods;
// console.log(goods);
}
function s4_stop(){
clearInterval(timer);
play.style.background="pink";
}
function s4_play_keyup(event){
event=event||window.event;
console.log(event.keyCode);
if(event.keyCode==13){
if(flag==0){
s4_play();
flag=1;
}else if(flag==1){
s4_stop();
flag=0;
}
}
}

</script>
</body>

</html>

之前在代码的最后部分，写的是如下代码，发现没有效果，后来经过检查，发现是里面的s4_play和s4_stop函数没有加上（）导致；

所以,记住，单独引用一个函数的时候要加上（）,x.onclick=qw等这样引用的时候是不需要加上（）的;

if(flag==0){
s4_play;
flag=1;
}else if(flag==1){
s4_stop;
flag=0;
}