工作中遇到的一些问题

开始

1、名称为纯英文数字等不换行问题

1
2
3
4
span {
word-wrap: break-word;
word-break: break-all;
}

2、各浏览器关于渐变色的适配

1
2
3
4
5
6
7
8
9
.main {
background: linear-gradient(left, #055798, #01b1f8);
background: -webkit-linear-gradient(left, #055798, #01b1f8);
background: -ms-linear-gradient(left, #055798, #01b1f8);
background: -moz--linear-gradient(left, #055798, #01b1f8);
background: -0--linear-gradient(left, #055798, #01b1f8);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#055798', endColorstr='#01b1f8',GradientType=1 );//默认值,水平
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#055798', endColorstr='#01b1f8',GradientType=0 );//垂直*/
}

3、内容太多需一行显示,显示不全的省略

1
2
3
4
5
6
7
span {
display: block;
height: 17px;
overflow: hidden;
white-space: nowrap;//一行显示
text-overflow: ellipsis;//显示不全就省略
}

4、鼠标滚轮事件,各浏览器的适配

链接地址:http://www.cnblogs.com/walkingp/archive/2010/02/03/1662872.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*IE/Opera注册事件*/
if(document.attachEvent){
document.attachEvent('onmousewheel',scrollFunc);

}
/*Firefox注册事件*/
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}
/*Safari与Chrome属于同一类型,可使用HTML DOM方式添加事件*/
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome

/*除Firefox外其余均可使用HTML DOM方式添加事件,因此添加事件使用以下方式*/
/*注册事件*/
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//W3C
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome

5、上传滚动条显示问题

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
$.messager.progress({interval:'99999999'});			//缓冲进度条
var formData = new FormData();
var mutiUpload=document.getElementById('updateFile').files;
for(var i=0;i<mutiUpload.length;i++){
formData.append("filelist", mutiUpload[i]);
}
formData.append("zyname", $("#addResource [name='zyname']").val());
formData.append("dagang", $("#addResource [name='dagang']").val());
formData.append("rangetype", $("#addResource [name='rangetype']").val());
formData.append("whether", $("#addResource [name='whether']").val());

$.ajax({
url: webPath + '/wechat/Resourcesmanage/addListResources.htm',
type: "POST",
data: formData,
processData: false, // 不要对data参数进行序列化处理,默认为true
contentType: false, // 不要设置Content-Type请求头,因为文件数据是以 multipart/form-data 来编码
xhr: function(){
myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){
myXhr.upload.addEventListener('progress',function(e) {
if (e.lengthComputable) {
var percent = Math.floor(e.loaded/e.total*100);
if(percent <= 100) {
$(".progressbar-text").text(percent+'%');
$(".progressbar-value").css('width', percent+'%');
}
if(percent > 100) {
}
}
}, false);
}
return myXhr;//利用递归
},
success: function(obj){
// 请求成功
var data=JSON.parse(obj);
if(data.status==1){
$.messager.progress('close');
layerOpen('提示','添加成功!');
//$('#win_add_Excel').window('close');
$('.add-resource-file').fadeOut();
$('.z_photo').html('');
$('#addResource')[0].reset();
initResources(pageNo,resSize,"","","");
}else{
$.messager.progress('close');
layerOpen('提示',data.msg);
}
},
error: function(res) {
// 请求失败
console.log(res);
}
});

6、IE6-IE8支持HTML5标签

1
2
3
4
5
6
<!--[if lt IE 9]>
  <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
  <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]—>
//html5shiv:解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题。
//respond.min:让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。

7、IE6 的块级元素默认高度 bug

1
2
3
#dv_placeholder div {
font: 1px/1 serif; /** 清除块默认高度 @ IE6 **/
}

8、改变滚动条样式

http://www.poluoluo.com/jzxy/201104/114964.html

9、伪元素详解

http://www.cnblogs.com/xiaohuochai/p/5021121.html

10、判断 当前浏览器的型号、版本信息

https://blog.csdn.net/u011380927/article/details/50096117

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/**
* 判断 当前浏览器的型号、版本信息/* 需要jquery-migrate-1.2.1.min.js插件库的支持
*/
function judgeBroswer() {
if ($.browser.msie) {
alert("this is msie! version:" + $.browser.version);
} else if ($.browser.safari) {
alert("this is safari! version:" + $.browser.version);
} else if ($.browser.mozilla) {
alert("this is mozilla! version:" + $.browser.version);
} else if ($.browser.opera) {
alert("this is opera version:" + $.browser.version);
} else if ($.browser.chrome) {
alert("this is chrome version:" + $.browser.version);
}
}

11、js的日期时间格式化

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
//日期格式化
'2016-06-17'.replace(/(\d{4})-(\d{2})-(\d{2})/g,'$1年$2月$3日')
"2016年06月17日";
//日期时间格式化
/**方法1**/
// 对Date的扩展,将 Date 转化为指定格式的String
// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符,
// 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
// 例子:
// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
// (new Date()).Format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
Date.prototype.Format = function (fmt) { //author: meizz
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}

调用:
var time1 = new Date().Format("yyyy-MM-dd");
var time2 = new Date().Format("yyyy-MM-dd HH:mm:ss");

/**方法2**/
<script language="javascript" type="text/javascript">
<!-- /** * 对Date的扩展,将 Date 转化为指定格式的String * 月(M)、日(d)、12小时(h)、24小时(H)、分(m)、秒(s)、周(E)、季度(q)
可以用 1-2 个占位符 * 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字) * eg: * (new
Date()).pattern("yyyy-MM-dd hh:mm:ss.S")==> 2006-07-02 08:09:04.423
* (new Date()).pattern("yyyy-MM-dd E HH:mm:ss") ==> 2009-03-10 二 20:09:04
* (new Date()).pattern("yyyy-MM-dd EE hh:mm:ss") ==> 2009-03-10 周二 08:09:04
* (new Date()).pattern("yyyy-MM-dd EEE hh:mm:ss") ==> 2009-03-10 星期二 08:09:04
* (new Date()).pattern("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
*/
Date.prototype.pattern=function(fmt) {
var o = {
"M+" : this.getMonth()+1, //月份
"d+" : this.getDate(), //日
"h+" : this.getHours()%12 == 0 ? 12 : this.getHours()%12, //小时
"H+" : this.getHours(), //小时
"m+" : this.getMinutes(), //分
"s+" : this.getSeconds(), //秒
"q+" : Math.floor((this.getMonth()+3)/3), //季度
"S" : this.getMilliseconds() //毫秒
};
var week = {
"0" : "/u65e5",
"1" : "/u4e00",
"2" : "/u4e8c",
"3" : "/u4e09",
"4" : "/u56db",
"5" : "/u4e94",
"6" : "/u516d"
};
if(/(y+)/.test(fmt)){
fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
}
if(/(E+)/.test(fmt)){
fmt=fmt.replace(RegExp.$1, ((RegExp.$1.length>1) ? (RegExp.$1.length>2 ? "/u661f/u671f" : "/u5468") : "")+week[this.getDay()+""]);
}
for(var k in o){
if(new RegExp("("+ k +")").test(fmt)){
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
}
}
return fmt;
}

var date = new Date();
window.alert(date.pattern("yyyy-MM-dd hh:mm:ss"));
// -->
</script>

/**方法三**/
Date.prototype.format = function (mask) {
var d = this;

var zeroize = function (value, length) {

if (!length) length = 2;

value = String(value);

for (var i = 0, zeros = ''; i < (length - value.length); i++) {

zeros += '0';

}

return zeros + value;

};

return mask.replace(/"[^"]*"|'[^']*'|/b ( ? : d {
1, 4
} | m {
1, 4
} | yy( ? : yy) ? | ([hHMstT]) / 1 ? | [lLZ]) / b / g, function ($0) {

switch ($0) {

case 'd':
return d.getDate();

case 'dd':
return zeroize(d.getDate());

case 'ddd':
return ['Sun', 'Mon', 'Tue', 'Wed', 'Thr', 'Fri', 'Sat'][d.getDay()];

case 'dddd':
return ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][d.getDay()];

case 'M':
return d.getMonth() + 1;

case 'MM':
return zeroize(d.getMonth() + 1);

case 'MMM':
return ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'][d.getMonth()];

case 'MMMM':
return ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'][d.getMonth()];

case 'yy':
return String(d.getFullYear()).substr(2);

case 'yyyy':
return d.getFullYear();

case 'h':
return d.getHours() % 12 || 12;

case 'hh':
return zeroize(d.getHours() % 12 || 12);

case 'H':
return d.getHours();

case 'HH':
return zeroize(d.getHours());

case 'm':
return d.getMinutes();

case 'mm':
return zeroize(d.getMinutes());

case 's':
return d.getSeconds();

case 'ss':
return zeroize(d.getSeconds());

case 'l':
return zeroize(d.getMilliseconds(), 3);

case 'L':
var m = d.getMilliseconds();

if (m > 99) m = Math.round(m / 10);

return zeroize(m);

case 'tt':
return d.getHours() < 12 ? 'am' : 'pm';

case 'TT':
return d.getHours() < 12 ? 'AM' : 'PM';

case 'Z':
return d.toUTCString().match(/[A-Z]+$/);

// Return quoted strings with the surrounding quotes removed

default:
return $0.substr(1, $0.length - 2);

}

});

};

