目录
Hello,你好呀,我是灰小猿!一个超会写bug的程序猿!
抽奖应该大家都玩过吧?但是使用jquery框架自己做一个在线抽奖系统你会嘛?
今天我就来和大家分享一个超简单的利用jQuery框架实现的在线抽奖系统。放上几张学妹的照片,看你能抽到哪一个呢?
先来带大家看一下效果图:
想要实现这样一个抽奖系统其实很简单,我们先来讲一个做这样一个小的抽奖系统的基本思路和实现原理:
我们上面看到的图片其实以一个个URL的形式存储在数组中的,当我们点击开始按钮之后,利用一个定时循环器循环生成一个随机数,随机数的范围是0~len(数组)-1。之后获取到该下标的数组中的图片链接,让其显示在小相框中,循环的时间我们可以自己设定。当我们点击了停止按钮之后,让定时循环器停止,读取当前随机生成的数字,并且将该下标下的图片显示在大相框。 当我们再次点击开始的时候,可以重新启动定时循环器,重复上面的步骤。同时我们还要设置,在点击了开始按钮之后,开始按钮就不能够再点击,只能点击停止按钮;点击了停止按钮之后停止按钮就不能再点击,只能点击开始按钮;
接下来我们就来将上面的思路进行实现。
实现部分主要分为两大部分,一部分是开始按钮点击之后实现的动作事件,另一个是点击停止按钮之后实现的动作事件。
首先我们需要先找到要作为抽奖选项的图片,将其URL存放到字符数组中,以便之后访问。
// 添加所有循环的图片的url
var imgArr = ["../img/man00.jpg",
"../img/man01.jpg",
"../img/man02.jpg",
"../img/man03.jpg",
"../img/man04.jpg",
"../img/man05.jpg",
"../img/man06.jpg"
];
在我们确定好要循环的素材之后,第二步就是点击开始按钮的事件了,在开始按钮的点击事件中,要执行的动作是启动一个定时器,生成一个随机数,小相框中显示图片。
首先我们应该为开始按钮设置一个点击响应的函数。在其中写入相应的触发事件。
// 点击开始按钮
$("#startID").click(function () {
});
在我们点击了开始按钮之后,设置只能点击停止按钮,同时这个时候开始按钮是无法点击的,该设置是disabled属性决定的,属性为true时,按钮无法点击;属性为false时,按钮可以点击。在这里我们使用设置元素属性的prop方法对其的disabled属性进行设置。
// 设置开始按钮和停止按钮可用不可用
$("#startID").prop("disabled",true);
$("#stopID").prop("disabled",false);
在jquery中设置循环定时器的方法是使用:setInterval()方法,该方法传入两个参数,第一个参数是一个将要执行的方法体,第二个参数是一个循环时间,单位是ms,表示每隔多少秒循环一次。如下的定义表示每20ms循环一次。
setInterval()方法具有一个返回值,该返回值可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。
在该方法中我们使用Math的random()方法来生成一个随机数,由于该方法生成的数的范围是0~0.99,所以我们将其乘以7,得到的随机数范围就是0~6;
// 设置一个循环定时器,循环20毫秒
intervalNum = setInterval(function () {
// 得到1~6的随机数
index = Math.floor(Math.random()*7);
},20);
当我们生成随机数之后,通过该随机数获取到存放在数组中的图片的url,之后将该URL设置给显示图片的组件。
// 点击开始按钮
$("#startID").click(function () {
// 设置开始按钮和停止按钮可用不可用
$("#startID").prop("disabled",true);
$("#stopID").prop("disabled",false);
// 设置一个循环定时器,循环20毫秒
intervalNum = setInterval(function () {
// 得到1~6的随机数
index = Math.floor(Math.random()*7);
// 将小相框的src属性设置成图片链接
$("#img1ID").prop("src",imgArr[index]);
},20);
});
至此,开始按钮的点击事件就已将完成了,现在点击开始按钮,就能够显示小相框中图片的滚动,但是点击停止按钮并不会有事件响应,接下来我们来设置停止按钮的响应事件。
设置停止按钮的监听函数,在点击了响应的按钮之后,会触发其中的响应事件。
// 点击停止按钮
$("#stopID").click(function () {
});
同时我们需要将停止按钮设置成不可点击,将开始按钮设置为可点击,同样是对disabled属性进行设置。
// 设置开始按钮和停止按钮可用不可用
$("#startID").prop("disabled",false);
$("#stopID").prop("disabled",true);
在我们点击在停止按钮之后,就需要将循环定时器停止,否则它还将会继续运行下去,设置计时器停止的方法是clearInterval(),其中传入的参数是开始按钮返回的值,
// 停止循环计时器
clearInterval(intervalNum);
因为我们在开始按钮的事件中就已经随机的生成了图片的URL下标,所以我们在设置大相框的图片时,直接使用该下标就可以了!利用prop方法修改图片的src为随机生成的图片的URL,
// 点击停止按钮
$("#stopID").click(function () {
// 设置开始按钮和停止按钮可用不可用
$("#startID").prop("disabled",false);
$("#stopID").prop("disabled",true);
// 停止循环计时器
clearInterval(intervalNum);
$("#img2ID").prop("src",imgArr[index]);
});
到这里,结束按钮的响应事件就也已经实现了,现在再点击开始和停止按钮就可以实现完整的抽奖系统了,
最后将其整合成完整源码,快来抽取你喜欢的学妹吧!
(其中用到的图片需要大家根据需要自行添加)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery案例之抽奖</title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script language="JavaScript" type="text/javascript">
// 添加所有循环的图片的url
var imgArr = ["../img/man00.jpg",
"../img/man01.jpg",
"../img/man02.jpg",
"../img/man03.jpg",
"../img/man04.jpg",
"../img/man05.jpg",
"../img/man06.jpg"
];
var index; // 定义一个抽奖的随机数字
var intervalNum; //接收定时器的当前状态值
$(function () {
// 设置开始按钮和停止按钮可用不可用
$("#startID").prop("disabled",false);
$("#stopID").prop("disabled",true);
// 点击开始按钮
$("#startID").click(function () {
// 设置开始按钮和停止按钮可用不可用
$("#startID").prop("disabled",true);
$("#stopID").prop("disabled",false);
// 设置一个循环定时器,循环20毫秒
intervalNum = setInterval(function () {
// 得到1~6的随机数
index = Math.floor(Math.random()*7);
// 将小相框的src属性设置成图片链接
$("#img1ID").prop("src",imgArr[index]);
},20);
});
// 点击停止按钮
$("#stopID").click(function () {
// 设置开始按钮和停止按钮可用不可用
$("#startID").prop("disabled",false);
$("#stopID").prop("disabled",true);
// 停止循环计时器
clearInterval(intervalNum);
$("#img2ID").prop("src",imgArr[index]);
});
});
</script>
</head>
<body>
<!-- 小像框 -->
<div style="border-style:dotted;width:160px;height:100px">
<img id="img1ID" src="../img/man00.jpg" style="width:160px;height:100px"/>
</div>
<!-- 大像框 -->
<div
style="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px">
<img id="img2ID" src="../img/man00.jpg" width="800px" height="500px"/>
</div>
<!-- 开始按钮 -->
<input
id="startID"
type="button"
value="点击开始"
style="width:150px;height:150px;font-size:22px"
onclick="imgStart()">
<!-- 停止按钮 -->
<input
id="stopID"
type="button"
value="点击停止"
style="width:150px;height:150px;font-size:22px"
onclick="imgStop()">
</body>
</html>
有问题的小伙伴记得在评论区或者私信留言!
我是灰小猿!我们下期见!