大家在很多活动页面上都看到绚丽多彩的抽奖运用，网上也有比较多关于这方面的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. bzoj 1085 [SCOI2005]骑士精神——IDA*

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1085 迭代加深搜索. 估价函数是为了预计步数来剪枝,所以要优于实际步数. 没错,不是为了确定 ...

  2. hbase官方文档(转)

    FROM:http://www.just4e.com/hbase.html Apache HBase™ 参考指南  HBase 官方文档中文版 Copyright © 2012 Apache Soft ...

  3. selenium 看有啥api 的文件(文件用编辑器 or 浏览器打开就可以看到有什么 api)

  4. （转）Docker - 创建 Docker overlay network (containers 通信)

    原文链接: http://www.cnblogs.com/AlanWalkOn/p/6101875.html --- 创建基于Key-Value的Docker overlay network. 这样运 ...

  5. linux lcd设备驱动剖析四

    在"linux lcd设备驱动剖析二"文章中,我们详细分析了s3c24xxfb_probe函数. 文章链接:http://blog.csdn.net/lwj103862095/ar ...

  6. AOP（面向切面编程，翻译自MSDN）

    目录 AOP的概念 静态实现AOP .Net 框架实现AOP(动态代理实现AOP) 动态代理AOP实现方法过滤 AOP参考 本文翻译自 :https://msdn.microsoft.com/en-u ...

  7. 线程--demo3

    示例1:SwingAndThread package com.etc.jichu; import java.awt.Container; import java.net.URL; import jav ...

  8. NAS网络存储

    NAS(Network Attached Storage)网络存储基于标准网络协议实现数据传输,为网络中的Windows / Linux / Mac OS 等各种不同操作系统的计算机提供文件共享和数据 ...

  9. selenium -文件上传的实现 -对于含有input element的上传

    使用selenium做自动化时,我们经常会遇到的一个让人头疼的问题就是文件上传. 问题的难点在于selenium无法识别并操作Windows窗口,若我们可以绕过弹出框直接把文件信息上传给选择按钮,难点 ...

  10. 【Dubbo学习】

    dubbo的介绍 dubbo是一个分布式的开源框架,其核心部分如下: 1.服务提供者:provider 2.服务消费者:consumer 3.注册中心:registry (仅仅只是负责通知) 服务者在 ...