抽奖小程序

最新推荐文章于 2023-10-02 23:21:07 发布

青天诀

最新推荐文章于 2023-10-02 23:21:07 发布

阅读量2.5k

点赞数

分类专栏： Web前端文章标签： Web前端 jquery

Web前端专栏收录该内容

123 篇文章 1 订阅

订阅专栏

年底了为了备战年会抽奖，特此写了抽奖的小程序，主要思路：点击抽奖，程序已经选中界面中的某一项，在选中此项之前要做类似于转盘的操作，在转动几圈后逐渐把焦点放到终点处。因此会用到定时器，要做到缓冲由快到慢，要不停地把定时器间隔时间拉长，从而实现了慢慢接近目标的效果。这个程序中用到了随机数设置转几圈，随机选中哪一个元素的算法，大家以后可以在自己的程序中应用。

<!DOCTYPE html>
<html>

        <head>
                <meta charset="utf-8">
                <title>抽奖</title>
                <style type="text/css">
                        * {
                                margin: 0;
                                padding: 0;
                                box-sizing: border-box;
                        }
                        ul {
                                width: 630px;
                                list-style: none;
                                margin: 10px auto;
                        }
                        li {
                                text-align: center;
                                width: 200px;
                                height: 200px;
                                line-height: 200px;
                                margin: 0 10px 10px 0;
                                border: 1px solid red;
                                float: left;
                        }
                        li.active {
                                font-size: 50px;
                                color: #FFFF00;
                                background: red;
                                opacity: 0.5;
                        }
                        #div1 {
                                width: 100px;
                                height: 30px;
                                position: fixed;
                                right: 0;
                                top: 50%;
                        }
                        #btn1 {
                                font-size: 20px;
                                padding: 0 20px;
                                height: 40px;
                        }
                </style>
        </head>

        <body>
                <ul>
                        <li class="jiang">一等奖</li>
                        <li>无</li>
                        <li class="jiang">二等奖</li>
                        <li>无</li>
                        <li class="jiang">三等奖</li>
                        <li>无</li>
                        <li class="jiang">四等奖</li>
                        <li>无</li>
                        <li class="jiang">五等奖</li>
                </ul>
                <div id="div1">
                        <input type="button" id="btn1" value="抽奖" />
                </div>
                <script src="../js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
                <script type="text/javascript">
                         //定时器
                        var timer = null;
                                
                        $('#btn1').click(function() {
                                //按顺序为每一个li追加active样式
                                //速度由快到慢，最终确定是否中奖，如果$('.active')元素有jiang样式，则说明中奖，否则没中奖
                                //获得某个整数范围内随机选择一个值。值=Math.floor(Math.random()*可能值的个数+第一个可能的值)
                                //num指终止li索引
                                //circle指转的圈数1-3圈

                                var $li = $('li'),
                                        l = $li.length,
                                        i = $('.active').length==0?0:$('.active').index(),
                                        spaceTime = 50,
                                        circle = Math.floor(Math.random() * 3 + 1),
                                        num = Math.floor(Math.random() * l + 0);

                                if (timer) {
                                        clearTimeout(timer);
                                }

                                timer = setTimeout(addCls, spaceTime);

                                function addCls() {
                                        var end = circle * l + num,
                                                speed = Math.ceil((end - i) / 5);

                                        if (i == end) {
                                                clearTimeout(timer);
                                                
                                                if($('.active').hasClass('jiang')){
                                                        alert('恭喜你获得'+$('.active').text());
                                                }else{
                                                        alert('别灰心，还有机会！');
                                                }
                                        } else {
                                                spaceTime=(10-speed)*60;
                                                timer = setTimeout(addCls, spaceTime);
                                                
                                                $li.eq(i % l).addClass('active').siblings().removeClass('active');
                                                i++;                                                
                                        }
                                        
                                        console.log('end='+end+',i='+i);
                                }
                        });
                </script>
        </body>

</html>

青天诀

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
抽奖小程序

年底了为了备战年会抽奖，特此写了抽奖的小程序，主要思路：点击抽奖，程序已经选中界面中的某一项，在选中此项之前要做类似于转盘的操作，在转动几圈后逐渐把焦点放到终点处。因此会用到定时器，要做到缓冲由快到慢，要不停地把定时器间隔时间拉长，从而实现了慢慢接近目标的效果。这个程序中用到了随机数设置转几圈，随机选中哪一个元素的算法，大家以后可以在自己的程序中应用。
复制链接

扫一扫