一個實用的html5+css3+ajax手機端腦筋急轉彎答題游戲代碼，還用到了jQuery、localStorage一起實現。

分類：游戲

> 益智

難易：初級

查看演示

下載資源：

34

次 下載資源

下載積分：

20

積分

js代碼

$(function() {

$(".l_btn,.l_btn2").click(function() {

$(".lock").hide();

$(".main").fadeIn(700);

var Name = $(this)[0].className;

if(Name == "l_btn") {

storage.c = 0;

storage.i = 1;

ajax();

}

});

(function() {

$("body").bind('touchmove',function(e) {

e.preventDefault()

});

var winH = $(window).height();

$(".main,.lock").css('minHeight', winH);

}());

var storage = window.localStorage;

storage.c = storage.c || 0;

storage.i = storage.i || 1;

$(".next").click(function() {

$(".answer").hide();

$(".cover").hide();

storage.c++;

if(storage.c > 19) {

storage.i ++;

storage.c= 0;

ajax();

return storage.c,storage.i;

};

ajax();

});

function ajax() {

$.get("http://route.showapi.com/151-4?showapi_appid=36844&showapi_sign=858dfaba2d9549608fca5e3af273f36e&use_my_sign&typeId=njmy&page="+storage.i+"&", function (data, textStatus){

//返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等.

//console.log(data); // 在這里this指向的是Ajax請求的選項配置信息，請參考下圖

var answer = data.showapi_res_body.pb.contentlist;

$(".font").html(answer[storage.c].title);

$(".text").html(answer[storage.c].answer);

});

};

ajax();

$(".logo,.cover").click(function() {

$(".answer").hide();

$(".cover").hide();

});

$(".btn").click(function() {

$(".answer").show();

$(".cover").show();

});

$(".btn").audioPlay({

name: "playOnce",

urlMp3: "images/Button17.wav", // 14 17 23 42 43 48 49

});

$(".l_btn,.l_btn2").audioPlay({

name: "playTwo",

urlMp3: "images/Button49.wav",

});

$(".l_date").timeDate({show:"H-m"});

$(".l_year").timeDate({show:"M-D-W"});

})

總結

以上是生活随笔為你收集整理的html答题游戏代码,html5+css3+ajax手机端脑筋急转弯答题游戏代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。