span {word-wrap: break-word;word-break: break-all;
} 

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

.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、内容太多需一行显示，显示不全的省略

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

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

链接地址：www.cnblogs.com/walkingp/ar…

/*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、上传滚动条显示问题

$.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参数进行序列化处理，默认为truecontentType: 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标签

<!--[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

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

8、改变滚动条样式

www.poluoluo.com/jzxy/201104/114964.html www.webhek.com/post/scroll…

9、伪元素详解

www.cnblogs.com/xiaohuochai…

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

blog.csdn.net/u011380927/…

/*** 判断 当前浏览器的型号、版本信息/* 需要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的日期时间格式化

//日期格式化
'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: meizzvar 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: * (newDate()).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 removeddefault:return $0.substr(1, $0.length - 2);}});};

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

（IE,google,360,Safari,firefox）blog.csdn.net/ybb35068001…

<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;右键菜单禁用，用这个可以禁止复制。

在<body>中加入属性代码：

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

防止用户另存网页： 利用<noscript><iframe src=*.html></iframe></noscript>标签，能防止网页的直接另存，但不能防止网页被人使用工具下载

*为通配符。

例1：

<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>

//禁用鼠标事件
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()' 

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

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中粘贴内容时过滤掉粘贴内容的一些特殊的样式或者标签

<!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、图片上传/预览

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样式

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

/***用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.跟大家分享一段微信支付的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');}});}

blog.csdn.net/yulei_qq/ar… 银联支付 blog.csdn.net/Angular_/ar… mui微信/支付宝支付js

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

<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在复制粘贴网页内容时自动添加出处:

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

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

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

www.jb51.net/article/350…

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

21、Truthy

在JavaScript中，Truthy(真值)指的是在Boolean上下文中转换后的值为真的值。所有值都是真值，除非它们被定义为 falsy (即， 除了false，0，“”，null，undefined和NaN 外)。 JavaScript 在Boolean上下文中使用强制类型转换（coercion）。

22、时间格式化

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;
}

moment.js momentjs.cn/

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

30-seconds-of-code

github.com/Chalarangelo/30-seconds-of-code#anagrams-of-string-with-duplicates http://mp.weixin.…

24、ajax的jquery同步/异步

Ajax请求默认的都是异步的 如果想同步 async设置为false就可以（默认是true） var html = $.ajax({ url: "some.php", async: false }).responseText; 或者在全局设置Ajax属性 $.ajaxSetup({ async: false }); 再用post，get就是同步的了

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

延伸扩展：如何判断当前浏览器是什么浏览器？ 　　

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

总所周知：当下比较常用的有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浏览器的。

26、byte的1024转换方法

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种方法

方法一：正则法

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拆分法

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;

方法三：又见正则

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"));

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

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

28、获得浏览器版本信息

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

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

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

jquery-json

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、避免浏览器自动填充表单的解决方式

www.cnblogs.com/moonLightcy…

1、添加input隐藏框来填充

<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、修改选择器

<li><label>账号：</label>
<input id="a" type="text">
</li>
<li><label>密码：</label><input type="password">
</li> 

这种方式是我自己闲着无聊，试着玩儿试出来的，感觉这种方式还是比较合理的，毕竟DOM那么金贵，不需要多余的input，这种方式需要注意的几点就是：

1)、一定要给type='text'一个id；

2)、type='password'不能有id或者name（有其一都会导致自动填充），可以有class；

3)、目测这种方式在360上行不通，谷歌没有问题，谨慎；

3、使用js控制

附加一个小提示：如果只是想要去掉那个黄色的背景保留填充的值的话，以下两种css样式取其一，都是可以做到的，因为我们改的样式不在用户代理样式表里面。

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、面试题综合

juejin.im/entry/58abd… https://juejin.im/entry/58ba33a5570c350062125431 https://juejin.im/entry/59b3b5ecf265da0652707150 https://juejin.im/entry/59ffce6df265da43052e016b

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

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

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

<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最高版本

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

36、两端对齐用法

www.cnblogs.com/reaf/p/6795…

链接中的方法更全面

<style>p{margin: 0;font-size: 12px;}.justify{text-align: justify;height: 20px;width:50px;}.justify:after{content:'.';width: 100%;display: inline-block;overflow: hidden;height: 0;}
</style><body>
<div style="width: 150px;"><div style="overflow: hidden;"><p class="justify" style="float: left;">星上时</p><p style="float: left;">：2018-10-19</p></div><div style="overflow: hidden;"><p class="justify" style="float: left;">GNC时</p><p style="float: left;">：2018-10-19</p></div>
</div>
</body>

上面的代码测了下 谷歌可以 ie不支持

37、打印功能相关

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

38、屏蔽浏览器返回按钮

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