前端：分享一些實(shí)用的JS代碼片段

作者：小明 2021-10-31 07:36:17

JavaScript是世界上最流行的腳本語言，因?yàn)槟阍陔娔X、手機(jī)、平板上瀏覽的所有的網(wǎng)頁，以及無數(shù)基于HTML5的手機(jī)App，交互邏輯都是由JavaScript驅(qū)動(dòng)的。

天給大家分享一些實(shí)用的JS代碼片段，有需要的朋友歡迎收藏!

1、獲取瀏覽器的版

function getBrowser() { 
    var UserAgent = navigator.userAgent.toLowerCase(); 
    var browserInfo = {}; 
    var browserArray = { 
        IE: window.ActiveXObject || "ActiveXObject" in window, // IE 
        Chrome: UserAgent.indexOf('chrome') > -1 && UserAgent.indexOf('safari') > -1, // Chrome瀏覽器 
        Firefox: UserAgent.indexOf('firefox') > -1, // 火狐瀏覽器 
        Opera: UserAgent.indexOf('opera') > -1, // Opera瀏覽器 
        Safari: UserAgent.indexOf('safari') > -1 && UserAgent.indexOf('chrome') == -1, // safari瀏覽器 
        Edge: UserAgent.indexOf('edge') > -1, // Edge瀏覽器 
        QQBrowser: /qqbrowser/.test(UserAgent), // qq瀏覽器 
        WeixinBrowser: /MicroMessenger/i.test(UserAgent) // 微信瀏覽器 
    }; 
    // console.log(browserArray) 
    for (var i in browserArray) { 
        if (browserArray[i]) { 
            var versions = ''; 
            if (i == 'IE') { 
                versions = UserAgent.match(/(msie\s|trident.*rv:)([\w.]+)/)[2]; 
            } else if (i == 'Chrome') { 
                for (var mt in navigator.mimeTypes) { 
                    //檢測是否是360瀏覽器(測試只有pc端的360才起作用) 
                    if (navigator.mimeTypes[mt]['type'] == 'application/360softmgrplugin') { 
                        i = '360'; 
                    } 
                } 
                versions = UserAgent.match(/chrome\/([\d.]+)/)[1]; 
            } else if (i == 'Firefox') { 
                versions = UserAgent.match(/firefox\/([\d.]+)/)[1]; 
            } else if (i == 'Opera') { 
                versions = UserAgent.match(/opera\/([\d.]+)/)[1]; 
            } else if (i == 'Safari') { 
                versions = UserAgent.match(/version\/([\d.]+)/)[1]; 
            } else if (i == 'Edge') { 
                versions = UserAgent.match(/edge\/([\d.]+)/)[1]; 
            } else if (i == 'QQBrowser') { 
                versions = UserAgent.match(/qqbrowser\/([\d.]+)/)[1]; 
            } 
            browserInfo.type = i; 
            browserInfo.versions = parseInt(versions); 
        } 
    } 
    return browserInfo; 
}

2、顏色RGB轉(zhuǎn)十六進(jìn)制

function colorRGBtoHex(color) { 
    var rgb = color.split(','); 
    var r = parseInt(rgb[0].split('(')[1]); 
    var g = parseInt(rgb[1]); 
    var b = parseInt(rgb[2].split(')')[0]); 
    var hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); 
    return hex; 
}

3、禁止右鍵菜單代碼、禁止復(fù)制粘貼代碼

