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

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

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

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

前端开发常用代码?作者:小明来源: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

    推荐阅读
  • 科目二倒车入库口诀b2科目(具体口诀讲解)

    科目二倒车入库口诀b2科目第一句口诀:先调座椅后定点位。离合控制练好了,就要注意车速,倒车入库有时间限制,不能太慢,为了不出错更不能太快,自己掌握好车速,方向盘的调整,在倒车入库中一定要谨记的一点,方向盘,宁愿早打也不晚打。

  • 八上英语课文翻译第九单元2b(八上英语课文翻译)

    八上英语课文翻译需要【八上英语课文翻译(人教版)】的完整资料,可以翻到文尾查看资料获取方式!Unit1Wheredidyougoonvacation?你去哪儿度假了?P1A:Tina去哪里度假了?B:她去山里了P2R。

  • 炉石战棋大威元素(炉石战棋大威元素要点介绍)

    炉石战棋大威元素大威元素流派作为近期版本出现的新流派,具有强力的随从身材buff壮大的能力。“厨房煞星”诺米,这张卡牌是元素流的核心之一,不断的刷新鲍威尔酒馆里的元素,可以实现全体元素随从身材不断增长的buff。单单是元素流派这张卡牌的作用其实比较有限,并不如“厨房煞星”诺米来得稳定。功能性的卡牌,爆裂飓风以及野火元素,具有圣盾,风怒以及造成超过目标生命值的伤害,是元素流最主要的输出来源之一。

  • 北京23个红色旅游景点(北京市文化和旅游局推出18条)

    北京市文化和旅游局推出18条【北京旅游网报道】春暖花开,桃红柳绿,清明前后不仅是追思逝者,更是踏青赏花、享受暖阳的好时节在人间最美的四月天,不少市民趁着清明假期参加祭扫活动,缅怀先烈,同时到户外踏青赏花、亲近大自然为方便市民清明。

  • 155开头的手机号码是什么地方的?(联通还有哪些类型的号码)

    下面希望有你要的答案,我们一起来看看吧!155开头的手机号码是什么地方的155这只是联通开通的号,并不是分布在某个地区,全国各地都有这个开头的号。联通的号段目前有:1111156,以及3G专用号段1185,无线上网卡号段为145。另外还有虚拟运营商专属号段170号段。

  • 加湿器无雾和有雾哪个效果好(加湿器是有雾的好还是没雾的好)

    有雾型加湿器也叫超声波加湿器,是市场上最常见的加湿器类型,其工作原理是:通过高频震荡将水打散成细小的颗粒,形成水雾,并将这些水雾分散到空气中来实现加湿。但是,这类加湿器在能耗问题上比起超声波加湿器和纯净型加湿器要消耗更多的电能,毕竟将水加热到产生蒸汽的过程是需要消耗较多电能的。

  • 新手适合玩什么女英雄(女玩家霸榜Q区巅峰第一)

    王者荣耀作为一款多人游戏,最开始的时候是最有意思的,但慢慢的王者荣耀出现了各种各样的争名夺利现象,比如排位要多少多少颗星,又比如巅峰赛上要排名多少多少名,也算是把人们压垮的不要不要的。因为目前的游戏环境太差,导致越来越多的玩家开始摆烂,只要心情不好,打开王者荣耀就是去恶心队友的。

  • 我不要挂科小游戏第24关怎么过(我不要挂科第24关攻略)

    点击马,把树和马拖给男主。主角布瓜是一个挣扎在挂科边缘的学渣,常常因为各种意外而挂科,迫切需要你的拯救!谢字不会写、考试迟到、打游戏开黑诱惑,各种挂科危机不断上演!快杜绝所有作弊手段,拿出你学霸的实力,才能获得61分,及格过关!趣味十足的游戏搭配了大量的文字和图片,有种暴走漫画的既视感在其中。想要不挂科就需要时刻想办法,虽然有很多阻挡的因素,但是不能放弃。

  • 韭菜的烤制方法(怎么烤好吃的韭菜)

    以下内容大家不妨参考一二希望能帮到您!韭菜的烤制方法烤韭菜的用料:韭菜适量,蒜蓉,辣酱适量,油适量,烧烤料适量。韭菜摘好,洗净控干水份,装锡纸盒备用。蒜蓉辣酱倒进碗内,加入适量油拌匀。用刷子均匀的刷上一层。预热烤箱200°,上下火,中层烤10分钟。烤好拿出,撒上烧烤料即可,好吃的韭菜就烤好啦!

  • 豆芽菜怎么种植家里(在家如何种植豆芽菜)

    豆芽菜怎么种植家里?管理事项放完豆子之后,第一天是不需要浇水的,第二天开始每天早晚各喷一次水,第四天左右,黄豆芽就差不多长到3-5厘米高了,此时就要每天喷水3-4次,以保持充足的水分供给,基本在6-7天左右,豆芽菜就可长到10厘米以上,此时就可以吃了。