<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>抽奖小程序</title>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script language=‘javascript‘ type=‘text/javascript‘>
//准备一个一维数组,装用户的像片路径
var imgs = [
"../img/scenery/1.jpg", "../img/scenery/2.jpg", "../img/scenery/3.jpg",
"../img/scenery/4.jpg", "../img/scenery/5.jpg", "../img/scenery/6.jpg",
"../img/scenery/7.jpg", "../img/scenery/8.jpg", "../img/scenery/9.jpg",
"../img/scenery/10.jpg", "../img/scenery/11.jpg", "../img/scenery/12.jpg",
"../img/scenery/13.jpg", "../img/scenery/14.jpg", "../img/scenery/15.jpg",
"../img/scenery/16.jpg", "../img/scenery/17.jpg", "../img/scenery/18.jpg",
"../img/scenery/19.jpg", "../img/scenery/20.jpg", "../img/scenery/21.jpg",
];
/*
需求分析:
页面加载成功后,"点击停止"按钮失效
给"点击开始"和"点击停止"按钮派发单击事件
当"点击开始"按钮被点击时:
"点击开始"按钮失效,"点击停止"按钮生效
小图开始随机轮播
当"点击停止"按钮被点击时:
"点击开始"按钮生效,"点击停止"按钮失效
小图停止轮播
2秒后将选中的小图展示到大图区域
技术分析:
页面加载事件: $(function(){});
单击事件: click()
操作属性:
jq对象.attr("disabled",true);
定时器:
周期执行定时器:
// 每隔多少毫秒调用一次对应的函数
var interId = setInterval(函数名称,毫秒值);
// 清除周期执行定时器
clearInterval(interId);
单次执行定时器:
setTimeout(函数名称,毫秒值); // 多少毫秒后调用此函数
*/
$(function () {
//当页面加载成功后,点击停止按钮失效
$("#stopID").attr("disabled", true);
});
function imgStart() {
//点击开始按钮之后,停止按钮生效
$("#stopID").attr("disabled", false);
$("#startID").attr("disabled", true);
//小图开始轮播
//这种方式虽然能实现,但比较low而且随机性差
/*var i = 0;
//轮播图开始轮播
var interId = setInterval(function () {
$("#img1ID").attr("src",imgs[i]);
i++;
if (i == imgs.length) {
i = 0
}
}, 15);*/
//js中定义变量如果不写var,那么此变量为全局变量
interId = setInterval(function () {
//随机生成0到20之间的随机数
i = Math.round(Math.random() * 100)%21;
$("#img1ID").attr("src",imgs[i]);
}, 15);
}
function imgStop() {
$("#stopID").attr("disabled", true);
$("#startID").attr("disabled", false);
//清除定时器
clearInterval(interId);
//1秒后将小图展示到大图区域
setTimeout(function () {
$("#img2ID").attr("src",imgs[i]);
},500);
}
</script>
</head>
<body>
<!-- 小像框 -->
<div style="border-style:dotted;width:50px;height:50px">
<img id="img1ID" src="" style="width:50px;height:50px"/>
</div>
<!-- 大像框 -->
<div style="border-style:double;width:700px;height:500px;position:absolute;left:500px;top:10px">
<img id="img2ID" src="" style="width:700px;height:500px"/>
</div>
<!-- 开始按钮 -->
<input onclick="imgStart()" id="startID" type="button" value="点击开始"
style="width:150px;height:150px;font-size:22px">
<!-- 停止按钮 -->
<input onclick="imgStop()" id="stopID" type="button" value="点击停止"
style="width:150px;height:150px;font-size:22px">
</body>
</html>
jQuery案例 : 抽奖小程序