肥宅钓鱼网
当前位置: 首页 钓鱼百科

前端开发常用代码(分享一些实用的JS代码片段)

时间:2023-07-04 作者: 小编 阅读量: 1 栏目名: 钓鱼百科

前端开发常用代码?我们一起去了解并探讨一下这个问题吧!

前端开发常用代码?作者:小明来源:IT技术分享社区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; } ,下面我们就来说一说关于前端开发常用代码?我们一起去了解并探讨一下这个问题吧!

前端开发常用代码

作者:小明来源:IT技术分享社区

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循环判断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) => ab) / 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

    推荐阅读
  • 背部肌肉锻炼方法(怎么锻炼背部肌肉)

    背部肌肉锻炼方法引体向上(宽握距),可以采用引体向上(宽握距),掌心朝前握住横杠。如果你不能做全程动作,可以找一个教练帮忙或使用一个有助力的引体向上器做这一练习。在整个动作过程中都要保持膝关节弯曲和背部的前倾角度。让重量直接悬垂于体侧,双臂充分伸直。完成一只手的重复次数后,换另一只手进行。不要使用一个爆发性的发力动作,并要避免将身体上抬过高。在动作的顶点,保持身体直立,而不是向后倾斜。

  • 东坡肉要不要焯水(东坡肉属于什么菜系)

    东坡肉要不要焯水东坡肉用的是肥瘦相间的五花肉。在做之前五花肉需要先焯水,焯水的目的是为了方便刮除肉皮的细毛等。东坡肉又名滚肉、红烧肉是江南地区汉族传统名菜,属于浙菜系,以猪肉为主要食材。东坡肉的主料和造型大同小异,主料都是半肥半瘦的猪肉,成品菜都是码得整整齐齐的麻将块儿,红得透亮,色如玛瑙,夹起一块尝尝,软而不烂,肥而不腻。

  • 一年通常那几个时间上坟(一年通常上坟的时间介绍)

    我们一起去了解并探讨一下这个问题吧!一年通常那几个时间上坟清明节:清明节又叫踏青节,在仲春与暮春之交,也就是冬至后的第108天。是中国传统节日,也是最重要的祭祀节日之一,是祭祖和扫墓的日子。七月十五的复杂履历导致它的文化内涵比别的节日更加丰富。完颜绍元认为,七月十五最重要的文化核心是报本反始,也就是祖先崇拜。

  • pos机什么是一清机二清机(一清pos机.二清pos机如何辨别.二清千万别用)

    目前有很多人都在使用POS机,有些人并不知pos机分.一清机"和"二清机",杜绝使用二清机,就像开店没有营业执照一样!是指没有支付牌照的公司,没有这个牌照是不得进行清算工作的。往往是pos机的价格差异。贪图便宜,选择了低廉的pos机。所以在办理pos机时一定要了解清楚是否是正规一清机。

  • abab式词语一年级电子版(一年级ABB式词语大全)

    一年级我们开始学ABB式词语了,ABB式词语是三个字组成的叠词,其中第二字和第三字是一样的,我们在一年级词汇知识点就要开始学习积累并运用了。ABB词语知识考点1:给出例词,比如静悄悄,你需要写出相同格式ABB词语,可以写闹哄哄,空荡荡等。

  • 蜘蛛抱蛋是什么植物,怎么养护(蜘蛛抱蛋是什么植物,怎么养护呢)

    它又名一叶兰、一叶青,是一种比较流行的室内观叶植物。它之所以叫蜘蛛抱蛋,是因为它的果实很像蜘蛛蛋,而且它地下根茎的形状很像是蜘蛛。这样的温暖环境对于植株来说非常适宜,能够使它长得更好。

  • 墙砖背胶怎么处理掉(分别有什么办法)

    以下内容希望对你有帮助!墙砖背胶怎么处理掉去除瓷砖背胶可以用肥皂、许氨水、松节油等进行混合,将混合液涂抹到背胶处,静置半小时后,就能比较轻松去除,对于一些顽固的背胶,可以用信钠水、油漆稀料进行擦拭就能去掉,此外还可以用吹风机加热,软化后就能轻易清除。化学物质去除要小心,要了解自己瓷砖的材质,小心使用。使用加热的方式让胶的黏胶软化:用吹风机吹一下使黏胶软化,当胶的黏著力变弱,就可以较轻易的清除。

  • 颜文字幸福的表情符号(最让人火大的颜文字表情符号)

    最让人火大的颜文字表情符号常上微博的的人,应该有发现很多人非常喜欢用颜文字的表情符号吧?像MoMo本身就有一些愛用的表情符号,在只能用文字跟大家沟通的網网络,若是使用一些可愛的表情,感觉別的有趣~还能充分表先当下下MoMo內心。

  • 被褥螨虫怎么去除(被褥螨虫怎么去除需暴晒几个小时)

    但如果仅仅只是一躺在床上就感觉到全身痒的话,可能跟床单的材质等东西过敏,或是床上有跳蚤、蚂蚁等叮咬后导致的瘙痒有关。

  • 纯棉面料缩水多少算是正常的(为什么全棉会缩水)

    在浸水洗涤时,水分会使纤维分子间的联系逐渐减弱,纤维表面的摩擦力降低,使暂时的“稳定”状态被破坏,纤维就会恢复或接近原先的平衡状态。一般来说,织织造和染整过程中,要拉伸多次,施加张力较大的织物缩水率就大,反之就小。但是经过预缩处理不等于不缩水,而是指缩水率控制在国标3%—4%%以内。