工作中遇到的一些问题和处理

hyx 2019-04-26 15:53:30 210次 0 2

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

//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 + "rnrn原文地址:"+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…

发表评论

注:*为必填

回复 的评论
*
选择
*
*