12、window.url.createobjecturl 兼容多个浏览器

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<script type="text/javascript">   
function setImagePreview() {
var docObj = document.getElementById("ctl00_ContentMain_file_head");
var fileName = docObj.value;
if (!fileName.match(/.jpg|.gif|.png|.bmp/i)) {
alert('您上传的图片格式不正确,请重新选择!');
return false;
}

var imgObjPreview = document.getElementById("preview");
if (docObj.files && docObj.files[0]) {
//火狐下,直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '63px';
imgObjPreview.style.height = '63px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
if (window.navigator.userAgent.indexOf("Chrome") >= 1 || window.navigator.userAgent.indexOf("Safari") >= 1) {
imgObjPreview.src = window.webkitURL.createObjectURL(docObj.files[0]);
} else {
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
}
} else {
//IE下,使用滤镜
docObj.select();
docObj.blur();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("localImag");
//必须设置初始大小
localImagId.style.width = "63px";
localImagId.style.height = "63px";
//图片异常的捕捉,防止用户修改后缀来伪造图片
try {
localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
} catch(e) {
alert("您上传的图片格式不正确,请重新选择!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
return true;
}

</script>

<div id="localImag"><img id="preview" width="-1" height="-1" style="display:none" /></div>
<asp:FileUpload ID="file_head" runat="server" onchange="javascript:setImagePreview();" />


//http://blog.csdn.net/qq_24148225/article/details/53187149?locationNum=5&fps=1
if(navigator.userAgent.indexOf("MSIE 9.0")>0){//判断ie浏览器版本
var pic = document.getElementById("showLogo"),
file = document.getElementById("logo");
file.select();

//由于ie9的安全性,若没有focus()聚焦到其他button,div等,document.selection.createRange().text将会报错
//(这里的save是一个button,若focus到div这个div需要至少有1px)
document.getElementById("save").focus();
//file.blur();
var reallocalpath = document.selection.createRange().text;
pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src=\"" + reallocalpath + "\")";//增加滤镜
//这里设置预览图片pic的大小
pic.style.width = "180px";
pic.style.height = "130px";
// 设置img的src为base64编码的透明图片 取消显示浏览器默认图片
pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';

}else{
//其他浏览器
document.getElementById("showLogo").src =getFileUrl("logo");

}


function getFileUrl(fileName){
var url ;
if (navigator.userAgent.indexOf("MSIE")>=1) {
url = document.getElementById(sourceId).value; // IE10,11可以使用这种方式
} else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox
url = window.URL.createObjectURL(document.getElementById(fileName).files.item(0));
} else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome
url = window.URL.createObjectURL(document.getElementById(fileName).files.item(0));
} else{
url = window.URL.createObjectURL(document.getElementById(fileName).files.item(0));
}
return url;

}

13、禁止右键及复制粘贴事件

//http://www.cnblogs.com/ZDPPU/p/5950408.html

oncontextmenu事件单禁用右键菜单

一个页面中,BODY中用oncontextmenu=’return false’来取消鼠标右键;在JS中设置oncontextmenu=’return true’用window.document.oncontextmenu = function(){ return false;}onconTextmenu=window.event.returnValue=false;右键菜单禁用,用这个可以禁止复制。

在中加入属性代码:

1
2
3
4
5
oncontextmenu="return false"

onselectstart="return false" //禁止选中网页上的内容

oncopy="return false" //防复制用户在网页上选中的内容

防止用户另存网页: 利用标签,能防止网页的直接另存,但不能防止网页被人使用工具下载

*为通配符。

例1:

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
<html>
<head>
<title>OnContextMenu事件</title>

<script language="JavaScript">
<!--

function uFunction()

{ document.all.infoDiv.innerHTML='你按下了鼠标右键,但是右键菜单不能 显示!';}

function uFunction2()

{ document.all.infoDiv.innerHTML='你按下了Ctrl+鼠标右键,可以 显示右键菜单。';}

//-->

</script>
</head>

<body oncontextmenu="if(!event.ctrlKey){uFunction();return false}else{uFunction2()}">

<div id="infoDiv">你按下了鼠标右键,但是右键菜单不能 显示!<br>你按下了Ctrl+鼠标右键,可以显示右键菜单。
</div></body>
</html>
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
//禁用鼠标事件
document.onmousedown = function(e){
if ( e.which == 2 ){// 鼠标滚轮的按下,滚动不触发
return false;
}
if( e.which==3 ){// 鼠标右键
return false;
}
}

//禁用键盘中的ctrl、alt、shift
document.onkeydown = function(){
if( event.ctrlKey ){
return false;
}
if ( event.altKey ){
return false;
}
if ( event.shiftKey ){
return false;
}
}

oncontextmenu='return false'
ondragstart='return false'
onselectstart ='return false'
onselect='document.selection.empty()'
oncopy='document.selection.empty()'
onbeforecopy='return false'
onmouseup='document.selection.empty()'

一个更简单的方法就是在中加入如下的代码,这样鼠标的左右键都失效了.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
topmargin="0"
oncontextmenu="return false"
ondragstart="return false"
onselectstart="return false"
onselect="document.selection.empty()"
oncopy="document.selection.empty()"
onbeforecopy="return false"
onmouseup="document.selection.empty()"

//1.禁止网页另存为:在<body>后面加入以下代码:
<noscript>
<iframe src="*.htm"></iframe>
</noscript>


//2.禁止网页内容复制.粘贴:在<body>中加入以下代码:
<body
onmousemove=/HideMenu()/ oncontextmenu="return false"
ondragstart="return false" onselectstart ="return false"
onselect="document.selection.empty()"
oncopy="document.selection.empty()" onbeforecopy="return false"
onmouseup="document.selection.empty()">

14、一个可编辑div中粘贴内容时过滤掉粘贴内容的一些特殊的样式或者标签

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
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<div id="test" style="float: left; height: 100px; width: 500px; border:1px solid red" contenteditable="true" class="testmr">2222</div>
</body>

</html>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){

var update = function(original){
var new_content = $('.testmr').html();

var new_content = new_content.replace(/class="[^"]+"/ig, '');

new_content = new_content.replace(/class\="[^"]+"/gi, '');

new_content = new_content.replace(/<h1.*?>(.*?)<\/h1>/ig,"$1");

new_content = new_content.replace(/<h2.*?>(.*?)<\/h2>/ig,"$1");

new_content = new_content.replace(/<h3.*?>(.*?)<\/h3>/ig,"$1");

new_content = new_content.replace(/<h4.*?>(.*?)<\/h4>/ig,"$1");

new_content = new_content.replace(/<h5.*?>(.*?)<\/h5>/ig,"$1");

new_content = new_content.replace(/<h6.*?>(.*?)<\/h6>/ig,"$1");

new_content = new_content.replace(/style\="[^"]+"/gi, '');

alert(new_content);
$('.testmr').html(new_content);
}

$('.testmr').bind('paste',function(e){
var $this = $(this);
var original = $this.html();
setTimeout(function(){update();}, 10);

})
})

