一个有关抽奖的专题项目

2015春节来了之后，就开始投入到忙碌的工作中，最近做了一个有关抽奖专题的项目，第一次整抽奖的相关前端方面的需求。
当用户点击抽奖的时候，我们首先需要判断用户是否登录，如果没有登录，提示用户登录，然后再进行抽奖；抽奖的时候，我们需要判断用户是否有抽奖的权限，如果抽奖次数已用完或者用户没抽奖的权限，需要对用户提示；当点击抽奖，用户选中了虚拟的奖品时候，我们需要根据弹窗提示，让用户进入后台看相关的奖品；如果用户选中了实物，我们需要提示用户输入相关的联系地址，提交后台等，
抽奖功能的实现主要引用了jQuery 的rotate插件，实现转盘旋转功能。
主要的相关的js`
var $window =$(window),
prizeBox =$(‘div.prizeBox’), startTxt =$(‘.startTxt’,prizeBox),
rotate1 = $(“#rotate”,prizeBox),
result_list = [‘Ipad’, ‘跑步机’, ‘马克杯’, ‘相机’, ‘豆浆机’, ‘金币50个’,’小米手机’, ‘商务记事本’];
startTxt.on(“click”, function() { //给转盘按钮的文字点击时候触发按钮的点击事件
rotate1.trigger(“click”);
});
rotate1.on(‘click’, function(e) {

    e.preventDefault();
    e.stopPropagation();
    var login = $(‘a.login‘),
        logout = $(‘a.logout‘),
        url = startTxt.data(‘url‘), //获取发送请假地址
         _html = $(‘script.diaf‘).html();  //获取几个提示弹窗的html
    $.get(url, function(resp) {

        var _data = $.parseJSON(resp),
            t = _data.t || ‘‘;

        if(t == -1) {   //用户未登录时候，登录弹窗
            dialog.open(_html);
            $(‘div.diaLogin‘).removeClass(‘disnone‘).siblings(‘div‘).hide();
        } else if(t == -2) {  //用户抽奖次数用完或者没抽奖权限提示弹窗
            dialog.open(_html);
            $(‘div.noPrize‘).removeClass(‘disnone‘).siblings(‘div‘).hide();
        } else if(_data.p) {   //转盘旋转
            var _rotate = 45*_data.p - 10 - Math.round(Math.random()*25);
            rotate1.rotate({
                duration :5000,
                angle : 0,
                animateTo : 3600 + _rotate,//Math.round(Math.random()*360)+360,
                callback : function() {
                    dialog.open(_html);
                    if(t == 2){   //获得虚拟奖品时候
                        $(‘#hasPrize1‘).removeClass(‘disnone‘).siblings(‘div‘).hide();
                        $(‘#prizeTxt1‘).text(result_list[_data.p-1]);
                    } else if(t==1){  //获得实物奖品
                        var hasPrize2 = $(‘#hasPrize2‘)
                        hasPrize2.removeClass(‘disnone‘).siblings(‘div‘).hide();
                        $(‘#prizeTxt2‘).text(result_list[_data.p-1]); //获取的奖品名字
                        var btn = hasPrize2.find(‘.diaLoginBtn3‘);

                        btn.on(‘click‘,function(e){ //添加相应的收获地址信息弹窗
                            e.preventDefault();
                            var  diaFormBox = $(‘.diaFormBox ‘);
                            diaFormBox.removeClass(‘disnone‘).show().siblings(‘div‘).hide();
                            $(‘#orderid‘).val(_data.id);
                            var area3 = new Area({
                                target: ‘.area3‘,
                                itemName: [‘请选择省份‘, ‘请选择城市‘, ‘请选择县/区‘],
                                items: [‘province‘, ‘city‘, ‘area‘],
                                callback: function(field, allFields) {
                                    field.trigger(‘validate‘);
                                }
                            });
                            try{
                                area3.fields[0].name = ‘provinceid‘;
                                area3.fields[1].name = ‘cityid‘;
                                area3.fields[2].name = ‘areaid‘;
                            } catch (e){

                            }
                            $("#form").validator({
                                stopOnError: true,
                                focusCleanup: true,
                                timely: 1,
                                showOk:false,
                                // 密码验证
                                fields: {
                                    ‘tel‘: {
                                        rule: ‘required‘,
                                        tip: ‘‘,
                                        ok: ‘‘,
                                        msg: {
                                            required: ‘联系电话不能为空‘
                                        }
                                    },
                                    ‘address‘:{
                                        rule: ‘required;length[2~30]‘,
                                        msg: {
                                            required: ‘地址不能为空‘,
                                            length:‘请填写2-30汉字或者字符‘

                                        }
                                    },
                                    ‘contact‘:{
                                        rule: ‘required;length[2~20]‘,
                                        msg: {
                                            required: ‘联系人不能为空‘,
                                            lenght:‘请填写2-20汉字或者字符‘

                                        }
                                    },
                                    ‘areaid‘:{
                                        rule: ‘required‘,
                                        ok:‘‘,
                                        msg: {
                                            required: ‘请选择区域 ‘

                                        }
                                    }
                                },

                                // 验证完毕
                                valid: function(form) {

                                    var _form = $(form);
                                    var _data = _form.serializeArray();
                                    var _url = _form.attr(‘action‘)
                                    $.post(_url, _data, function(res) {
                                        var _res = $.parseJSON(res);
                                        if(_res.t == 1) {
                                            $(‘#hasPrize3‘).removeClass(‘disnone‘).show().siblings(‘div‘).hide();
                                        }

                                    })
                                }
                            });
                        })

                    } else{
                        alert(‘网络异常，请稍后再试!‘);
                    }



                }
            });
        }

    });


});

/*
*下面功能主要是动态的显示已获得奖品的名单
*/
var prizeNCon = $(‘div.prizeNCon’, prizeBox), ownlist_ul =$(‘ul’, prizeNCon);
prizeNCon.on(‘mouseleave’, function() {
var timer = setInterval(function() {
ownlist_ul.animate({
marginTop: “-30px”
}, 500, function() {
ownlist_ul.append(ownlist_ul.find(‘li:first’));
ownlist_ul.css(‘marginTop’,0);
});
}, 2500);
ownlist_ul.data(‘timer’, timer);
}).mouseleave();
ownlist_ul.on(‘mouseenter’, function() {
var timer = ownlist_ul.data(‘timer’);
timer && clearInterval(timer);
});

当压缩发布代码的时候，在ie中测试的发现了一些兼容性问题，主要是判断ie版本js,跟rotate不兼容，解决办法是用
var IE = (function(){
var match = /(msie) ([\w.]+)/i.exec(navigator.userAgent);
return match&&match[1] ? parseInt(match[2]):0;
})()
把原来rotate插件里面的内容换成了这段代码，ie就兼容可用了