抽奖小案例(js抽奖概率+css3旋转动画)

最新推荐文章于 2025-05-18 11:36:21 发布

原创最新推荐文章于 2025-05-18 11:36:21 发布 · 6.8k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #概率抽奖

本文介绍了一个简单的抽奖界面动画实现方案，使用HTML、CSS和JavaScript来创建动态抽奖效果。通过设置不同的旋转角度，可以实现抽中不同奖项的效果。该方案利用Zepto.js库简化DOM操作，并通过setTimeout延迟执行来模拟抽奖过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

进入界面后2s开始旋转抽奖,3s后停止,效果图：

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./dist/js/zepto.min.js"></script>
    <style>
        section {
            position: relative;
            width: 100%;
        }
        .one {
            width: 100%;
        }
        .two {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
           
        }
        /* 通过添加类名的方式来旋转 */
        .two.jl200 {
            /* 转35deg就抽到200元,让它转十圈+3600deg */
            transform: rotate(3635deg);
            transition: all 3s;
        }
        .two.jl100 {
            transform: rotate(3683deg);
            transition: all 3s;
        }
        .two.jl50 {
            transform: rotate(3745deg);
            transition: all 3s;
        }
        .two.jl20 {
            transform: rotate(3818deg);
            transition: all 3s;
        }
        .two.jl10 {
            transform: rotate(3904deg);
            transition: all 3s;
        }
        .two.jl500 {
            transform: rotate(3600deg);
            transition: all 3s;
        }

    </style>
    <script>
        $(function () {
            // 生成一个随机数1~100
            var num = Math.floor(Math.random() * 100);
            // 定义一个字符串,也就是要添加的类名
             var str = '';
            //  计算概率
             if (num <= 50) {
                //  num<=50表示有50%的概率抽到10元
                 str = 'jl10'
             }else if (num < 71 ) {
                //  num->51~70,概率为20%
                 str = 'jl20'
             } else if (num < 86) {
                 str = 'jl50'
             }else if (num < 95) {
                 str = 'jl100'
             } else if (num < 99) {
                 str = 'jl200'
             }else if(num <= 100){
                 str = 'jl500'
             }
             setTimeout(function () {
                //  页面加载2s后.添加类名,开始抽奖
                $('.two').addClass(str);
               },2000)
          })
    
    </script>
</head>
<body>
    <section>
        <img class="one" src="./img/01.png" alt="">
        <img class="two" src="./img/02.png" alt="">
    </section>        
</body>
</html>