</script>

15、图片上传/预览

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
function updateImage(obj,showid){
var idFile = $(obj).attr("id");
var docObj = document.getElementById(idFile);
var fileName = docObj.value; //获取的文件
if (!fileName.match(/.jpg|.gif|.png|.jpeg/i)) {
layerOpen('提示','您上传的图片格式不正确,请重新选择!');
return false;
}
var imgSrc='';
if (docObj.files && docObj.files[0]) {
//火狐下,直接设img属性
/*imgSrc = docObj.files[0].getAsDataURL(); */
if (window.navigator.userAgent.indexOf("Chrome") >= 1 || window.navigator.userAgent.indexOf("Safari") >= 1) {
imgSrc = window.webkitURL.createObjectURL(docObj.files[0]);
}
else {
imgSrc = window.URL.createObjectURL(docObj.files[0]);
}
} else {
imgSrc= fileName;
}
if(navigator.userAgent.indexOf("MSIE 9.0")>0){//判断ie浏览器版本
var pic = document.getElementById(showid),
file = document.getElementById(idFile);
file.select();
file.blur();
var reallocalpath = document.selection.createRange().text;
pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src=\"" + reallocalpath + "\")";//增加滤镜
//这里设置预览图片pic的大小
// 设置img的src为base64编码的透明图片 取消显示浏览器默认图片
pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
}
/*var imgUrl = window.URL.createObjectURL(fileList[0]);*/
$(obj).next().attr("src",imgSrc);
}

