项目：gdlt_custom_number 总结收获和经验

来源：互联网发布：会计中级网络课程编辑：程序博客网时间：2024/06/06 03:27

不懂的知识点：

$.ajax({type : 'POST',url : 'award.action',dataType : 'json',error : function() {alert('not connect'); //@todo3},success : function(result) {var json = eval("(" + result + ")"),msg = json[0].msg, prizeId = parseInt(json[0].prizeId);var angle = parseInt(json[0].angle);hidebg.style.height = 2835 + 'px';$('#lotteryBtn').stopRotate();rotateFunc(angle, prizeId);}});

在上面有用到eval，网上说用类似JQuery.parseJSON()，链接如下

戳戳戳，eval与JQuery.parseJSON

顺便说说JSON.parse(),用于将一个字符串解析成json对象

var str = '{"name": "smalldragon","age":"23"}'; JSON.parse(str);

JSON.stringify()用于将一个对象解析成字符串

var a ={a:1;b:2}; JSON.stringify(a);

大部分不支持使用eval的原因有： 1、性能不好 2、不安全 3、产生混乱的代码逻辑

知识：

1.JQuery中find()函数和children()函数的区别。

一个是获取所有后代元素，一个是只获取子元素

2.事件必须在元素已经存在的时候绑定

例如，先在已存在元素上addClass（"goto"）,然后再在下面跟着写$(".goto").click(func);什么的

3. get 和 set 滚动轮高度

function getScrollTop() {        var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;        return scrollTop;    }     function setScrollTop(scroll_top) {        document.documentElement.scrollTop = scroll_top;        window.pageYOffset = scroll_top;        document.body.scrollTop = scroll_top;    }

理由是：关于scrollTop的文章

BackCompat： Standards-compliant mode is not switched on. (Quirks Mode)
CSS1Compat： Standards-compliant mode is switched on. (Standards Mode)

var height = document.compatMode=="CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight;

总之像上面都设置上就可以了

3.如何在设置弹出窗口背景hidebg的高度?

在看了慕课网网站的源码发现，以前我们都是这样写的,然后设置hidebg为网页的最大高度，document.documentElement.clientHeight

<div id="hidebg"></div><div id="popUp"></div>

但慕课网的html结构是下面这样的，把hidebg样式设为下面那样：

#hidebg {   position: fixed;   top: 0;   left: 0;   bottom: 0;   right: 0;}

这样hidebg就占据了整个屏幕，又学到一招

<div id="hidebg">    <div id="popUp">    </div></div>

4.background-size: contain(背景图片包含在块内)，cover（把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。），而且在实际应用中，发现，background-size:这行代码要写在background后面，否则无效,可能是后写background会把background中未设置的属性设为默认了，包括background-size,这就是简写合并CSS样式的规则，包括margin,padding,font这些可合并的属性

5.<!docype html>这一行文档说明非常重要，如果去掉，实际中写的代码在IE8~9样式完全改变

6.在检测时PC端还是mobile端用到的JS代码

<script type="text/javascript">         //平台、设备和操作系统                var system = {             win: false,             mac: false,             xll: false,             ipad:false         };         //检测平台         var p = navigator.platform;         system.win = p.indexOf("Win") == 0;         system.mac = p.indexOf("Mac") == 0;         system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);         system.ipad = (navigator.userAgent.match(/iPad/i) != null)?true:false;         //跳转语句，如果是手机访问就自动跳转到wap.baidu.com页面         if (system.win || system.mac || system.xll||system.ipad) {                 } else {                      window.location.href = "mgdlt.jsp";         } </script>

7.使用左右轮播图时，虽说setTimeout()才是真正的每隔一段时间，但是也不知道为什么就是会出错，用了setInterval（）就可以

第二点是可以在设置了一张图大小宽度的元素上使用hover事件，因为子元素就不会变化，就不用使用mouseenter和mouseleave事件了

        var interval = 3000;/*var timeoutId = setTimeout(function(){                                   clearTimeout(timeoutId);                       $(".right-arrow").click();                       timeoutId = setTimeout(arguments.callee,interval);                    }, interval);$("#wrapper2").hover(function(){console.log(1);clearTimeout(timeoutId);},function(){console.log(2);timeoutId = setTimeout(function(){clearTimeout(timeoutId);                       $(".right-arrow").click();                       setTimeout(arguments.callee,interval);                    }, interval);</span>});*/var timeoutId = setInterval(function(){                               $(".right-arrow").click();                            },interval);$("#wrapper2").hover(function(){       //console.log(1);         clearInterval(timeoutId);},function(){         //console.log(2);          timeoutId = setInterval(function(){           $(".right-arrow").click();          },interval);});

8.取消绑定事件了怎么再次绑定，只能重新绑定一个事件

9.跨域要用jsonp,而且要访问的外域上的网址返回的是JSON才行，不是就是出错，而且在测试中JQuery的$.getJSON()会不进行下面的function，魂淡，原来在URL中callback前面是要&不是问号啊(更新，其实只是做个URL参数，写为第一个参数就为问号)

/*var url = "http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=13662443836?callback=?";$.getJSON(url, function(json){ for(var i in json){ alert(i + ":" + json[i]); } });*/ $.ajax({             type: "get",             url: "http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=13662443836",             dataType: "jsonp",             success: function(json){                 for(var i in json){ alert(i + ":" + json[i]); }             },             error: function(json){                 for(var i in json){ alert(i + ":" + json[i]); }             }         });

JS原生JSONP写法，获取的参数也必须是JSON数据：

var obj = document.createElement("script");function jsonpcallback(json) {            for(var i in json){ alert(i + ":" + json[i]); }        }            obj.src = "http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=13662443836&callback=jsonpcallback";            document.body.appendChild(obj);

10.JS控制按钮，防止频繁点击

①JS高程上写的函数节流方法

function throttle(method, context){clearTimeout(method.tId);method.tId = setTimeout(function(){method.call(context);}, 100);

②别人博客上写的，通过变量来控制

var clicktag = 0;            $('.a_cc').click(function () {                if (clicktag == 0) {                    clicktag = 1;                    $(this).addClass("a_bb");                    alert('click触发了');                    setTimeout(function () { clicktag = 0 }, 5000);                }            });

11.有异步AJAX的函数是不能做判断的，

比如

if(!checkPhone()){  alert("111");}alert("2222");$.ajax({type : "POST",url : "http://localhost:8080/custom_number/checkPhone.action",dataType : 'json',data : {"phone":phone},cache : false,async:true, error : function() {alert("3333");return false;},success : function(result) {alert("4444");  return true;}});

原本以为是AJAX成功是这样的顺序：alert("4444")→alert("1111")→alert("2222");

但有异步AJAX的函数成功的顺序是这样的： alert("1111")→alert("2222")→alert("4444");

原因竟然是因为异步的时候checkPhone()在判断中默认是false，真的是醉了醉了，那还只能设为同步了(async:false)

12.这次移动端的网页是可以嵌入到联通的一个APP，要实现分享功能时，同事都说直接在浏览器上打开是分享不了的。于是，我们就在网页调用客户端的分享功能来实现，然后才发现原来嵌入在APP上的网页是可以获取客户端信息的。

代码如下：

function shareClient() {var mobileVersion = uautil.getversion();//mobileVersion="3.2iphone";if(mobileVersion.indexOf('3.2') != -1){var shareJson = "{\"shareType\":\"url\",\"shareTitle\":\"私人定制靓号免费送！\",\"shareContent\":\"为你打造专属“密码”，不花1分钱，留住美好记忆！\",\"shareURL\":\"http://gdlt10010.iimedia.cn\",\"shareIconURL\":\"http://gdlt10010.iimedia.cn/img3/shareIconURL.jpg\"}";if (mobileVersion.indexOf('iphone') != -1) {window.location = "clientAction={\"type\":\"share2\",\"url\":\"\",\"shareList\":\"sinaweibo,tencentweibo,qzone,wechat,wechatmoments,email,shortmessage,qq\",\"msg\":\"私人定制靓号免费送！\",\"shareJson\":" + shareJson +"}";} else {js_invoke.interact("{\"type\":\"share2\",\"url\":\"\",\"shareList\":\"sinaweibo,tencentweibo,qzone,wechat,wechatmoments,email,shortmessage,qq\",\"msg\":\"私人定制靓号免费送！\",\"shareJson\":" + shareJson + "}");}}else {if (mobileVersion.indexOf('iphone') != -1) {window.location = "clientAction={\"type\":\"share\",\"url\":\"gdlt10010.iimedia.cn\",\"shareList\":\"sinaweibo,tencentweibo,qzone,wechat,wechatmoments,email,shortmessage,qq\",\"msg\":\"私人定制靓号免费送！\"}";} else {js_invoke.interact("{\"type\":\"share\",\"url\":\"http://gdlt10010.iimedia.cn/gdltapp.html\",\"shareList\":\"sinaweibo,tencentweibo,qzone,wechat,wechatmoments,email,shortmessage,qq\",\"msg\":\"私人定制靓号免费送！\"}");}}}var uautil={getuserAgent:function(){//获取客户端UA信息return navigator.userAgent.toLowerCase();},getagent:function(){//获取客户端类型var agent = uautil.getuserAgent();if(/android/.test( agent )){return 'android';}else if(/iphone/.test( agent )){return 'iphone';}else{return 'other';}},getversion:function(){var versionStr = null;var agent = uautil.getagent();var agent2 = navigator.userAgent.toLowerCase();if(agent=='android'){versionStr = agent2.match('unicom\\{version:([A-Za-z_]*@+[0-9]+.+[0-9]+),desmobile:[0-9]*\\}');}else if(agent=='iphone'){versionStr = agent2.match('unicom\\{version:([A-Za-z_]*@+[0-9]+.+[0-9]+)\\}');}return versionStr!=null?versionStr[1]:'';}};

项目链接：gdlt_custom_number

0 0