写点什么

五分钟学会做一个在线抽奖系统,手把手教你抽奖还学不会嘛?

  • 2021 年 11 月 11 日
  • 本文字数:2366 字

    阅读完需:约 8 分钟

首先我们应该为开始按钮设置一个点击响应的函数。在其中写入相应的触发事件。


// 点击开始按钮


$("#startID").click(function () {


});


2、设置开始按钮失效




在我们点击了开始按钮之后,设置只能点击停止按钮,同时这个时候开始按钮是无法点击的,**该设置是 disabled 属性决定的,属性为 true 时,按钮无法点击;属性为 false 时,按钮可以点击。**在这里我们使用设置元素属性的 prop 方法对其的 disabled 属性进行设置。


// 设置开始按钮和停止按钮可用不可用


$("#startID").prop("disabled",true);


$("#stopID").prop("disabled",false);


3、定义循环定时器




在 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);


4、切换小相框的 src 属性




当我们生成随机数之后,通过该随机数获取到存放在数组中的图片的 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);


});


至此,开始按钮的点击事件就已将完成了,现在点击开始按钮,就能够显示小相框中图片的滚动,但是点击停止按钮并不会有事件响应,接下来我们来设置停止按钮的响应事件。


四、设置结束按钮动作事件


================


1、为结束按钮设置监听函数




设置停止按钮的监听函数,在点击了响应的按钮之后,会触发其中的响应事件。


// 点击停止按钮


$("#stopID").click(function () {


});


2、设置停止按钮失效




同时我们需要将停止按钮设置成不可点击,将开始按钮设置为可点击,同样是对 disabled 属性进行设置。


// 设置开始按钮和停止按钮可用不可用


$("#startID").prop("disabled",false);


$("#stopID").prop("disabled",true);


3、停止定时器




在我们点击在停止按钮之后,就需要将循环定时器停止,否则它还将会继续运行下去,设置计时器停止的方法是 clearInterval(),其中传入的参数是开始按钮返回的值,


// 停止循环计时器


clearInterval(intervalNum);


4、给大相框设置 src 属性




因为我们在开始按钮的事件中就已经随机的生成了图片的 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 案例之抽奖</ti


【一线大厂Java面试题解析+后端开发学习笔记+最新架构讲解视频+实战项目源码讲义】
浏览器打开:qq.cn.hn/FTf 免费领取
复制代码


tle>


<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="点击停止"

评论

发布
暂无评论
五分钟学会做一个在线抽奖系统,手把手教你抽奖还学不会嘛?