大家在很多活动页面上都看到绚丽多彩的抽奖运用，网上也有比较多关于这方面的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. javax.servlet-api-xx.jar和servlet-api.jar区别

    一.简介支持servlet的jar包.应该叫servlet-api.jar如果编写过servlet就知道要用到HttpServletRequest和HttpServletResponse等对象,这些对 ...

  2. mybatis参数

    分是不是用@Param注解的这两种情况, 1,使用@Param注解,就不用理parameterType xml文档直接用 字符串的值,若是一个类,class.property 2, 不使用@Param ...

  3. 【转】使用Jmeter测试Webservice简单示例

    1.webservice 先简单开发webservice,参考文档 http://www.cnblogs.com/xwdreamer/archive/2011/12/07/2296914.html w ...

  4. ITextSharp使用说明 （转）

    原文: http://www.cnblogs.com/LifelongLearning/archive/2010/12/28/1919138.html TextSharp是一个生成Pdf文件的开源项目 ...

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

  6. Py修行路 python基础 （十五）面向对象编程 继承 组合 接口和抽象类

    一.前提回忆: 1.类是用来描述某一类的事物,类的对象就是这一类事物中的一个个体.是事物就要有属性,属性分为 1:数据属性:就是变量 2:函数属性:就是函数,在面向对象里通常称为方法 注意:类和对象均 ...

  7. Py修行路 python基础 （二十二）异常处理

    异常处理 一.错误和异常 程序中难免出现错误,而错误分为两种:语言异常和逻辑异常 1.语法错误(这种错误,根本过不了python解释器的语法检测,必须在程序执行前就改正) for i in range ...

  8. 为什么要初始化css样式

    因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异. 初始化CSS样式主要是提高编码质量,如果不初始化整个页面做完很糟糕,重复的CSS样 ...

  9. java成神之——HttpURLConnection访问api

    HttpURLConnection 访问get资源 访问post资源 访问Delete资源 获取状态码 结语 HttpURLConnection 访问get资源 HttpURLConnection c ...

  10. 服务器实现处理GET和POST

    import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.Inp ...