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