function addAppIndex(){
if (!standard_checkInputInfo("addAppForm")) {
return;
}
if(''==$('#addAppImg').val()){
layerOpen('提示','请上传图片');
return;
}
$('#addAppForm').form('submit', {
url : function() {
return webPath + '/wechat/homeconfiguration/addHomeconfiguration.htm';
},
success : function(data) {
var dataObj = eval("(" + data + ")");
if (dataObj.status == 1) {
$('#addAppForm')[0].reset();
loadParentAPP(pageNo,quesSize);
$('.add-app').fadeOut();
layerOpen('提示',dataObj.msg);
}else{
layerOpen('提示',dataObj.msg);
}
}
});
}

16、某些CSS样式

1
2
3
4
5
6
7
8
9
10
11
overflow: hidden; /**自动隐藏文字*/
text-overflow: ellipsis; /**文字隐藏后添加省略号*/
white-space: nowrap; /**强制不换行*/
word-wrap: normal(默认) | break-word/*打断,强制换行*/
word-break: normal(默认) | break-all | keep-all /*Firefox、Opera不能识别*/

/*不让鼠标选中文字*/
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

17、用JS判断操作系统,只能手机登录,而电脑不能登录Web

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/**
*用JS判断操作系统 如果不是手机客户端直接跳转到一个显示页面 提示
*/
<script type="text/javascript">
var ua = window.navigator.userAgent;
var osVersion = ua.split(";")[2];
var osV = osVersion.substr(osVersion.length - 3, 3);
switch (osV) {
case "5.0":
document.write("Win2000");
break;
case "5.1":
document.write("WinXP");
break;
case "5.2":
document.write("Win2003");
break;
default:
document.write("Others");
break;
}
</script>

