大家在很多活动页面上都看到绚丽多彩的抽奖运用，网上也有比较多关于这方面的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. Oracle相关数据库操作

    1.进入oracle后台操作 su - oracle 2.数据库备份的指定位置 Oracle用sys用户登录查询数据库 select * from dba_directories a where a. ...

  2. Ｄelphi 连接　Paradox

    应用TDataBase控件把DataBase的DriveName设为STANDARD,然后设置DataBase的Params中设置PATH=*.db文件地点目录DEFAULT DRIVER=PARAD ...

  3. Java-Maven-Runoob：Maven 项目模板

    ylbtech-Java-Maven-Runoob:Maven 项目模板 1.返回顶部 1. Maven 项目模板 Maven 使用 archetype(原型) 来创建自定义的项目结构,形成 Mave ...

  4. python开发mysql:单表查询&多表查询

    一 单表查询,以下是表内容 一 having 过滤 1.1 having和where select * from emp where id > 15; 解析过程;from > where ...

  5. WCF服务端返回：（413） Request Entity Too Large

    出现这个原因我们应该都能猜测到,文件传出过大,超出了WCF默认范围,那么我们需要进行修改. 服务端和客户端都需要修改. 第一.客户端: <system.serviceModel> < ...

  6. PHP文件操作(二)-文件的读取

    1.fread()    //读取打开的文件 fread(file,length) file:必选项,规定要读取的打开的文件 length:必选项,规定要读取的最大字节数. <?php $fil ...

  7. MapReduce文件切分个数计算方法

    转自:http://www.crazyant.net/1423.html Hadoop的MapReduce计算的第一个阶段是InputFormat处理的,先将文件进行切分,然后将每个切分传递给每个Ma ...

  8. linux下的定时或计时操作（gettimeofday等的用法，秒，微妙，纳秒(转载）

    一.用select()函数实现非阻塞时的等待时间,用到结构体struct timeval {},这里就不多说了. 二.用gettimeofday()可获得微妙级(0.000001秒)的系统时间,调用两 ...

  9. Ubuntu16.04安装之后的几个设置

    Ubuntu16.04安装之后的几个设置 Ubuntu16.04界面很漂亮,但是安装之后,需要做如下几个简单的设置,这样用的时候会更加顺畅. 1.中文支持 在右上角有一个齿轮,点击->Syste ...

  10. scala中存在的问题

    2017-12-27 scala学习中存在的问题: 1.表达式的概念要搞清楚 2.八种基本数据类型要搞清楚 Byte\Short\Int\Long\Char\Boolean\Double\Float都 ...