类似“一战到底”的答题程序

相信很多人都看过“一战到底”。现在,基于它的答题模式使用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();
	};
}

 

 

 

 

 

 

 

转载于:https://www.cnblogs.com/huanhuan8808/p/3323202.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值