18、微信JS支付代码_前端调用微信支付接口

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
//1.跟大家分享一段微信支付的js代码片段、V3版的微信支付没有paySignKey参数、基本上是直接复制就可以使用了、改一改自己的参数就好了、话不多说、直接上代码
$(´.Save_Patient_Msg´).click(function(){
$(´.Save_Patient_Msg´).off(´click´);
var hrdfId = getOrderId();
var txnAmt = $(´.sum_pay.font-red´).html();

var data = {orderId: hrdfId, txnAmt: "0.01",
prodDesc: "远程诊断服务", callType: "JSAPI",
access_token: getUrlParam("access_token")
};

$.ajax({
type: ´POST´,
url: ´/hims/api/commonPay/queryTransNo?access_token=´ getUrlParam(´access_token´),
dataType:´json´,
contentType:´application/json´,
data: JSON.stringify(data),
success: function(Wxres){
if(!Wxres){
$.alert(´服务器拥堵,请稍后访问´)
}else{
console.log(Wxres);
if(Wxres.data.respCode == ´fail´){
$.alert(Wxres.data.respMsg);
}else{
//10 微信支付接口
// 10.1 发起一个支付请求
// 注意:此 Demo 使用 2.7 版本支付接口实现,建议使用此接口时参考微信支付相关最新文档。
var param = Wxres.data;
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: ´wx403ead26691402fb´, // 必填,公众号的唯一标识
timestamp: param.timestamp, // 必填,生成签名的时间戳
nonceStr: param.noncestr, // 必填,生成签名的随机串
signature: param.signJs,// 必填,调用js签名,
jsApiList: [´chooseWXPay´] // 必填,需要使用的JS接口列表,这里只写支付的
});
wx.chooseWXPay({
timestamp: param.timestamp, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
nonceStr: param.noncestr, // 支付签名随机串,不长于 32 位
package: "prepay_id=" param.transNo, // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=***)
signType: "MD5", // 签名方式,默认为´SHA1´,使用新版支付需传入´MD5´
paySign: param.sign, // 支付签名
success: function (res) {
if(res.errMsg == "chooseWXPay:ok"){
//alert("支付成功");
window.location.href = "/hims/weixin/pages/Order_ok.html?access_token=" getUrlParam("access_token");
}else{
alert(res.errMsg);
}
},
cancel: function(res){
//alert(´取消支付´);
}
});
}
}
},
error:function(data){
var msg = data.message || data.status;
$.alert(´服务器错误´ msg);
}
});
return false;
});




