js框架jquery实现灯光圆盘抽奖程序活动特效

浅浅的花香味﹌ 2022-08-23 00:41 184阅读 0赞

原文：[js框架jquery实现灯光圆盘抽奖程序活动特效][js_jquery]

源代码下载地址：[http://www.zuidaima.com/share/1796540618558464.htm][js_jquery]

**看见抽奖圆盘是不是会想是怎么实现的呢？下面就让我们来看看。**

效果图如下：![20140426123309427.jpg][]

文件引用：

<script>
    
    //登录插件
    
    (function($){
    
        $.fn.login = function(options){
    
            settings = {
    
                    loginUrl: 'account/login/',
    
                    msgEle: $(this).find('.msg'),
    
                    loginIdEle: $(this).find('#loginId'),
    
                    passwordEle: $(this).find('#password')
    
            };
    
            var ERROR_MSG = {
    
                'inputCorrectEmail': '请输入正确的用户名',
    
                'inputPassword': '请填写登录密码',
    
                'passwordLength': '密码应在6-32位字符内',
    
                'noreg': '此账号未注册',
    
                'checkemailcode_2':'此账号未注册',
    
                'checkemailcode_':'服务器繁忙，请稍后再试',
    
                'accountNotMatch': '账号密码不匹配',
    
                'serverdown': '服务器维护中',
    
                'clientUserBaned': '您的账号被限制登录',
    
                'accUserInvalid': '正在对该账号进行绑定处理，暂无法登陆',
    
                'userLocked': '帐号锁定中，暂时无法登录',
    
                'inviladId': '帐号不存在'
    
            }
    
            function submit() {
    
                var loginId = $.trim(settings.loginIdEle.val()),
    
                password = $.trim(settings.passwordEle.val());
    
                if(loginId == '') {
    
                    showMsg('登录名不能为空');
    
                    return;
    
                }
    
                if(password == '') {
    
                    showMsg('密码不能为空');
    
                    return;
    
                }
    
                $.post(settings.loginUrl, {'loginId': loginId, 'password': password}, function(data){
    
                    if(data.status == 'ok') {
    
                        location.reload();
    
                    } else {
    
                        if(typeof ERROR_MSG[data.status] == 'string') {
    
                            showMsg(ERROR_MSG[data.status]);
    
                        } else {
    
                            showMsg('服务器维护中');
    
                        }
    
                    }
    
                }, 'json');
    
            }
    
            function showMsg(msg) {
    
                settings.msgEle.html(msg);
    
            }
    
            if(typeof options == 'string'){
    
                switch(options) {
    
                    case 'submit':
    
                        submit();
    
                        break;
    
                    default:
    
                }       
    
            }
    
            return $(this);
    
        }
    
    })(jQuery);
    
    $('#lotteryMsg').dialog({
    
        modal: true,
    
        width: 500,
    
        height: 350,
    
        resizable: false,
    
        title: '获奖信息',
    
        autoOpen: false,
    
        open: function(){
    
                var showMsg = '您抽中了： ' + turnplate.lotteryList[turnplate.lotteryIndex] /*+ ' (来自:' + turnplate.lotteryChannel + ')'*/;
    
                var options = '今天抽中了' + turnplate.lotteryList[turnplate.lotteryIndex] + '，' + turnplate.lotteryDes[turnplate.lotteryIndex];
    
                $('#lotteryMsg').find('.msg').html(showMsg);
    
                $('#lotteryMsg').find('.option').html(options);
    
        },
    
        buttons: [{
    
            text:'发微博领5M空间',
    
            click: function() {
    
                var options = '今天抽中了' + turnplate.lotteryList[turnplate.lotteryIndex] + '，' + turnplate.lotteryDes[turnplate.lotteryIndex];
    
                var jumpUrl = "http://www.xwcms.net";
    
                window.open(jumpUrl, "top", "width=1024,height=750,menubar=0,scrollbars=1, resizable=1,status=1,titlebar=0,toolbar=0,location=1");
    
                $(this).dialog('close');
    
            }
    
        }]
    
    });
    
    $('#login').dialog({
    
        modal: true,
    
        width: 350,
    
        resizable: false,
    
        title: '请先登录',
    
        autoOpen: false,
    
        open: function(){
    
            //监听回车事件
    
            $('#login').bind('keydown', function(e){
    
                if(e.which == '13'){
    
                    $('#login').login('submit');
    
                }
    
            });
    
        },
    
        close: function(){
    
            //取消监听
    
            $('#login').unbind('keydown');
    
            $('#login #password').val('');
    
        },
    
        buttons:[{
    
            text: '登录',
    
            click: function(){
    
                $('#login').login('submit');
    
            }
    
        }]
    
    });
    
    turnplate.init();
    
    </script>

欢迎下载哦。。

原文地址：[http://www.xwcms.net/js/qttx/95945.html][http_www.xwcms.net_js_qttx_95945.html]

[js_jquery]: http://www.zuidaima.com/share/1796540618558464.htm
[20140426123309427.jpg]: http://static.zuidaima.com/images/15153/201404/20140426123309427.jpg
[http_www.xwcms.net_js_qttx_95945.html]: http://www.xwcms.net/js/qttx/95945.html

发表评论取消回复

表情：

评论列表（有 0 条评论，184人围观）

还没有评论，来说两句吧...

相关阅读

相关做抽奖活动_如何利用小程序玩转抽奖活动？

![ac13aee126ae69da63c3264f1073c278.png][] 抽奖作为一种古老的运营套路，一直活跃在营销最前沿。无论是线下门店促销，还是线上活动，抽奖被

深藏阁楼爱情的钟/ 2022年11月19日 11:19/ 0 赞/ 193 阅读

相关 php 抽奖活动_PHP实现活动人选抽奖功能

本文介绍情景为活动人选抽奖，通过简单随机抽取指定人数，依次列举被抽中的人名。示例代码如下：活动人选 $lotterPeopleArr = array(); $num =

淡淡的烟草味﹌/ 2022年11月12日 05:23/ 0 赞/ 194 阅读

相关幸运大转盘-jQuery+PHP实现的抽奖程序

在线抽奖程序在很多网站上得到应用，抽奖形式多种多样，本站之前有专门介绍常见的[翻板抽奖][Link 1]和[随机抽奖][Link 2]的文章，本文将给大家介绍转盘抽奖，通过转动

╰半夏微凉°/ 2022年08月23日 12:56/ 0 赞/ 279 阅读

相关 js框架jquery实现灯光圆盘抽奖程序活动特效

原文：[js框架jquery实现灯光圆盘抽奖程序活动特效][js_jquery] 源代码下载地址：[http://www.zuidaima.com/share/1796540

浅浅的花香味﹌/ 2022年08月23日 00:41/ 0 赞/ 185 阅读

相关 js框架jquery实现幸运大转盘抽奖程序代码,兼容多种浏览器

看到网页上有不少大转盘抽奖的[应用][Link 1],心血来潮也想弄个.于是找了点资料自己研究了下 queryRotate 这个插件就可以实现这个功能 jqueryRo

淡淡的烟草味﹌/ 2022年08月07日 04:39/ 0 赞/ 263 阅读

相关 js随机抽奖程序

直接黏贴代码 <html> <title>随机抽奖程序</title> <head><meta http-equiv=Content-Type content="text/h

短命女/ 2022年08月04日 14:44/ 0 赞/ 192 阅读

相关 js框架jquery实现幸运大转盘抽奖程序代码,兼容多种浏览器

原文：[js框架jquery实现幸运大转盘抽奖程序代码,兼容多种浏览器][js_jquery] 源代码下载地址：[http://www.zuidaima.com/share/

阳光穿透心脏的1/2处/ 2022年07月29日 11:44/ 0 赞/ 207 阅读

相关 h5大转盘，圆盘抽奖，正方形抽奖

h5大转盘，圆盘抽奖，正方形抽奖等是我们搞活动的时候用的很多的需求，那么如何才能拥有一个好的插件的。以下我来介绍一款：原生 JavaScript 抽奖组件，支持移动端适配，无框

蔚落/ 2022年06月08日 11:08/ 0 赞/ 209 阅读

相关 php抽奖活动

首页控制器 public function actionIndex() { $lottery = LotteryGoods::mode

╰+攻爆jí腚メ/ 2022年06月07日 02:12/ 0 赞/ 179 阅读

相关 python 活动随机抽奖小程序简单直白

开始学习python相关知识，看最近有不少随机抽奖小程序，自己也做一个试试思路： 1. 建立一个抽奖人名单，可以打乱后直接按顺序取，也可以不打乱随机抽。 2. 建立

Dear 丶/ 2022年03月24日 16:40/ 0 赞/ 862 阅读