Posted in jQuery onApril 12, 2020
本文实例为大家分享了jQuery实现抽奖程序的具体代码，供大家参考，具体内容如下
1. 主要需求
- 实现一个抽奖功能。
- 点击开始按钮后，开始按钮禁用，停止按钮取消禁用，小图片实现快速切换显示。
- 点击停止按钮后，停止按钮禁用，开始按钮取消禁用，小图片停止切换，将小图片在大图片位置显示。
- 小图片实现快速切换显示。
- 点击停止按钮后，淡入淡出选中图。
2. 素材页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>抽奖程序</title>
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<style type="text/css">
#small {
border: 1px solid blueviolet;
width: 75px;
height: 75px;
margin-bottom: 20px;
}
#smallPhoto {
width: 75px;
height: 75px;
}
#big {
border: 2px solid orangered;
width: 500px;
height: 500px;
position: absolute;
left: 300px;
top: 10px
}
#bigPhoto {
width: 500px;
height: 500px;
}
#btnStart {
width: 100px;
height: 100px;
font-size: 22px;
}
#btnStop {
width: 100px;
height: 100px;
font-size: 22px;
}
</style>
</head>
<body>
<!-- 小像框 -->
<div id="small">
<img id="smallPhoto" src="../img/man00.png"/>
</div>
<!-- 大像框 -->
<div id="big">
<img id="bigPhoto" src="../img/begin.jpg" />
</div>
<input id="btnStart" type="button" value="点击开始"/>
<input id="btnStop" type="button" value="点击停止"/ disabled>
<script type="text/javascript">
</script>
</body>
</html>
3. 代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>抽奖程序</title>
<script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
<style type="text/css">
#small {
border: 1px solid blueviolet;
width: 75px;
height: 75px;
margin-bottom: 20px;
}
#smallPhoto {
width: 75px;
height: 75px;
}
#big {
border: 2px solid orangered;
width: 500px;
height: 500px;
position: absolute;
left: 300px;
top: 10px
}
#bigPhoto {
width: 500px;
height: 500px;
}
#btnStart {
width: 100px;
height: 100px;
font-size: 22px;
}
#btnStop {
width: 100px;
height: 100px;
font-size: 22px;
}
</style>
</head>
<body>
<!-- 小像框 -->
<div id="small">
<img id="smallPhoto" src="../img/man00.jpg"/>
</div>
<!-- 大像框 -->
<div id="big">
<img id="bigPhoto" src="../img/begin.jpg" />
</div>
<input id="btnStart" type="button" value="开始" onclick="gameStart()">
<input id="btnStop" type="button" value="停止" disabled onclick="gameOver()">
<script type="text/javascript">
//初始化抽奖的名单（图片地址）
let imgs = [
"../img/man00.jpg",
"../img/man01.jpg",
"../img/man02.jpg",
"../img/man03.jpg",
"../img/man04.jpg",
"../img/man05.jpg",
"../img/man06.jpg",
];
//定时器序号
let counter = null;
//点击开始
function gameStart() {
//开始按钮禁用
$("#btnStart").prop("disabled",true);
//停止按钮可用
$("#btnStop").prop("disabled",false);
//定义计数变量
let num = 0;
//使用定时器实现小图框快速切换图片
counter = setInterval(function () {
//通过取余，循环得到数组得到索引
let index = num%imgs.length;
//修改小图框中img的src即可
$("#smallPhoto").attr("src",imgs[index]);
//计数变量自增
num++;
},20);
}
//点击结束
function gameOver() {
//禁用结束按钮
$("#btnStop").prop("disabled",true);
//取消开始按钮的禁用
$("#btnStart").prop("disabled",false);
//停止小图框的抽奖(停止定时器)
clearInterval(counter);
//将计算变量重置为0
num = 0;
//获取小图框图片地址
let imgUrl = $("#smallPhoto").attr("src");
//将抽奖结果显示在大图框中，并隐藏起来
$("#bigPhoto").attr("src",imgUrl).hide();
//将图片进行淡出
$("#bigPhoto").fadeIn(2000);
}
</script>
</body>
</html>
示例素材：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。
用jQuery实现抽奖程序
- Author -
Regino声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@