一个实用的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"});

})