今天給大家分享一些實用的JS代碼片段，有需要的朋友歡迎收藏！

? ? ? ? ? ? ? ?

1、獲取瀏覽器的版本

function getBrowser() {var UserAgent = navigator.userAgent.toLowerCase();var browserInfo = {};var browserArray = {IE: window.ActiveXObject || "ActiveXObject" in window, // IEChrome: 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轉十六進制

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、禁止右鍵菜單代碼、禁止復制粘貼代碼

< 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;} } //屏蔽復制 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、計算2個日期之間相差多少天

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)//把相差的毫秒數轉換為天數return iDays ; }

7、生成隨機十六進制顏色

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

8、數組去重

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 獲取查詢參數

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、校驗數字是奇數還是偶數

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

11、求數字的平均值

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、翻轉字符串

// 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、校驗數組是否為空

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

IT技術分享社區(qū)

個人博客網站：https://programmerblog.xyz

文章推薦程序員效率：畫流程圖常用的工具程序員效率：整理常用的在線筆記軟件遠程辦公：常用的遠程協(xié)助軟件，你都知道嗎？51單片機程序下載、ISP及串口基礎知識硬件：斷路器、接觸器、繼電器基礎知識

總結

以上是生活随笔為你收集整理的前端：分享一些实用的JS代码片段的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。