JS 实现随机抽奖小游戏

表白：黑白圣堂血天使，天剑鬼刀阿修罗。
讲解对象：/JS 实现随机抽奖小游戏
作者：融水公子 rsgz
===
JavaScript 9999案例

JS 实现随机抽奖小游戏

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div {
            width: 627px;
            height: 210px;
        }
        img {
            float: left;
            border: 1px solid black;
            margin-right: 5px;
            margin-top: 5px;
        }
        #img4 {
            float: right;
        }
        img {
            height: 200px;
            width: 200px;
        }
        button {
            position: absolute;
            top: 300px;
            left: 270px;
            width: 80px;
            height: 40px;
        }
    </style>
</head>
<body>
<div>
    <img src="img/1.png" id="img1"/>
    <img src="img/2.png" id="img2"/>
    <img src="img/3.png" id="img3"/>
</div>
<div>
    <img src="img/8.png" id="img8"/>
    <img src="img/4.png" id="img4"/>
</div>
<div>
    <img src="img/7.png" id="img7"/>
    <img src="img/6.png" id="img6"/>
    <img src="img/5.png" id="img5"/>
</div>
<button onclick="start()">启动</button>
<script type="text/javascript" src="js/jquery-1.12.3.min.js">
</script>
<script type="text/javascript">
    function start() {
        // 获取一段范围的随机整数
        getRandomInt=(min, max)=>{return Math.floor(Math.random() * (max - min + 1)) + min;}
        var count = getRandomInt(6,12)
        var i=0
        // 每间隔100毫秒 跳动一下
        var loop = setInterval(function () {
            var id = i%8+1  // 1-8
            if(i<count){
                $('#img' + String(id)).css('background', 'red');
                $('#img' + String(id-1)).css('background', 'white');
                if(id==1){$('#img' + String(8)).css('background', 'white');}
                i++;
            }else{
                if(id==1){id=9}
                $('#img' + String(id-1)).css('background', 'white');
                alert(getName(id-1));
                clearInterval(loop);
            }
        }, 100);
    }
    var getName=(id)=>{return ["梦幻","迷你龙","超梦","索罗亚","宝贝龙","铁哑铃","拉鲁拉丝","利欧路"][id-1]}
</script>
</body>
</html>

这是目录结构

界面效果：

===

公众号：不浪仙人

谢谢大家的支持！可以点击我的头像，进入我的空间浏览更多文章呢。建议大家360doc[www.360doc.com]注册一个账号登录，里面真的有很多优秀的文章，欢迎大家的到来。
---

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。