JQuery CSS3 登录页 实现 获得焦点之后 提示文字上浮的动画效果
点击抽奖
$btn.click(function () {
if (bool) {//若未按下
bool = false;
if (data.count > 0) {//若还有次数
data.count--;
$change.html(data.count);
clickFn();
} else {
alert("您剩余抽奖次数为0,不能抽奖~");
}
}
});
点击旋转
function clickFn() {
clearInterval(timer);//点击抽奖时清除定时器
var random = [1, 2, 3, 4, 5, 6, 7, 8];//抽奖概率
//data为随机出来的结果,根据概率后的结果
random = random[Math.floor(Math.random() * random.length)];//1-8的随机数
mark += random;
mark %= 8;
//控制概率,永远抽不中谢谢参与
if (mark === 3) {//抽中第一个谢谢参与则向前一位
random++;
mark++;
}
if (mark === 6) {//抽中第二个谢谢参与则向后一位
random--;
mark--;
}
//默认先转4圈
random += 32;//圈数 * 奖品总数
//调用旋转动画
for (var i = 1; i <= random; i++) {
setTimeout(animate(), 2 * i * i);//第二个值越大,慢速旋转时间越长
}
//停止旋转动画
setTimeout(function () {
console.log("中了" + mark);
setTimeout(function () {
bool = true;
win();
}, 1000);
}, 2 * random * random);
}
动画效果
function animate() {
return function () {
$blin.toggleClass("blin");//彩灯动画
//九宫格动画
length++;
length %= 8;
$prize.eq(length - 1).removeClass("select");
$prize.eq(length).addClass("select");
}
}
在线预览:http://www.jquery66.com/demos/js/j20194102/index.html
下载地址:https://u18725144.ctfile.com/fs/18725144-357933582
转载于:https://blog.51cto.com/14168515/2372453