java 9宫格抽奖_【案例分享】制作一个九宫格抽奖

九宫格抽奖

*{padding:0;margin:0;}

.box{width:300px;height:300px;margin:100px auto;border:5px solid blue;position:relative;}

dl{}

dl dd{width:100px;height:100px;position:absolute;text-align:center;line-height:100px;border:1px solid #ddd;}

.start{width:100px;height:100px;position:absolute;top:100px;left:100px;background:red;color:#fff;cursor:pointer;font-weight:bold;text-align:center;line-height:100px;}

.start:hover{background:#f60;}

.a1{top:0;left:0;}

.a2{top:0px;left:100px;}

.a3{top:0px;left:200px;}

.a4{top:100px;left:200px;}

.a5{top:200px;left:200px;}

.a6{top:200px;left:100px;}

.a7{top:200px;left:0;}

.a8{top:100px;left:0;}

.on{width:90px;height:90px;border:5px solid #f60;}

// 测试引用是否成功

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

alert('test!');

});

$(document).ready(function(){

var count=0;

$(".start").on("click",function(){

if($(".start").hasClass("aa"))

{

$(".start").removeClass("aa");

$(".start").html("开始");

clearInterval(timer);

}else{

$(".start").addClass("aa");

$(".start").html("暂停");

tC();

}

});

function tC(){

timer=setInterval(function(){

$("dd").each(function(){

$(this).removeClass("on");

});

$("dd").eq(count).addClass("on");

count++;

if(count==8){

count=0;

}

},500);

}

});

1111

2222

3333

444

555

666

777

888

开始