function getUrlParam(name){
//构造一个含有目标参数的正则表达式对象
var reg = new RegExp("(^|&)" name "=([^&]*)(&|$)");
//匹配目标参数
var r = window.location.search.substr(1).match(reg);
//返回参数值
if (r!=null) return unescape(r[2]); return null;
}


链接:
http://dditblog.com/itshare_553.html
http://www.cnblogs.com/kewenxin/p/7463337.html



//2.微信支付主要就是三步:1.组装数据生成预支付ID,2.调起微信支付接口,3.结果处理
$("#getBrandWCPayRequest").click(function() {
$.ajax({
type: "POST",
url: "",
data: {
"openId": $("#openId").val(),
"total_fee": $("#total_price").html(),
"body": $("#bodydes").html(),
"productid": $("#productid").val()
},
//参数自己根据业务定义
dataType: "json",
success: function(data) {
callPay(data);
}
});
});

function callPay(data) {
//alert("回调执行");
var appId = data.appId;
var timeStamp = data.timeStamp;
var nonceStr = data.nonceStr;
var package = data.package;
var signType = data.signType;
var paySign = data.paySign;
//
WeixinJSBridge.invoke('getBrandWCPayRequest', {
"appId": appId,
"timeStamp": timeStamp,
"nonceStr": nonceStr,
"package": package,
"signType": signType,
"paySign": paySign

},
function(res) {
//alert(res.err_msg);
WeixinJSBridge.log(res.err_msg);
if (res.err_msg == "get_brand_wcpay_request:ok") {
//var pc = data.total_fee;
//var body = data.body;
//var openId = data.openId;
//var timeStamp = data.timeStamp;
//alert("交易金额:"+pc+"分钱"+"产品名称:"+body+"用户openID:"+openId+"订单号:2015"+timeStamp);
//alert("支付成功!");
WeixinJSBridge.call('closeWindow');
} else if (res.err_msg == "get_brand_wcpay_request:cancel") {
//alert("用户取消支付!");
//WeixinJSBridge.call('closeWindow');
} else {
alert("支付失败!");
WeixinJSBridge.call('closeWindow');
}
});

}

19、复制粘贴时自动添加出处

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
document.body.oncopy = function () {
setTimeout( function () {
var text = clipboardData.getData("text");
if (text) {
text = text + "\r\n\r\n原文地址:"+location.href;
clipboardData.setData("text", text);
}
}, 100 );
};
</script>

JavaScript在复制粘贴网页内容时自动添加出处:

https://www.open-open.com/code/view/1420709972656

http://outofmemory.cn/code-snippet/633/javascript-fuzhiniantie-wangyeneirong-shi-zidong-augment-chuchu

20、json字符串和json对象互转

1
2
JSON.parse(jsonstr); //可以将json字符串转换成json对象 
JSON.stringify(jsonobj); //可以将json对象转换成json对符串

21、Truthy

1
2
3
4
5
6
7
8
在JavaScript中,Truthy(真值)指的是在Boolean上下文中转换后的值为真的值。所有值都是真值,除非它们被定义为 falsy (即, 除了false,0,“”,null,undefined和NaN 外)。

JavaScript 在Boolean上下文中使用强制类型转换(coercion)。

作者:crystal7725本尊
链接:https://juejin.im/post/5cb6bf9251882545e068b264
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

22、时间格式化

1
2
3
4
5
6
7
8
9
function show(date) {
var date = new Date(date);
/*var info = date.getFullYear()+"年";*/
var info = date.getMonth() + 1 + "月";
info += date.getDate() + "日";
info += date.getHours() + "时";
info += date.getMinutes() + "分";
return info;
}

23、30-seconds-of-code 代码片段

https://github.com/30-seconds/30-seconds-of-code#anagrams-of-string-with-duplicates%20http://mp.weixin.qq.com/s/LxdDsgPAGTx19T5BZnw6EQ

24、ajax的jquery同步/异步

1
2
3
4
5
6
7
8
9
10
11
12
Ajax请求默认的都是异步的

如果想同步 async设置为false就可以(默认是true) var html = $.ajax({
url: "some.php",
async: false
}).responseText;

或者在全局设置Ajax属性
$.ajaxSetup({
async: false
});
再用post,get就是同步的了

