相信很多人都看过“一战到底”。现在,基于它的答题模式使用jquery写一个类似“一战到底”的中秋猜谜的程序;
功能阐述:
1.每个用户有五次猜谜机会,一次财迷机会中有五组题目(总共25道题目);
2.答题开始,倒计时开始;
3.答题时间到没有答出问题,答案错误机会将减少一次;
4.用户对每道题目可以去掉一个错误答案的权利;
5.在答题时间到或者是答错答案后,可以返回重新猜题;
6.在答对题目后,用户可以选择“拿奖走人”,将累积的奖品发送给用户;
7.特别说明,答错题目或者是时间到,之前的奖品将清空。
具体实现:
html部分:
<div class="sp_body_caimi"> <div class="sp_cnt"> <a class="dl_caimi dl_01 * " href="javascript:void(0);"></a> <a class="dl_caimi dl_02 * " href="javascript:void(0);"></a> <a class="dl_caimi dl_03 * " href="javascript:void(0);"></a> <a class="dl_caimi dl_04 * " href="javascript:void(0);"></a> <a class="dl_caimi dl_05 * " href="javascript:void(0);"></a> <div class="act_des"></div> <div class="act_des_info"> <p>1、活动时间:9月13日—9月22日;</p> <p>2、每个会员每天有5次的答题机会,所获得的优惠券仅限当天使用;</p> <p>3、会员答对奖品将会累积,答错所获得的奖品会全部清空,会员有"去掉错误答案的"福利,敬请谨慎作答;</p> <p>4、会员多次作答所获得的奖品不可累积、不可返现;</p> <p>5、华强北商城拥有法律允许范围内的最终解释权.</p> </div> </div> </div>
js部分:
这里面涉及到的页面登录的js在前面写过了,不再赘述。
http://www.cnblogs.com/huanhuan8808/p/3277754.html
第一步:触发猜谜的事件
//触发猜谜 $('.dl_caimi').click(function(){ var _isLogin = HQB_dialogLogin.____isLogin(); if( !_isLogin ){ /*未登录的操作*/ var __callback = function(){ /*使用弹窗登录后回调的操作*/ _caimi(); }; HQB_dialogLogin.loginAction( 'loginDialogDOM', '__loginDialog', __callback ); }else{ /*已登录操作*/ _caimi(); } });
第二步:处理财迷框中的时间
//猜谜 function _caimi(){ $.ajax({ url:'http://www.okhqb.com/util/guohuoquestions', dataType:'jsonp', type:'GET', jsonpCallback:'callback', success: function(result){ if( result.code == 200 ){ var t = result.data.tags; var pri_cnt; var ans_arr = new Array() ; ans_arr.push( result.data.correct ); ans_arr.push( result.data.wrong1 ); ans_arr.push( result.data.wrong2 ); ans_arr.sort(function(a,b){ return Math.random() > 0.5 ? -1 : 1; }); //当天答题的序号 var num_index = result.num + 1; if( num_index == 6){ num_index = 1; } //当天还剩机会 var numbers = 5 - result.numbers; //当天答对次数 var num = result.num; //奖品 if( num == 0 || num == 5 ){ pri_cnt = "<p>10元优惠券</p>"; }else if( num == 1){ pri_cnt = "<p>20元优惠券</p>"; }else if( num == 2){ pri_cnt = "<p>30元优惠券</p>"; }else if( num == 3){ pri_cnt = "<p>港澳游代金券</p>"; }else if( num == 4){ pri_cnt = "<p>小米2s,华为P6,红米手机,100元购机现金券</p>"; } //弹出答题框 art.dialog({ id : 'dati', title : false, lock: true, padding:'0px 0px', drag: false, content :'<div class="caimi" id="dati" tags=""><div class="dl_left fl" ></div><div class="caimi_box fl" ><div class="caimi_box_wrap"><p class="time_leave">作答时间还剩:<span class="djs_sq" id="djs_sq"></span><span>秒</span></p><p class="pro">' + num_index + '、' + result.data.wenti + '</p>\ <ul class="answers_list cfix" id="answers_list">\ <li><input type="radio" value="29元" name="answer" /><span>' + ans_arr[0] + '</span></li>\ <li><input type="radio" value="49元" name="answer" /><span>' + ans_arr[1] + '</span></li>\ <li><input type="radio" value="69元" name="answer" /><span>' + ans_arr[2] + '</span></li>\ </ul>\ <div class="btn_bg" id="submit_answer">提 交</div>\ <div class="warm_tips"><p>奖品是</p>' + pri_cnt + '</div>\ </div>\ <span class="qf_fl">强粉福利:</span><span id="qc_btn" ></span>\ <div class="xq_zt1 *"></div>\ </div>\ <div class="dl_right fl" ></div>\ </div>' }); //将tags写入 $("#dati").attr("tags",t); //去掉一个错误答案 $("#qc_btn").live( 'click', function(){ $.ajax({ url:'http://www.okhqb.com/util/guohuowrong?t='+t, dataType:'jsonp', type:'GET', jsonpCallback:'callback', success: function(e){ if( e.code == 200 ){ $("#answers_list li span").each(function(i,index){ if( $(index).html() == e.wrong ){ $(index).css({"text-decoration":"line-through"}); $(index).siblings("input").attr("disabled",true); } }); }else if( e.code == 300001 ){ art.dialog({ id : '__tips', title : false, lock: true, padding:'30px 30px', drag: false, content :'参数为空' }); }else if( e.code == 300002 ){ art.dialog({ id : '__tips', title : false, lock: true, padding:'30px 30px', drag: false, content :'去掉错误答案异常' }); } } }); } ); // var timer = 21; //定时器 _interval = setInterval(function(){ timer -= 1; if(timer >0 ){ $("#djs_sq").html(timer); }else if( timer == 0 ){ _closeAllTips(); art.dialog({ id : 'time_over', title : false, lock: true, padding:'0px 0px', drag: false, content :'<div class="caimi caimi_err cfix" id="time_over" >\ <div class="dl_left fl" ></div>\ <div class="caimi_box fl" >\ <div class="caimi_box_wrap cfix">\ <div class="xq_zt2 fl"></div>\ <div class="err_info fl">\ <p><b>很遗憾,时间到了!</b></p>\ <p class="qk_tips">奖品已清空。</p>\ <div class="btn_bg fl" id="go_back_01">重头再来</div><div class="wram_tips_01 fl">今天你还有<span class="tips_color">'+numbers+'次</span>机会</div>\ </div></div></div><div class="dl_right fl" ></div></div>' }); clearInterval( _interval ); } },1000); // }else if( result.code == 300003 ){ art.dialog({ id : '__tips', title : false, lock: true, padding:'30px 30px', drag: false, content :'没有题库' }) }else if( result.code == 300002 ){ art.dialog({ id : '__tips', title : false, lock: true, padding:'30px 30px', drag: false, content :'对不起,您今天的猜谜次数已用完' }) }else if( result.code == 300001 ){ art.dialog({ id : '__tips', title : false, lock: true, padding:'30px 30px', drag: false, content :'未登录' }) } } }); }
第三步,校验答案
/*校验答案*/ function _submitAns(t,s){ $.ajax({ url:'http://www.okhqb.com/util/guohuoanswer?t=' + t + '&s=' + s, dataType:'jsonp', type:'GET', jsonpCallback:'callback', success: function(result){ if( result.code == 200 ){ _closeAllTips(); var num = result.num ; var pri_res; if( num == 1 ){ pri_res = '<p class="jq_tips" >10元优惠券</p>'; }else if( num == 2){ pri_res = '<p class="jq_tips" >10元优惠券</p><p class="jq_tips">20元优惠券</p>'; }else if( num == 3){ pri_res = '<p class="jq_tips" >10元优惠券</p><p class="jq_tips">20元优惠券</p><p class="jq_tips">30元优惠券</p>'; }else if( num == 4){ pri_res = '<p class="jq_tips" >10元优惠券</p><p class="jq_tips">20元优惠券</p><p class="jq_tips">30元优惠券</p><p class="jq_tips" >港澳游代金券</p>'; }else if( num == 5){ pri_res = '<p class="jq_tips" >10元优惠券</p><p class="jq_tips">20元优惠券</p><p class="jq_tips">30元优惠券</p><p class="jq_tips" >港澳游代金券</p><p class="jq_tips">小米2s,华为P6,红米手机,100元购机现金券</p>'; } art.dialog({ id : 'anwser_right', title : false, lock: true, padding:'0px 0px', drag: false, content :'<div class="caimi caimi_err cfix" id="anwser_right" ><div class="dl_left fl" ></div><div class="caimi_box fl" ><div class="caimi_box_wrap cfix">\ <div class="xq_zt3 fl"></div><div class="err_info fl"><p><b>恭喜您,猜对了!</b></p>\ <p style="color:#3A3A3A; font-size:12px; padding:5px 0;">您已获得以下奖品:</p>' + pri_res + '\ <div class="btn_bg fl" id="get_pri" style="margin-bottom:0;">拿奖走人</div>\ <div class="btn_bg fl" id="go_caimi" style="margin-bottom:0;">继续猜谜</div>\ <p class="wram_tips_02 tips_color fl">(猜错奖品将清空哦)</p>\ </div></div></div><div class="dl_right fl" ></div></div>' }); $("#anwser_right").attr("num",num); }else if( result.code == 300004 ){ var numbers = 5 - Number(result.numbers); _closeAllTips(); art.dialog({ id : 'answer_error', title : false, lock: true, padding:'0px 0px', drag: false, content :'<div class="caimi caimi_err cfix" id="answer_error" ><div class="dl_left fl" ></div><div class="caimi_box fl" >\ <div class="caimi_box_wrap cfix">\ <div class="xq_zt2 fl"></div>\ <div class="err_info fl">\ <p><b>很遗憾,猜错了!</b></p>\ <p class="qk_tips">奖品已清空。</p>\ <div class="btn_bg fl" id="go_back_02">重头再来</div><div class="wram_tips_01 fl">今天你还有<span class="tips_color">' + numbers + '次</span>机会</div>\ </div></div></div><div class="dl_right fl" ></div></div>' }); }else if( result.code == 300003 ){ _closeAllTips(); art.dialog({ id : '__tips', title : false, lock: true, padding:'30px 30px', drag: false, content :'今天的投票次数已用完' }); }else if( result.code == 300002 ){ _closeAllTips(); art.dialog({ id : '__tips', title : false, lock: true, padding:'30px 30px', drag: false, content :'未登录' }); }else if( result.code == 300001 ){ _closeAllTips(); art.dialog({ id : '__tips', title : false, lock: true, padding:'30px 30px', drag: false, content :'参数错误' }); } } }); } //触发校验答案 $("#submit_answer").live( 'click', function(){ clearInterval( _interval ); var t = $("#dati").attr("tags"); var s = $("#answers_list li input[name='answer']:checked").siblings("span").text(); _submitAns(t,s); } );
第四步 发送优惠券功能
/*优惠券*/ var getFaceback = function (str, couponIds) { if(str && couponIds){ var $elm = $(str); $elm.css({'cursor':'pointer'}); try { $.ajax({ url : "http://my.okhqb.com/my/getListCoupons.json", data : { 'couponIds' : couponIds }, type : "GET", dataType : 'jsonp', jsonp : 'callback', success : function (data) { /*if(data.code == 200){ art.dialog({ id : '__tips', title : '系统提示', content : '领取成功,优惠券已经发放至您的个人中心', width : '600', height : '400', ok : true }); }else{ art.dialog({ id : '__tips', title : '系统提示', content : data.msg, width : '600', height : '400', ok : true }); }*/ }, error : function (err) { art.dialog({ id : '__error', title : '系统提示', content : '您还未登录,请登录', width : '600', height : '400', ok : true }); } }) } catch (err) {} }else{ return false; } }
第五步:处理 “继续猜谜”,“重头再来”,“拿奖走人”事件
//继续猜谜 $("#go_caimi").live( 'click', function(){ _closeAllTips(); //_caimi(); $.ajax({ url:'http://www.okhqb.com/util/guohuoquestions', dataType:'jsonp', type:'GET', jsonpCallback:'callback', success: function( result ){ if( result.code == 200 ){ var num = result.num ; if( num < 5 ){ _caimi(); }else if( num == 5 ){ _closeAllTips(); getFaceback('#get_pri', '1000000234' + '|' + '1000000235' + '|' + '1000000236' + '|' + '1000000230' ); art.dialog({ id : 'dati', title : false, lock: true, padding:'30px 30px', drag: false, content :'恭喜您,通关了。优惠券已发放至您个人中心,港澳游代金券将在您购物后随订单寄出。' }); } } } }); } ); //拿奖走人 $("#get_pri").live( 'click', function(){ var yh_pri = ''; var num = $("#anwser_right").attr("num"); if( num < 5 ){ clearInterval( _interval ); var t = $("#dati").attr("tags"); var s = 'cuowu'; _restart(t,s); } _closeAllTips(); if( num == 1){ getFaceback('#get_pri', '1000000234'); yh_pri = "当日购物有效。"; }else if( num == 2 ){ getFaceback('#get_pri', '1000000234' + '|' + '1000000235'); yh_pri = "当日购物有效。"; }else if( num == 3 ){ getFaceback('#get_pri', '1000000234' + '|' + '1000000235' + '|' + '1000000236'); yh_pri = "当日购物有效。"; }else if( num == 4 ){ getFaceback('#get_pri', '1000000234' + '|' + '1000000235' + '|' + '1000000236'); yh_pri = "港澳游代金券将在您购物后随订单寄出。"; }else if( num == 5 ){ getFaceback('#get_pri', '1000000234' + '|' + '1000000235' + '|' + '1000000236' + '|' + '1000000230' ); yh_pri = "港澳游代金券将在您购物后随订单寄出。"; } art.dialog({ id : 'go_shopping', title : false, lock: true, padding:'0px 0px', drag: false, content :'<div class="caimi caimi_err cfix" id="go_shopping" >\ <div class="dl_left fl" ></div>\ <div class="caimi_box fl" >\ <div class="caimi_box_wrap cfix">\ <div class="xq_zt3 fl"></div>\ <div class="err_info fl">\ <p><b>温馨提示!</b></p>\ <p class="qk_tips">优惠券已发放至您个人中心,</p>\ <p class="qk_tips">' + yh_pri + '</p>\ <div class="btn_bg" id="go_shop">去购物</div>\ </div>\ </div>\ </div>\ <div class="dl_right fl" ></div>\ </div>' }); } ); //去购物 $("#go_shop").live( 'click', function(){ _closeAllTips(); } );
在处理时间到时的“重头再来”功能时,将会发送一个错误答案给后台,目的是记录用户已使用了一次机会
/*发送错误答案*/ function _restart(t,s){ $.ajax({ url:'http://www.okhqb.com/util/guohuoanswer?t=' + t + '&s=' + s, dataType:'jsonp', type:'GET', jsonpCallback:'callback', success: function(result){ } }); } //重头再来 $("#go_back_02").live( 'click', function(){ /*clearInterval( _interval ); var t = $("#dati").attr("tags"); var s = 'cuowu'; _restart(t,s);*/ _closeAllTips(); } );
一个公用函数,关闭当前的弹出框
function _closeAllTips(){ var list = art.dialog.list || {}; for (var i in list) { list[i].close(); }; }