大家在很多活动页面上都看到绚丽多彩的抽奖运用，网上也有比较多关于这方面的js和用as。今天我在工作的时候也要做个抽奖的运用。我之前没有写过这类的js，也不会as，就得屁颠屁颠的问度娘啦，虽然找到有js写的也有用框架做的，研究了下，觉得忒复杂。突然想到之前公司有个简单实现的抽奖js。就要拿过来看看，结合自己的需求封装成一个类。

html代码如下：

<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

    ul{list-style:none;}

    li{display:inline-block; border:1px solid #000;}

    span{display:inline-block; padding:10px 15px;}

    li .lottery_yeah{background:red;}

    </style>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>

</head>

<body>

    <input type="button" id="btn" value="button" />

    <ul id="la" class="lottery_all">

        <li><span eid="0" class="lottery_box">1</span></li>

        <li><span eid="1" class="lottery_box">2</span></li>

        <li><span eid="2" class="lottery_box">3</span></li>

        <li><span eid="3" class="lottery_box">4</span></li>

        <li><span eid="4" class="lottery_box">5</span></li>

        <li><span eid="5" class="lottery_box">6</span></li>

        <li><span eid="6" class="lottery_box">7</span></li>

        <li><span eid="7" class="lottery_box">8</span></li>

        <li><span eid="8" class="lottery_box">9</span></li>

    </ul>

    <script type="text/javascript" src="cj.js"></script>

</body>

</html>

js代码如下：

/*

* 抽奖封装对象

* @class LuckyDraw

* @param { Number } 抽奖悬停号码

* @method LuckyDraw.tigerMac

* @param { Number, Function } 运动步伐间距，回调函数

*

*/

function LuckyDraw( numId ) {

    if ( this instanceof LuckyDraw ) {

        this.rewardId = numId;

        this.timer = null;

    } else {

        return new LuckyDraw( numId );

    }

}

LuckyDraw.prototype.tigerMac = function( iStep, callback ) {

    var speed = 200 / iStep, // 时间间隔

        $luckyItem = $('#la .lottery_box'),

        len = $luckyItem.length,

        index = 0, // 索引值

        _this = this;

    $luckyItem.removeClass('lottery_yeah').eq( index ).addClass('lottery_yeah');

    this.timer = setInterval(function () {

        if ( index + 1 > len ) {

            index = 0;

            iStep++;

            clearInterval( _this.timer );

            _this.tigerMac( iStep, callback );

        } else {

            if ( iStep >= 6 ) {

                if ( _this.rewardId && $luckyItem.eq( index ).attr('eid') == _this.rewardId ) {

                    $luckyItem.eq( index ).addClass('lottery_yeah');

                    clearInterval( _this.timer );

                    if ( callback && typeof callback === 'function' ) {

                        callback.call( $luckyItem[index] );

                    }

                    return

                }

            }

            index++;

        }

        $luckyItem.removeClass('lottery_yeah').eq(index).addClass('lottery_yeah');

    }, speed)

};

// 抽奖

$('#btn').click(

    (function(){

        var n = 3,

            aLuckyNum = [2, 5, 8],

            oCj = null;

        return function() {

            if ( n ) {

                oCj = new LuckyDraw( aLuckyNum[n - 1] );

                n--;

                oCj.tigerMac( 1, function(){

                    if ( Number( $(this).text() ) === 6 ) {

                        alert('恭喜中奖啦！你还有' + n + '次抽奖机会哦！');

                    } else if ( n ) {

                        alert('^ @ ^ 没中奖，加油！你还有' + n + '次抽奖机会哦！');

                    } else {

                        alert('^ @ ^ 没中奖！谢谢参与');

                    }

                } );

                oCj = null;

            }else {

                alert('你没有抽奖机会啦');

            }

        }

    })()

);

以上就是整个js抽奖的代码，至于抽奖布局的话，大家就看着处理吧。大家看到有更好的实现方法，欢迎留言或者联系我，一起学习！

js 简单抽奖实现的更多相关文章

  1. JS简单实现：根据奖品权重计算中奖概率实现抽奖的方法

    本文主要介绍:使用 JS 根据奖品权重计算中奖概率实现抽奖的方法. 一.示例场景 1.1.设置抽奖活动的奖项名称 奖项名称:["一等奖", "二等奖", &qu ...

  2. js简单 图片版时钟，带翻转效果

    js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  3. js简单操作Cookie

    贴一段js简单操作Cookie的代码: //获取指定名称的cookie的值 function getCookie(objName) { var arrStr = document.cookie.spl ...

  4. js简单弹出层、遮罩层

    <html> <head> <title>js简单弹出层</title> <style> /*阴影边框效果*/ .box-shadow-1 ...

  5. Tourist.js – 简单灵活的操作指南和导航插件

    Tourist.js 是一个基于 Backbone 和 jQuery 开发的轻量库,帮助你在应用程序创建简单易用的操作指南和导航功能.相比网站,它更适合用于复杂的,单页网站类型的应用程序.Touris ...

  6. js简单显示和隐藏div，触发超链接，动态更改button值，setInterval（）简单使用，jquery easyui弹出框简单使用 .

    js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"& ...

  7. Gulp.js - 简单、直观的自动化项目构建工具

    Gulp.js 是一个简单.直观的构建系统.崇尚代码优于配置,使复杂的任务更好管理.通过结合 NodeJS 的数据流的能力,你能够快速构建.通过简单的 API 接口,只需几步就能搭建起自己的自动化项目 ...

  8. Node.js简单介绍并实现一个简单的Web MVC框架

    编号:1018时间:2016年6月13日16:06:41功能:Node.js简单介绍并实现一个简单的Web MVC框架URL :https://cnodejs.org/topic/4f16442cca ...

  9. JS简单入门教程

    JS简单教程 使用方法:放到任意html页面的head标签下 Test1方法弹出当前时间对话框 Test2方法for循环输出 Test3方法for(…in…)输出数组内容 <script typ ...

随机推荐

  1. 在actionbar中加入item的方法

    首先在menu文件夹中创建post.xml <?xml version="1.0" encoding="utf-8"?> <menu xmln ...

  2. HTTP-头域

    头域 每个头域由一个域名,冒号(:)和域值三部分组成.域名是大小写无关的,域值前可以添加任何数量的空格符,头域可以被扩展为多行,在每行开始处,使用至少一个空格或制表符. HTTP请求消息 HTTP状态 ...

  3. 利用全局变量$_SESSION和register_shutdown_function自定义会话处理

    register_shutdown_function 可以注册一个自定义的函数,在程序运行结束之前 执行. 在做ecshop的二次开发过程中,虽然代码 太老太乱太冗余,但ec的会话处理的设计感觉还是不 ...

  4. 工具软件集合 Adobe AE PS Pr CC 2018 2019 破解教程

    来源https://mp.weixin.qq.com/s/zeq1sTmaPsKt7Bsok0Ldrg(若链接失效,请关注软件安装管家公众号) 相关链接 Office 2019破解教程 Adobe 2 ...

  5. 环境搭建：Vue环境搭建和项目初始化（ubuntu）

    1.    安装node.js(版本6.10.3) 首先确保系统安装来gcc,g++,如果没有则安装: $ sudo apt-get update $ sudo apt-get install gcc ...

  6. win10系统怎么关闭自动更新

    现在win10已经很普遍了,对于win10 现在还不是很完美,比如自动更新功能,现在的选项中没有关闭自动更新的选项了,这是一个bug,微软要强制更新.我就忍受不了自动更新,会拉取网络,影响我们的上网体 ...

  7. Wireshark捕获非加密的数据包

    启动监听模式 root@sch01ar:~# airmon-ng start wlan0 启动Wireshark工具 root@sch01ar:~# wireshark 选择接口,这里选择wlan0m ...

  8. 查询cad库中，所有程序leg引用的点的id，需要预先处理点表和程序表

    select f1.pro_id,f1.pro_type, f1.code_fix_point, f1.code_type_fix_point, f1.code_fir,f2.code_icao,nv ...

  9. Linux quota命令参数及用法详解---Linux磁盘配额限制设置和查看命令

    功能说明:显示磁盘已使用的空间与限制. 语 法:quota [-quvV][用户名称...] 或 quota [-gqvV][群组名称...] 补充说明:执行quota指令,可查询磁盘空间的限制,并得 ...

  10. day3心得

    1. 集合 主要作用: 去重 关系测试, 交集＼差集＼并集＼反向(对称)差集 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 >>&g ...