前端工作中的一些解决问题的方法，可以参考一下

(转自网路，方便实用)

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

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

<!--[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…www.webhek.com/post/scroll…

9、伪元素详解

www.cnblogs.com/xiaohuochai…

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

/**
 * 判断 当前浏览器的型号、版本信息/* 需要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: 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 兼容多个浏览器

（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、禁止右键及复制粘贴事件

//www.cnblogs.com/ZDPPU/p/595…

oncontextmenu事件单禁用右键菜单一个页面中，BODY中用oncontextmenu='return false'来取消鼠标右键；在JS中设置oncontextmenu='return true'用window.document.oncontextmenu = function(){ return false;}

onconTextmenu=window.event.returnValue=false;右键菜单禁用，用这个可以禁止复制。

在中加入属性代码：

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()'

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

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/1…

outofmemory.cn/code-snippe…

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 mp.weixin.…](link.juejin.cn/?target=htt… http%3A%2F%2Fmp.weixin.qq.com%2Fs%2FLxdDsgPAGTx19T5BZnw6EQ)

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.cn/post/684490… https://juejin.cn/post/6844903465886416910 https://juejin.cn/post/1 https://juejin.cn/post/6844903508810940429

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

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

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

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

前端工作中的一些解决问题的方法，可以参考一下

前端工作中的一些解决问题的方法，可以参考一下

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

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

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

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

5、上传滚动条显示问题

6、IE6-IE8支持HTML5标签

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

8、改变滚动条样式

9、伪元素详解

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

11、js的日期时间格式化

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

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

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

15、图片上传/预览

16、某些CSS样式

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

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

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

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

21、Truthy

22、时间格式化

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

24、ajax的jquery同步/异步

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

26、byte的1024转换方法

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

28、获得浏览器版本信息

29、firefox hack

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

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

32、面试题综合

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

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

35、ie最高版本

36、两端对齐用法

37、打印功能相关

38、屏蔽浏览器返回按钮

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