25、如何判断当前浏览器是什么浏览器?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
延伸扩展:如何判断当前浏览器是什么浏览器?

        简而言之,每个浏览器的独有属性的一个罗列:

        总所周知:当下比较常用的有Firefox(火狐浏览器)、Opera(欧鹏浏览器)、Safari(苹果公司的网络浏览器)、Chrome(谷歌浏览器);下面一一对各个浏览器相对独有的特性进行一个描述(暂时不谈论内核的差距,主要是从相关函数进行分析)。

        Firefox中的DOM元素都有一个getBoxObjectFor函数,用来获取该DOM元素的位置和大小(IE对应的中是getBoundingClientRect函数)。这是Firefox独有的,判断它即可知道是当前浏览器是Firefox。

        Opera提供了专门的浏览器标志,就是window.opera属性。

        Safari浏览器中有一个其他浏览器没有的openDatabase函数,可做为判断Safari的标志。    Chrome有一个MessageEvent函数,但Firefox也有。不过,好在Chrome并没有Firefox的getBoxObjectFor函数,根据这个条件还是可以准确判断出Chrome浏览器的。

作者:crystal7725本尊
链接:https://juejin.im/post/5cb6bf9251882545e068b264
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

26、byte的1024转换方法

1
2
3
4
5
6
7
8
function bytesToSize(bytes) {  
if (bytes === 0) return '0 B';
var k = 1024, // or 1000
sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
i = Math.floor(Math.log(bytes) / Math.log(k));

return (bytes / Math.pow(k, i)).toFixed(1) + ' ' + sizes[i];
}

27、JS获取URL中参数值(QueryString)的4种方法

方法一:正则法

1
2
3
4
5
6
7
8
9
10
11
12
function getQueryString(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
}
return null;
}
// 这样调用:
alert(GetQueryString("参数名1"));
alert(GetQueryString("参数名2"));
alert(GetQueryString("参数名3"));

方法二:split拆分法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function GetRequest() {
var url = location.search; //获取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
}
return theRequest;
}
var Request = new Object();
Request = GetRequest();
// var 参数1,参数2,参数3,参数N;
// 参数1 = Request['参数1'];
// 参数2 = Request['参数2'];
// 参数3 = Request['参数3'];
// 参数N = Request['参数N'];
var q;
q = Request['q'];
q = Request.q;

方法三:又见正则

1
2
3
4
5
6
7
8
9
10
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
var context = "";
if (r != null) context = r[2];
reg = null;
r = null;
return context == null || context == "" || context == "undefined" ? "": context;
}
alert(GetQueryString("q"));

方法四:单个参数的获取方法

1
2
3
4
5
6
7
8
function GetRequest() {
var url = location.search; //获取url中"?"符后的字串
if (url.indexOf("?") != -1) { //判断是否有参数
var str = url.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串
strs = str.split("="); //用等号进行分隔 (因为知道只有一个参数 所以直接用等号进分隔 如果有多个参数 //要用&号分隔 再用等号进行分隔)
alert(strs[1]); //直接弹出第一个参数 (如果有多个参数 还要进行循环的)
}
}

28、获得浏览器版本信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function getBroswer(){
var sys = {};
var ua = navigator.userAgent.toLowerCase();
var s;
(s = ua.match(/edge\/([\d.]+)/)) ? sys.edge = s[1] :
(s = ua.match(/rv:([\d.]+)\) like gecko/)) ? sys.ie = s[1] :
(s = ua.match(/msie ([\d.]+)/)) ? sys.ie = s[1] :
(s = ua.match(/firefox\/([\d.]+)/)) ? sys.firefox = s[1] :
(s = ua.match(/chrome\/([\d.]+)/)) ? sys.chrome = s[1] :
(s = ua.match(/opera.([\d.]+)/)) ? sys.opera = s[1] :
(s = ua.match(/version\/([\d.]+).*safari/)) ? sys.safari = s[1] : 0;

if (sys.edge) return { broswer : "Edge", version : sys.edge };
if (sys.ie) return { broswer : "IE", version : sys.ie };
if (sys.firefox) return { broswer : "Firefox", version : sys.firefox };
if (sys.chrome) return { broswer : "Chrome", version : sys.chrome };
if (sys.opera) return { broswer : "Opera", version : sys.opera };
if (sys.safari) return { broswer : "Safari", version : sys.safari };

return { broswer : "", version : "0" };
}
getBroswer();

29、firefox hack

1
@-moz-document url-prefix(){.input2{top:2px;}}

30、json js对象 js字符串转换

jquery-json

1
2
3
4
5
6
7
8
9
10
var thing = {plugin: 'jquery-json', version: 2.3};//js对象

