第一个项目部分总结

项目总结 JavaScript 评论

1.移动端头部设置

1
<meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">

2.div占据整个body
　方法1：

1
2
3
4
5
6
7
8
9
10
11
body,html{    
  padding:0px;        
  margin:0px;          
  overflow:hidden;    
}   
#divShow{   
  position:absolute;     
  width:100%;   
  height:100%;        
  background-color:green;    
}

　方法2：

1
2
3
html,body{      
	height: 100%;   
}

3.css3中calc( )函数实现不同单位的运算

1
width: calc(100% - 25px);

4.box-sizing属性

1
2
3
4
5
div{    
   box-sizing:border-box;    
   -moz-box-sizing:border-box; /* Firefox */    
   -webkit-box-sizing:border-box; /* Safari */    
}

值描述
content-box:
这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
border-box:
为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit:
规定应从父元素继承 box-sizing 属性的值。
5.用 JavaScript 准确获取手机屏幕的宽度和高度

1
2
3
4
5
6
function getViewportSize () {    
	return {            
   	 	width:window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,     
   	 	height:window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight     
         };
     }

6.div盒子垂直居中
1）盒子没有固定的高度
方法1：

1
<div class="wrapper">我不知道我的宽度和高是多少，我要实现水平垂直居中。</div>

1
2
3
4
5
6
7
8
.wrapper {            
    position: absolute;            
    top: 50%;            
    left: 50%;            
    -webkit-transform: translate(-50%, -50%);            
    -moz-transform: translate(-50%, -50%);            
    transform: translate(-50%, -50%);        
}

优点：
1.内容可变高度
2.代码量少
缺点：
1.IE8不支持
2.属性需要写浏览器厂商前缀
3.可能干扰其他transform效果
4.某些情形下会出现文本或元素边界渲染模糊的现象
方法2： 在父级元素上面加上上面3句话，就可以实现子元素水平垂直居中。

1
2
3
4
5
6
7
8
.wrapper {            
   width: 500px;         
   height: 300px;
   /*只需要在父元素上加这三句*/            
   justify-content: center; /*子元素水平居中*/            
   align-items: center; /*子元素垂直居中*/            
   display: -webkit-flex; /*css3弹性布局*/        
}

2）盒子有固定的宽和高
方案1、margin 负间距
此方案代码关键点：1.必需知道该div的宽度和高度，
2.然后设置位置为绝对位置， 3.距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%， 4.最后将该div分别左移和上移，左移和上移的大小就是该DIV宽度和高度的一半。

1
<div class="wrapper">我知道我的宽度和高是多少，我要实现水平垂直居中。</div>

1
2
3
4
5
6
7
8
9
10
11
12
.wrapper {            
   width: 400px;            
   height: 18px;            
   padding: 20px;            
   background: orange;            
   color: #fff;            
   position: absolute;            
   top:50%;            
   left:50%;            
   margin-top: -9px;            
   margin-left: -200px;
    }

方案2、
margin:auto实现绝对定位元素的居中（该方法兼容ie8以上浏览器）
此方案代码关键点：
1、上下左右均0位置定位；
2、margin: auto;

1
<div class="wrapper">我不知道我的宽度和高是多少，我要实现水平垂直居中。</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
.wrapper {            
   width: 400px;            
   height: 18px;            
   padding:20px;            
   background: orange;            
   color: #fff;            
   position: absolute;            
  	left:0;            
   right:0;            
  	top: 0;            
  	bottom: 0;            
  	margin: auto;        
}

6.视口单位主要包括以下4个：

  • vw :1vw 等于视口宽度的1%
  • vh :1vh 等于视口高度的1%
  • vmin : 选取 vw 和 vh 中最小的那个
  • vmax : 选取 vw 和 vh 中最大的那个

7.页面底部居中

1
2
3
4
5
6
7
.rule{    
   width: 100%;    
	position: fixed;    
	bottom: 2vh;    
	left: 0;    
	text-align: center;
 }

8.JS手机号正则

1
var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;

9.js中function注释规范

1
2
3
4
5
6
7
/**
* [checkMobile 检查号码是否可用]
* @param  {Element} ele   号码输入框
* @param  {string} mbNum
* @param  {Element} pop   弹出框
* @return {boolean}
*/

10.验证码倒计时

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/**
* 点击获取验证码禁用函数
* @param {Element} ele  获取验证码按钮
* @param {Number} time  经过time秒时间后才可以重新获取
*/
function codeForbid(ele, time) {
	ele.style.backgroundColor = '#999';
	ele.disabled = true;
	var timer = setInterval(function () {
		if(time === 0){
			clearInterval(timer);
			ele.style.backgroundColor = '#33CCFF';
			ele.innerHTML = '重新获取验证码';
			ele.disabled = false;
		}else{
        ele.innerHTML = time + "s后重新发送";
			time--;
		}
	}, 1000);
}

11.函数内定义全局变量
全局环境下定义，函数环境内赋值。
12.跨域每次ajax访问后端服务器sessionid不一致问题
xhr对象加入withCredentials和crossDomain属性

1
2
xhr.withCredentials = true;
xhr.crossDomain = true;

服务器后端设置头部

1
2
3
httpResponse.setHeader("Access-Control-Allow-Credentials", "true");  
httpResponse.setHeader("Access-Control-Allow-Origin","http://192.168.199.240:8081");  
httpResponse.setHeader("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");

注意由于设置了Access-Control-Allow-Credentials: true，因此必须设置Origin不能使用通配符(*)。

1
httpResponse.setHeader("Access-Control-Allow-Origin",request.getHeader('Origin'));

比较通用的写法，获取请求的头部。
13.微信分享接口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
wx.config({   //注册微信分享接口
	debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
	appId: obj.data.appid, // 必填，公众号的唯一标识  后端生成
	timestamp: obj.data.timestamp, // 必填，生成签名的时间戳   后端生成
	nonceStr: obj.data.nonceStr, // 必填，生成签名的随机串  后端生成
	signature: obj.data.signature,// 必填，签名   后端生成
	jsApiList: [// 必填，需要使用的JS接口列表
		'checkJsApi',
		'onMenuShareTimeline',
		'onMenuShareAppMessage'
	]
});
wx.ready(function () {
	wx.onMenuShareTimeline({  分享参数设置
		title: title, // 分享标题
		link: link, // 分享链接,将当前登录用户转为puid,以便于发展下线
		imgUrl: root + '/image/logo.png', // 分享图标
		success: function () {
			// 用户确认分享后执行的回调函数
			alert('分享成功');
		},
		cancel: function () {
			// 用户取消分享后执行的回调函数
			alert('分享失败');
		}
	});
	wx.onMenuShareAppMessage({
		title: title, // 分享标题
		desc: desc,
		link: link, // 分享链接,将当前登录用户转为puid,以便于发展下线
		imgUrl: root + '/image/logo.png', // 分享图标
		success: function () {
			// 用户确认分享后执行的回调函数
			alert('分享成功');
		},
		cancel: function () {
			// 用户取消分享后执行的回调函数
			alert('分享失败');
		}
	});
})

waldosiaWeb Developer & Designer

尾巴