js抽奖案例

简单的抽奖案例,效果已实现,但还存在很多的不足之处,新人初写代码,望大家指点

html代码:

<button id="start">开始</button>
    <button id="stop1">停止</button>
    <div class="warp">
    </div>

css代码:

        * {
            margin: 0;
            padding: 0;
        }

        .warp {
            width: 600px;
            height: 600px;
            margin: 10px auto;
            position: relative;
        }

        .warp div {
            width: 198px;
            height: 198px;
            background-color: pink;
            border: 1px solid red;
            text-align: center;
            position: absolute;
            line-height: 200px;

        }

        .warp .active {
            background-color: orange;
            color: white;
        }

        button {
            margin-left: 480px;
            width: 50px;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }

js代码:

 var goodsList = ["苹果13", "mac", "小米手环", "阿迪达斯", "梦龙雪糕", "谢谢惠顾", "笔记本", "对象"]
        var list = ["谢谢惠顾", "谢谢惠顾", "谢谢惠顾", "谢谢惠顾", "谢谢惠顾", "谢谢惠顾", "谢谢惠顾", "苹果13"]

        var warp = document.querySelector(".warp")
        warp.innerHTML = ''
        for (var i = 0; i < goodsList.length; i++) {
            warp.innerHTML += '<div>' + goodsList[i] + '</div>'
        }
        var items = warp.children
        items[1].style.left = "200px"
        items[2].style.left = "400px"
        items[3].style.left = "400px"
        items[3].style.top = "200px"
        items[4].style.top = "400px"
        items[4].style.left = "400px"
        items[5].style.top = "400px"
        items[5].style.left = "200px"
        items[6].style.top = "400px"
        items[7].style.top = "200px"


        var flag = true
        var t = 200 
        var x = 0
        var randomGood;

        function random(a, b) {
            return Math.floor(Math.random() * (b - a + 1)) + a
        }

        function f() {
            items[x].className = ""
            x++
            if (x > 7) {
                x = 0
            }
            items[x].className = "active"
            if (flag) {
                t -= 20
                if (t <= 30) {
                    t = 30
                }
            } else {
                t += 30
                if (t >= 500) {
                    t = 500
                    if (items[x].innerHTML === randomGood) {
                        console.log("恭喜你获取:" + randomGood);
                        flag = true
                        return
                    }
                }

            }


            setTimeout(f, t)
        }

        start.onclick = function () {
            if (flag) {
                randomGood = list[random(0, list.length - 1)]
                f()
            }
            this.disabled = true
            stop1.disabled = false
        }

        stop1.onclick = function () {
            flag = false
            start.disabled = false
            this.disabled = true
        }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值