2015春节来了之后，就开始投入到忙碌的工作中，最近做了一个有关抽奖专题的项目，第一次整抽奖的相关前端方面的需求。 当用户点击抽奖的时候，我们首先需要判断用户是否登录，如果没有登录，，提示用户登录，然后再进行抽奖；抽奖的时候，我们需要判断用户是否有抽奖的权限，如果抽奖次数已用完或者用户没抽奖的权限，需要对用户提示；当点击抽奖，用户选中了虚拟的奖品时候，我们需要根据弹窗提示，让用户进入后台看相关的奖品；如果用户选中了实物，我们需要提示用户输入相关的联系地址，提交后台等， 抽奖功能的实现主要引用了jQuery 的rotate插件，实现转盘旋转功能。 主要的相关的js` var (window), prizeBox =(‘.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 = (‘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就兼容可用了
看着它或是汹涌或是平静，然而一直相随，不离不弃。
