【案例分享】制作一個(gè)九宮格抽獎(jiǎng)

標(biāo)簽：

Html/CSS Html5 JavaScript

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="tips" content="为了以后方便，把常用的小效果制作整理，如有问题或者更好的方法，请告知！谢谢！！！！">
<meta name="tips" content="朋友单位需求，随手做了一个，细想想还有许多细节没有处理，比如中奖机率啥的。。有时间在补充">
<title>九宫格抽奖</title>
<style>
*{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;}
</style>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
// 测试引用是否成功
$(document).ready(function(e) {
  alert('test!');
});
</script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(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);
    }

});
</script>
</head>
<body>
<div class="box">
    <dl>
        <dd class="a1">1111</dd>
        <dd class="a2">2222</dd>
        <dd class="a3">3333</dd>
        <dd class="a4">444</dd>
        <dd class="a5">555</dd>
        <dd class="a6">666</dd>
        <dd class="a7">777</dd>
        <dd class="a8">888</dd>
    </dl>
    <div class="start">开始</div>
</div>
</body>

點(diǎn)擊查看更多內(nèi)容