项目:gdlt_custom_number 总结收获和经验

不懂的知识点:

$.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
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值