这篇博客,教你怎么用JQuery框架实现抽奖送老婆功能哈哈哈!开个玩笑,就是简单的抽奖功能
代码如下:
<!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'>
/*
分析:
1. 给开始按钮绑定单击事件
1.1 定义循环定时器
1.2 切换小相框的src属性
* 定义数组,存放图片资源路径
* 生成随机数。数组索引
2. 给结束按钮绑定单击事件
1.1 停止定时器
1.2 给大相框设置src属性
*/
var imgs = ["../img/man00.jpg",
"../img/man01.jpg",
"../img/man02.jpg",
"../img/man03.jpg",
"../img/man04.jpg",
"../img/man05.jpg",
"../img/man06.jpg",
];
var starId;
var index;
$(function () {
//处理按钮是否可以使用的效果
$("#startID").prop("disabled",false);
$("#stopID").prop("disabled",true);
//1、给开始按钮绑定单击事件
$("#startID").click(function () {
//1.1定义循环定时器 20毫秒执行一次
starId = setInterval(function () {
//处理按钮是否可以使用的效果
$("#startID").prop("disabled",true);
$("#stopID").prop("disabled",false);
//1.2生成随机角标0-6
//0.000--0.999 --> * 7 --> 0.0-----6.9999
index = Math.floor(Math.random() * 7);
//1.3设置小相框的src属性
$("#img1ID").prop("src",imgs[index]);
},20);
});
//2、给结束按钮绑定单击事件
$("#stopID").click(function () {
//处理按钮是否可以使用的效果
$("#startID").prop("disabled",false);
$("#stopID").prop("disabled",true);
//1.1 停止定时器
clearInterval(starId);
//1.2 给大相框设置src属性
$("#img2ID").prop("src",imgs[index]).hide();
//1.3 显示一秒后
$("#img2ID").show(1000);
});
});
</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">
<!-- 停止按钮 -->
<input
id="stopID"
type="button"
value="点击停止"
style="width:150px;height:150px;font-size:22px">
</body>
</html>
目录结构:
运行结果:
- 没开始抽奖前:
- 点击开始抽奖后,小框框开始快速运转,这里看不出效果
- 点击停止按钮后,大方框显示
由于是动画效果,所以图片可能看不太出效果,那么就靠你想象了!