【回忆1314】抽奖之大富翁

直接看效果点这里

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title> 大富翁 </title>
    <style>
        ul {list-style: none; }
        .lottery { position: relative; width: 184px; height: 184px; line-height: 58px; text-align: center; overflow: hidden; margin: 0 auto; }
        .lottery li, .lottery .btn { position: absolute; width: 60px; height: 60px; border: 1px #ccc solid; z-index: 1; }
        .lottery .item-1 { top: 0; left: 0; }
        .lottery .item-2 { top: 0; left: 61px; }
        .lottery .item-3 { top: 0; left: 122px; }
        .lottery .item-4 { top: 61px; left: 122px; }
        .lottery .item-5 { top: 122px; left: 122px; }
        .lottery .item-6 { top: 122px; left: 61px; }
        .lottery .item-7 { top: 122px; left: 0; }
        .lottery .item-8 { top: 61px; left: 0; }
        .lottery .active { border-color: red; z-index: 2; }
        .lottery .btn { width: 62px; height: 62px; top: 61px; left: 61px; background-color: transparent; cursor: pointer; }
    </style>
</head>
<body>

    <div class="lottery">
        <ul class="list">
            <li class="item-1 active">1</li>
            <li class="item-2">2</li>
            <li class="item-3">3</li>
            <li class="item-4">4</li>
            <li class="item-5">5</li>
            <li class="item-6">6</li>
            <li class="item-7">7</li>
            <li class="item-8">8</li>
        </ul>
        <button class="btn">抽奖</button>
    </div>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <script>
        // 假设iEnd是请求获得的奖品结果
        var iEnd = -1;

        $(‘.btn‘).on(‘click‘, function(){

            var $this = $(this);

            // 这个setTimeout是假设的请求
            setTimeout(function(){
                iEnd = Math.floor(Math.random() * 8);
                console.log(iEnd);
            }, 3000);

            // 禁用
            $this.attr(‘disabled‘, ‘disabled‘);

            draw($(‘.lottery‘), function(){

                // 第一个奖品是0哦~
                alert(‘您中到了奖品号下标是:‘+ iEnd + ‘,奖品数字是:‘+ (iEnd + 1));

                // 恢复按钮
                $this.removeAttr(‘disabled‘);
            });

        });

        // 开始转动
        function draw(oMain, fn){
            var timer = null,
                iNow = oMain.find(‘.active‘).index(),
                len = oMain.find(‘li‘).length,
                circle = 5, // 至少要转几圈
                iSpeed = 300,
                count = 0, // 转了多少次
                iLast = len; // 最后一次转圈圈

                (function run(){

                    // 前3个加速
                    if(count > 2){ iSpeed = 100; }

                    // 后3个减速
                    if(iLast < 2){ iSpeed = 300; }

                    iNow++;
                    count++;

                    if(iNow >= len){ iNow = 0; circle--; }
                    oMain.find(‘li‘).removeClass(‘active‘).eq(iNow).addClass(‘active‘);

                    timer = setTimeout(run, iSpeed);

                    // 得到结果
                    if(iEnd !== -1 && circle <= 0 && iNow == iEnd){

                        // 为了最后一圈减速,再跑一圈
                        iLast--;
                        if(iLast == 0){
                            clearTimeout(timer);
                            fn();
                        }
                    }
                })();
        }
    </script>
</body>
</html>
时间: 2024-11-08 06:34:49

【回忆1314】抽奖之大富翁的相关文章

【回忆1314】抽奖之手机大转盘

直接看效果点这里 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" /> <

【回忆1314】抽奖之Flash大转盘

1.搭建JS与Flash互通的环境 function thisMovie(movieName){ if (window.document[movieName]) { return window.document[movieName]; } if (navigator.appName.indexOf("Microsoft Internet")==-1) { if (document.embeds && document.embeds[movieName]) return

【回忆1314】抽奖之手机刮刮卡

直接看效果点这里(记得模拟手机噢) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, width=device-width,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no" /&g

【回忆1314】回忆之浮窗

直接看效果点这里 HTML <!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset="utf-8"> <title> 浮窗 </title> <style> * { margin: 0; padding: 0; } .staff { width: 1200px; margin: 0 auto; height: 800px; l

【回忆1314】回忆之星星评分

直接看效果点这里 HTML <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title> 星星评分 </title> <link rel="stylesheet" href="star.css"/> </head> <body> <ul

【回忆1314】回忆之日历

直接看效果点这里 HTML <!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset="utf-8"> <title> 简易多栏日历 </title> <link rel="stylesheet" href="calendar.css"> </head> <body>

【回忆1314】回忆之横竖滑动门

直接看效果点这里 HTML <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title> 横竖滑动门 </title> <link rel="stylesheet" href="sliding-door.css"/> </head> <body&g

【回忆1314】回忆之城市搜索

直接看效果点这里 HTML <!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset="utf-8"> <title> 城市搜索 </title> <link rel="stylesheet" href="ui-departure.css"> </head> <body&

【回忆1314】回忆之分页

直接看效果点这里 HTML <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>分页插件</title> <link rel="stylesheet" href="page.min.css"/> </head> <body> <