jQuery实现简单抽奖大转盘

上效果！！！
初始页面效果
点击开始后效果
上代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抽奖</title>
    <script src="../js/jquery.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
         .box{
            margin: 50px auto;
            width: 430px;
            text-align: center;
         }
         .box input{
            margin-top: 30px;
            margin-bottom: 30px;
            width: 400px;
            height: 48px;
            border: 2px solid skyblue;
            color:red;
            font-size: 16px;
            font-weight: 700;
         }
         .box ul{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
         }
         .box ul li{
            margin-right: 20px;
            margin-bottom: 20px;
            width: 120px;
            height: 120px;
            background-image: linear-gradient(to bottom right, rgb(155, 236, 242), rgb(168, 242, 138));
            text-align: center;
            line-height: 120px;
            box-shadow: 4px 4px 5px rgb(225, 125, 200);
            font-size: 20px;
            text-shadow: 2px 2px 3px rgb(236, 87, 7);
         }
         .box ul li:nth-child(3n){
            margin-right: 0;
         }
         .box .start{
            background-image: linear-gradient(to bottom right, rgb(9, 216, 231), rgb(75, 238, 10));
         }
         .active{
            background-image: linear-gradient(to bottom right, red, yellow)!important;
         }
    </style>
</head>
<body>
    <div class="box">
        <h1>抽奖大转盘</h1>
        <input type="text"><br>
        <ul>
            <li class="li1 ">冰箱</li>
            <li class="li2">餐具</li>
            <li class="li3">抽纸</li>
            <li class="li8">电饼档</li>
            <li class="start">开始</li>
            <li class="li4">微波炉</li>
            <li class="li7">玩偶</li>
            <li class="li6">茶杯</li>
            <li class="li5">夏凉被</li>
        </ul>
    </div>
    <script>
        // 产生随机数函数
         function getRandom(N,M){
            return Math.floor(Math.random()*(M-N+1))+N
         }
        // 设置变量
        // sums 总转动次数
        let sums = getRandom(10,20);
        // sum 转动次数
        let sum = 0;
        // i 控制哪个li改变颜色的变量
        let i = 0;
        // 给开始li添加点击事件
        $('.box .start').click(function(){
            // 设置定时器
            let time = setInterval(function(){
                sum++;
                i++;
                // 取消有active属性的li的该属性
               $('.active').removeClass('active');
               //  给转动到的li添加active属性
               $(`.li${i}`).addClass('active');
              //    当li转动到第八个，重新转动
               if(i == 8){
                 i = 0
               }
               if(sum > sums){
                // 清除定时器
                   clearInterval(time);    
                //    渲染input
                   $('.box input').val(`  恭喜你抽中:${$('.active').text()}！！！`)
                 }
               },200) 
        })
    </script>
</body>
</html>
注意：
当用clearInterval（）清除定时器的时候一定要放在setInterval（）里面呀，否则清除不掉啊~~~
jQuery实现简单抽奖大转盘

初始页面效果

点击开始后效果

上代码

猜你喜欢