var encoded = $.toJSON( thing );
//转换为json,结果: '{"plugin":"jquery-json","version":2.3}'

var name = $.evalJSON( encoded ).plugin;
//js对象.属性,结果: "jquery-json"

var version = $.evalJSON(encoded).version;
//结果: 2.3

31、避免浏览器自动填充表单的解决方式

https://www.cnblogs.com/moonLightcy/p/6944313.html

1、添加input隐藏框来填充

1
2
3
4
5
6
7
8
9
10
<input name="old-userName" type="text">
<input name="old-pwd" type="password">
<ul class="ul-info">
<li><label>账号:</label>
<input id="userName" type="text">
</li>
<li><label>密码:</label>
<input class="0" type="password">
</li>
</ul>

2、修改选择器

1
2
3
4
5
6
<li><label>账号:</label>
<input id="a" type="text">
</li>
<li><label>密码:</label>
<input type="password">
</li>
1
2
这种方式是我自己闲着无聊,试着玩儿试出来的,感觉这种方式还是比较合理的,毕竟DOM那么金贵,不需要多余的input,这种方式需要注意的几点就是:     1)、一定要给type='text'一个id;     2)、type='password'不能有id或者name(有其一都会导致自动填充),可以有class;     3)、目测这种方式在360上行不通,谷歌没有问题,谨慎; 
3、使用js控制 附加一个小提示:如果只是想要去掉那个黄色的背景保留填充的值的话,以下两种css样式取其一,都是可以做到的,因为我们改的样式不在用户代理样式表里面。
1
2
3
4
5
6
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset !important;
}
input:-webkit-autofill {
transition: background-color 5000s ease-in-out 0s;
}

32、面试题综合

1
2
3
4
5
https://juejin.im/entry/58abdf05da2f607e924eb9d1

https://juejin.im/entry/59b3b5ecf265da0652707150

https://juejin.im/post/59ffb4b66fb9a04512385402

33、在html的头部加入meta使得所有的资源请求由http请求转成https请求

1
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

34、设置双核浏览器的浏览模式

1
2
3
4
5
<meta name="renderer" content="webkit|ie-comp|ie-stand">
content的取值为webkit,ie-comp,ie-stand之一,区分大小写,分别代表用webkit内核,IE兼容内核,IE标准内核。
若页面需默认用极速核,增加标签:<meta name="renderer" content="webkit">若页面需默认用ie兼容内核,增加标签:<meta name="renderer" content="ie-comp">

若页面需默认用ie标准内核,增加标签:<meta name="renderer" content="ie-stand">

35、ie最高版本

1
<meta http-equiv="X-UA-Compatible" content="IE=EDGE">

36、两端对齐用法

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
<style>
p{
margin: 0;
}
.justify{
text-align: justify;
height: 20px;
width:45px;
}
.justify:after{
content:'.';
width: 100%;
display: inline-block;
overflow: hidden;
height: 0;
}
</style>

<body>
<div style="width: 150px;">
<div style="">
<p class="justify">星上时</p>
<p>:2018-10-19</p>
</div>
<div style="">
<p class="justify">GNC时</p>
<p>:2018-10-19</p>
</div>
</div>
</body>

37、打印功能相关

1
2
3
4
5
1.解决 Webkit 浏览器下打印网页需要手工设置 "打印背景色" 的问题:

比如说一个元素有个背景颜色, 在打印的时候默认浏览器是不打印背景图和背景色的. 若要打印, 需要在元素的样式上添加以下代码:
-webkit-print-color-adjust: exact;
这样 WebKit 浏览器中 无论是否勾选 "打印背景图和背景色", 背景图和背景色都会被打印出来。IE下无效

38、屏蔽浏览器返回按钮

1
2
3
4
window.history.pushState('aa', document.URL);
window.addEventListener('popstate', function () {
history.pushState('aa', document.URL);
}, false);

 上一篇
面试干货 面试干货
开始一、对于Web性能优化,您有哪些了解和经验吗? 前端优化 (1)减少http请求的次数。我们知道每次发送http请求,建立连接和等待相应会花去相当一部分时间。所以在发送http请求的时候,尽量减少请求的次数,一次请求能去除的数据就不
2019-11-08
下一篇 
ios输入框缩回会留白,页面截断 ios输入框缩回会留白,页面截断
1234567// 解决ios底部留白$("input,select").blur(function(){ setTimeout(() => { const scrollHe
2019-11-08
  目录