一个实用的html5+css3+ajax手机端脑筋急转弯答题游戏代码,还用到了jQuery、localStorage一起实现。
js代码
<script src="jquery-3.1.1.min.js"></script>
<script src="sound.js"></script>
<script src="timeDate.js"></script>
<script type="text/javascript">
$(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"});
})
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791