工作中遇到的一些問題和處理

crystal7725本尊發表於2019-04-17

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 **/
}複製程式碼

/**
 * 判斷 當前瀏覽器的型號、版本資訊/* 需要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 + "\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);複製程式碼

vue工作中遇到的一些小問題
2018-08-13
Vue
工作中遇到的問題
2024-04-16
關於工作中遇到的問題
2020-05-30
有待整理的工作中遇到的問題
2015-10-23
Docker遇到的一些問題和感想
2022-03-03
Docker
Java工作中的併發問題處理方法總結
2021-02-07
Java
JavaScript 中遇到的錯誤問題，該怎麼處理？
2019-07-22
JavaScript
SqlServer遇到SPN_Service Principal name問題的處理方法
2021-04-02
SQLServer
如何處理六西格瑪過程中遇到的問題？
2023-03-14
面試中遇到的一些問題
2018-07-01
面試
小程式遇到的一些問題
2024-04-15
Speed框架許可權管理開發當中遇到的問題和處理方式
2019-07-30
框架
php使用mysqlnd引發的一些問題處理
2017-11-12
PHPMySql
影象處理中的一些基本問題解釋
2013-03-30
軟體編碼階段遇到問題的處理辦法
2007-06-16
[譯] 怎樣更好地使用 Vue：我在新工作中遇到的一些問題清單
2019-03-04
Vue
RDSforMySQLMysqldump常見問題和處理
2016-12-13
ORMMySql
打Oracle PSU時碰到的一些問題處理
2018-10-31
Oracle
2016年工作中遇到的問題11-20
2016-04-22
2016年工作中遇到的問題21-30
2016-06-04
關於時間 PHP 處理包遇到的問題時間序列化差值問題
2020-06-18
PHP
處理問題的方法
2010-11-10
xml處理的問題
2005-01-18
XML
docker開荒hyperf遇到的一些問題
2020-08-18
Docker
Android studio遇到的一些小問題
2017-10-21
Android
ElasticSearch安裝中遇到的一些問題
2017-09-22
Elasticsearch
C++以多型方式處理陣列可能會遇到的問題
2015-06-03
C++多型陣列
在 React 中處理資料流問題的一些思考
2019-02-27
React
在SQLServer處理中的一些問題及解決方法
2010-07-19
SQLServer
2015年工作中遇到的問題91-100
2015-10-15
【問題處理】使用trim和 replace處理字串中的換行符號
2010-03-24
字串符號
maven專案遇到的一些問題記錄
2018-04-22
Maven
專案中遇到的一些問題小結
2018-06-30
遊戲接入支付寶遇到的一些問題
2013-10-22
遊戲
hexo部落格搭建時遇到的一些問題
2015-09-06
Hexo
mysql的處理能力問題
2011-09-01
MySql
javafx jlink 遇到的非模組化的依賴打包報錯“模組異常”的問題和處理
2024-09-20
Java
記錄django-rest-framework處理微信支付notify_url遇到的問題
2019-02-16
DjangoRESTFramework