< script type = "text/javascript" > 
//屏蔽右鍵菜單 
document.oncontextmenu = function(event) { 
  if (window.event) { 
    event = window.event; 
  } 
  try { 
    var the = event.srcElement; 
    if (! ((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) { 
      return false; 
    } 
    return true; 
  } catch(e) { 
    return false; 
  } 
} 
//屏蔽粘貼 
document.onpaste = function(event) { 
  if (window.event) { 
    event = window.event; 
  } 
  try { 
    var the = event.srcElement; 
    if (! ((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) { 
      return false; 
    } 
    return true; 
  } catch(e) { 
    return false; 
  } 
} 
//屏蔽復(fù)制 
document.oncopy = function(event) { 
  if (window.event) { 
    event = window.event; 
  } 
  try { 
    var the = event.srcElement; 
    if (! ((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) { 
      return false; 
    } 
    return true; 
  } catch(e) { 
    return false; 
  } 
} 
//屏蔽剪切 
document.oncut = function(event) { 
  if (window.event) { 
    event = window.event; 
  } 
  try { 
    var the = event.srcElement; 
    if (! ((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) { 
      return false; 
    } 
    return true; 
  } catch(e) { 
    return false; 
  } 
} 
//屏蔽選中 
document.onselectstart = function(event) { 
  if (window.event) { 
    event = window.event; 
  } 
  try { 
    var the = event.srcElement; 
    if (! ((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) { 
      return false; 
    } 
    return true; 
  } catch(e) { 
    return false; 
  } 
} < /script>/

4、檢查日期是否合法

function CheckDateTime(str){ 
var reg = /^(\d+)-(\d{1,2})-(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/; 
var r = str.match(reg); 
if(r==null)return false; 
r[2]=r[2]-1; 
var d= new Date(r[1], r[2],r[3], r[4],r[5], r[6]); 
if(d.getFullYear()!=r[1])return false; 
if(d.getMonth()!=r[2])return false; 
if(d.getDate()!=r[3])return false; 
if(d.getHours()!=r[4])return false; 
if(d.getMinutes()!=r[5])return false; 
if(d.getSeconds()!=r[6])return false; 
return true; 
}

5、英文字符串首字母大寫

/** 
 * 方法一：js字符串切割 
 * @param {*} str  
 */ 
function firstToUpper1(str) { 
    return str.trim().toLowerCase().replace(str[0], str[0].toUpperCase()); 
} 
/** 
 * 方法二：js正則 
 * @param {*} str  
 */ 
function firstToUpper2(str){ 
    return str.replace(/\b(\w)(\w*)/g, function($0, $1, $2) { 
        return $1.toUpperCase() + $2.toLowerCase(); 
    }); 
} 
/** 
 * 方法三：js正則 
 * @param {*} str  
 */ 
function firstToUpper3(str){ 
    return str.toLowerCase().replace(/( |^)[a-z]/g,(L)=>L.toUpperCase()); 
}

6、計(jì)算2個(gè)日期之間相差多少天

function getDays(strDateStart,strDateEnd){ 
   var strSeparator = "-"; //日期分隔符 
   var oDate1; 
   var oDate2; 
   var iDays; 
   oDate1= strDateStart.split(strSeparator); 
   oDate2= strDateEnd.split(strSeparator); 
 var strDateS = new Date(oDate1[0], oDate1[1]-1, oDate1[2]); 
  var strDateE = new Date(oDate2[0], oDate2[1]-1, oDate2[2]); 
   iDays = parseInt(Math.abs(strDateS - strDateE ) / 1000 / 60 / 60 /24)//把相差的毫秒數(shù)轉(zhuǎn)換為天數(shù) 
   return iDays ; 
}

7、生成隨機(jī)十六進(jìn)制顏色

function randomHexColor() { 
//隨機(jī)生成十六進(jìn)制顏色 
 var hex = Math.floor(Math.random() * 16777216).toString(16); 
//生成ffffff以內(nèi)16進(jìn)制數(shù) 
 while (hex.length < 6) { 
//while循環(huán)判斷hex位數(shù)，少于6位前面加0湊夠6位  hex = '0' + hex; } 
 return '#' + hex; //返回‘#'開頭16進(jìn)制顏色 
}

8、數(shù)組去重

const removeDuplicates = (arr) => [...new Set(arr)];      
console.log(removeDuplicates([1, 2, 3, 3, 4, 4, 5, 5, 6])); 
// Result: [ 1, 2, 3, 4, 5, 6 ]

9、從 URL 獲取查詢參數(shù)

function getParameterByName(name, url) { 
    if (!url) url = window.location.href; 
    name = name.replace(/[\[\]]/g, "\\$&"); 
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), 
        results = regex.exec(url); 
    if (!results) return null; 
    if (!results[2]) return ''; 
    return decodeURIComponent(results[2].replace(/\+/g, " ")); 
}

10、校驗(yàn)數(shù)字是奇數(shù)還是偶數(shù)

const isEven = num => num % 2 === 0;      
console.log(isEven(2));  
// Result: True

11、求數(shù)字的平均值

const average = (...args) => args.reduce((a, b) => a + b) / args.length;      
average(1, 2, 3, 4); 
// Result: 2.5

12、回到頂部

function topFunction() { 
 document.body.scrollTop = 0;  
 document.documentElement.scrollTop = 0;  
 }

13、翻轉(zhuǎn)字符串

// reverse 
var name = "My city is WH"; 
 
var resultStr = name.split('').reverse().join(''); 
console.log(resultStr);  // HW si ytic yM// charAt 
var name = "My city is WuHan";  
var nameArr = name.split('');  
var resultStr = '';  
for (var i = nameArr.length-1; i >= 0; i--) {     
 resultStr += name.charAt(i);  
 }  
 console.log(resultStr); // naHuW si ytic yM

14、校驗(yàn)數(shù)組是否為空

const isNotEmpty = arr => Array.isArray(arr) && arr.length > 0;   
isNotEmpty([1, 2, 3]); 
// Result: true

責(zé)任編輯：姜華來源： IT技術(shù)分享社區(qū)

前端 JavaScript 編程