大家在很多活动页面上都看到绚丽多彩的抽奖运用，网上也有比较多关于这方面的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. FastAdmin 在线命令生成时出错的分析

    FastAdmin 在线命令生成时出错的分析 出错现象 版本环境 FastAdmin 版本:1.0.0.20180806_beta 在线命令插件版本:1.0.3 分析 2018-08-13 16:12 ...

  2. 关于 webpack-dev-server 热更新出现重复的问题

    关于 webpack-dev-server 热更新出现重复的问题 webpack-dev-server 在前端开发时很方便,可以热更新,只需要配置 webpack.config.js 即可. 但是昨天 ...

  3. bzoj 4881 [Lydsy1705月赛]线段游戏

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4881 1.当一块相互交织的线段中有3个或以上两两相交的那种线段时,无解. 这就是最长下降子序 ...

  4. 字符串（二）（PHP）

    1.大段文本在PHP中应该如果表示? 答: <?php $str = <<<aaa hello word; fjasdflj fjslad aaa;date_sub() aaa ...

  5. 校赛热身 Problem B. Matrix Fast Power

    找循环节,肯定在40项以内,不会证明. #include <iostream> #include <cstring> #include <string> #incl ...

  6. IntelliJ IDEA中如何设置忽略@param注释中的参数与方法中的参数列表不一致的检查

  7. 屏蔽sql server 2008的智能提示

    1. 去掉这个勾 2. 如果你安装了Sql complete, 接着下面的

  8. Dynamics CRM 2011 Web Service

    Data Services:   SOAP Endpoint REST Endpoint Capabilities Assign Records Retrieve Metadata Execute M ...

  9. SQL Server专题

    SQL Server 2005/2008 一.连接异常 在C#代码中调用Open()方法打开数据库连接时(账户为sa),出现异常:异常信息如下: 在与 SQL Server 建立连接时出现与网络相关的 ...

  10. Linux系统SCSI磁盘扫描机制解析及命令实例(转)

    转载请在文首保留原文出处:EMC中文支持论坛 介绍 Linux系统扫描SCSI磁盘有几种方式?Linux新增LUN之后,能否不重启主机就认出设备?如果安装了PowerPath,动态添加/删除LUN的命 ...