html5+css3+ajax手机端脑筋急转弯答题游戏代码

  • 内容
  • 相关

html5+css3+ajax手机端脑筋急转弯答题游戏代码

一个实用的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>
下载地址:



此处内容已隐藏,评论后刷新即可查看!


评论后还是无法显示下载地址?清理缓存-点我试试
热度:871° 评分:8.7 发布时间: 2019年8月2日

本文标签:

版权声明:若无特殊注明,本文皆为《小洋vier》原创,转载请保留文章出处。

本文链接:html5+css3+ajax手机端脑筋急转弯答题游戏代码 - https://www.wuiso.com/post-3506.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论

1条评论
  1. avatar

    尘世客〃 回复

    滴!学生卡!打卡时间:下午12:57:15,请上车的乘客系好安全带~

    广东省东莞市 电信