master

分支 (1)

管理

管理

master

js--jquery-special-effects
/
JS抽奖.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS抽奖</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    #prize {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 100px;
        display: block;
        width: 320px;
        height: 40px;
        background-color: rgb(255, 255, 255);
        border-radius: 2px;
        box-shadow: rgba(0, 0, 0, 0.3) 0 0 3px 2px;
        letter-spacing: 2px;
        text-align: center;
        line-height: 40px;
    }

    div {
        width: 330px;
        height: 330px;
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%, 50%);
    }

    div>span {
        float: left;
        width: 100px;
        height: 100px;
        margin: 5px;
        background: rgb(22, 186, 236);
        color: white;
        text-align: center;
        line-height: 100px;

    }

    div>span:nth-of-type(4) {
        position: relative;
        left: 220px;
    }

    div>span:nth-of-type(5) {
        position: relative;
        left: 110px;
        top: 110px;
    }

    div>span:nth-of-type(6) {
        position: relative;
        left: -110px;
        top: 110px;
    }

    div>span:nth-of-type(8) {
        position: relative;
        left: -110px;
        top: -110px;
    }

    div>span:nth-of-type(9) {
        cursor: pointer;
        background: rgb(255, 148, 61);
        position: relative;
        left: -110px;
        top: -110px;
    }

    div .active {
        background: rgb(78, 78, 78);
    }
</style>

<body>
    <p id='prize'></p>
    <div>
        <span class="active">手机</span>
        <span>平板</span>
        <span>电磁炉</span>
        <span>洗衣机</span>
        <span>衣柜</span>
        <span>冰箱</span>
        <span>电脑</span>
        <span>电视</span>
        <span>开始</span>
    </div>
</body>
<script>
    //点击开始执行点击事件，不能使用onclick直接绑定，后续需要控制点击事件的开启关闭
    //DOM的初始化
    //先转3圈，然后生成随机数作为中奖结果

    //获取DOM元素
    var prize = document.getElementById("prize");
    var spanList = document.querySelectorAll("span");

    //点击事件
    function start() {
        // 初始化
        // 清空上一次结果
        spanList.forEach(function (el, index) {
            if (index != 0) {
                el.classList.remove('active');
            }
        })
        //清除p标签中的内容
        prize.innerHTML = "";
        //将开始按钮设置为不可点击状态
        spanList[8].disabled = true;
        //移除点击事件
        spanList[8].onclick = null;
        // 一圈8个元素 先体验3圈(24)后，在随机生成一个中奖下标 随便给一个范围：16
        let times = parseInt(Math.random() * 16 + 24);
        let time = 0;     //当前的旋转次数
        let speed = 100;  //转盘速度
        let num = -1;     //奖品序号

        var T = setInterval(autoplay, speed)
        //循环体函数（改变span的背景颜色）
        function autoplay() {
            time++;
            num++;
            //判断当前下标所在位置
            if (num > 7) //最后一个和第一个衔接的位置
            {
                num = 0;
                spanList[0].classList.add('active');
                spanList[7].classList.remove('active');
            } else if (num == 0) //第一次开始
            {
                spanList[num].classList.add('active');
                spanList[7].classList.remove('active');
            } else //其他位置
            {
                spanList[num].classList.add('active');
                spanList[num - 1].classList.remove('active');
            }
            // 快到结束的前5次之后开始逐渐减慢
            if (times - time < 5) {
                clearInterval(T)
                speed += 50
                T = setInterval(autoplay, speed)
            }

            //旋转完毕
            if (time > times) {
                spanList[8].disabled = false;
                spanList[8].style.cursor = "pointer";
                clearInterval(T);
                prize.innerText = `恭喜您抽中了${spanList[num].innerText}!!!`
            }
        }
    }
    spanList[8].onclick = start;
</script>

</html>