jQuery随机抽奖
js 定时器
setInterval()
setInterval() :按照指定的周期(以毫秒计)来调用函数或计算表达式。方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。
setInterval(code,millisec,lang)
参数说明:
- code: 必需。要调用的函数或要执行的代码串。
- millisec: 必须。周期性执行或调用 code 之间的时间间隔,以毫秒计。
- lang: 可选。 JScript | VBScript | JavaScript
setTimeout()
setTimeout() :在指定的毫秒数后调用函数或计算表达式。
setTimeout(code,millisec,lang)
参数说明:
- code:必需。要调用的函数后要执行的 JavaScript 代码串。
- millisec:必需。在执行代码前需等待的毫秒数。
- lang:可选。脚本语言可以是:JScript | VBScript | JavaScript
清除定时器
由于定时器在调用时,都会返回一个整形的数字,该数字代表定时器的序号,即第多少个定时器,所以定时器的清除要借助于这个返回的数字。
定时器清除的方法:clearTimeout(obj) 和 clearInterval(obj)。
要清除定时器,就必须在用定时器的时候,定义一个变量来记录定时器的返回值。如下:
//setTimeout 1000ms后执行1次
var test1 = setTimeout(function(){
//your codes
},1000);
//setInterval 每隔1000ms执行一次
var test2 = setInterval(function(){
//your codes
},1000)
//清除Timeout的定时器,传入变量名(创建Timeout定时器时定义的变量名)
clearTimeout(test1);
//清除Interval的定时器,传入变量名(创建Interval定时器时定义的变量名)
clearInterval(test2);
静态页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>抽奖效果-界面搭建</title>
<style>
* {padding: 0;margin: 0;list-style: none;}
.box {width: 300px;height: 300px;margin: 100px auto;border: 1px solid orange;}
.goods li {width: 100px;height: 100px;float: left;box-sizing: border-box;}
.goods li img {width: 100px;height: 100px;}
.current {border: 1px solid orange;}
#begin img{
border-radius: 50%;
}
</style>
</head>
<body>
<div class="box">
<ul class="goods">
<li><img src=""></li>
<li class="current"><img src=""></li>
<li><img src=""></li>
<li><img src=""></li>
<li id="begin"><img src=""></li>
<li><img src=""></li>
<li><img src=""></li>
<li><img src=""></li>
<li><img src=""></li>
</ul>
</div>
</body>
</html>
页面效果:
页面展示
$(function () {
// 0. 数据源
var goodsNames = ['耳机', '平板电脑', '感谢参与', '平板鞋', 'begin', '特步', '玩偶','ipone手机', '安卓手机'];
var goodsImages = [];
for(var i = 1;i < 10;i++){
goodsImages.push('images/' + i + '.png');
}
// console.log(goodsImages)
//2.页面展示
$('.goods>li>img').each(function (index,value) {
$(this).attr('src',goodsImages[index]);
});
});
界面效果:
按钮点击
// 0. 数据源
var goodsNames = ['耳机', '平板电脑', '感谢参与', '平板鞋', 'begin', '特步', '玩偶',
'ipone手机', '安卓手机'];
var goodsImages = [];
for(var i = 1;i < 10;i++){
goodsImages.push('images/' + i + '.png');
}
// console.log(goodsImages)
//2.页面展示
$('.goods>li>img').each(function (index,value) {
$(this).attr('src',goodsImages[index]);
});
//3. 监听按钮的点击
var timer = null; // 要清除定时器,就必须在用定时器的时候,定义一个变量来记录定时器的返回值
var showIndex = 0,currentGunIndex = 0;
$('#begin').click(function () {
//3.1 清除定时器
clearInterval(timer)
//3.2 控制滚动的圈数
var count = Math.floor(Math.random() * 8) + 8;
console.log(count);
//3.3 指定滚动的路径
var showIndexs = [0, 1, 2, 5, 8, 7 , 6, 3];
//3.4 根据路径进行滚动
timer = setInterval(function () {
//3.5 判断清楚定时器的条件
if(count <= 0){
// 判断是否中奖
if(showIndex === 2){
alert('运气不是太好,加油喔!');
}else {
alert('恭喜中奖,奖品是:' + goodsNames[showIndex])
}
// 清除定时器
clearInterval(timer);
return;
}
//3.6 条件处理
count--;
// 滚动循环 1,2,3,4,5,6,7,0,1,2
currentGunIndex = (currentGunIndex + 1) % showIndexs.length;
console.log(currentGunIndex);
// 根据滚动的下标,找到当前盒子的下标
showIndex = showIndexs[currentGunIndex];
//3.7 让当前的盒子被选中
$('.goods>li').eq(showIndex).addClass('current').siblings().removeClass('current');
//3.8 控制启动按钮的旋转
$('#begin').css({
transform:'rotate('+ (currentGunIndex-1)*45 +'deg)'
});
}, 200);
});
运行效果:点击中间开始抽奖,然后箭头开始旋转,并且方框跟着动,旋转2圈以内,最终停在某个格子,如果中奖则显示中奖,如果是感谢参与则提示未中奖。