200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > 扭蛋机html源码 jQuery动画扭蛋机抽奖代码

扭蛋机html源码 jQuery动画扭蛋机抽奖代码

时间:2022-08-01 21:36:04

相关推荐

扭蛋机html源码 jQuery动画扭蛋机抽奖代码

特效描述:jQuery动画 扭蛋机抽奖。jQuery动画扭蛋机抽奖代码

代码结构

1. 引入CSS

2. 引入JS

3. HTML代码

100/次10000

>

恭喜你!

获得一等奖!

恭喜你!

获得二等奖!

恭喜你!

获得三等奖!

咦?没有抽中?

对不起,积分不足!

$(document).ready(function(e) {

//一等奖 关闭

$("#jianpin_one em img").click(function(){

$("#jianpin_one").hide();

}

);

//二等奖 关闭

$("#jianpin_two em img").click(function(){

$("#jianpin_two").hide();

}

);

//三等奖 关闭

$("#jianpin_three em img").click(function(){

$("#jianpin_three").hide();

}

);

//没有中奖 关闭

$("#jianpin_kong em img").click(function(){

$("#jianpin_kong").hide();

}

);

//积分不足 关闭

$("#no_jifeng em img").click(function(){

$("#no_jifeng").hide();

}

);

var score=470;

$(".wdjifen").html(score);

$(".game_go").click(function(){

score-=100;

if(score<0){

for(i=1;i<=11;i++){

$(".qiu_"+i).removeClass("wieyi_"+i);

}

$("#no_jifeng").show();

}else{

draw()

}

});

function draw(){

var number =Math.floor(4*Math.random()+1);

for(i=1;i<=11;i++){

$(".qiu_"+i).removeClass("diaol_"+i);

$(".qiu_"+i).addClass("wieyi_"+i);

};

setTimeout(function (){

for(i=1;i<=11;i++){

$(".qiu_"+i).removeClass("wieyi_"+i);

}

},1100);

setTimeout(function(){

switch(number){

case 1:$(".zjdl").children("span").addClass("diaL_one");break;

case 2:$(".zjdl").children("span").addClass("diaL_two");break;

case 3:$(".zjdl").children("span").addClass("diaL_three");break;

case 4:$(".zjdl").children("span").addClass("diaL_four");break;

}

$(".zjdl").removeClass("none").addClass("dila_Y");

setTimeout(function (){

switch(number){

case 1:$("#jianpin_one").show();break;

case 2:$("#jianpin_two").show();break;

case 3:$("#jianpin_three").show();break;

case 4:$("#jianpin_kong").show();break;

}

},900);

},1100)

//取消动画

setTimeout(function (){

$(".zjdl").addClass("none").removeClass("dila_Y");

$(".wdjifen").html(score);

$(".zjdl").children("span").removeAttr('class');

},2500)

}

});

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。