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

前端开发常用代码(分享一些实用的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

    推荐阅读
  • 台帽是什么部位(台帽是什么部位图片)

    台帽是1996年公布的公路交通科学技术名词。台帽通常位于桥台位置,所谓的台帽和盖梁其实是一个概念。台帽是做在台身上面用来放置梁板等上部结构的一种构件。

  • 深圳购房需要什么条件(在深圳满足什么条件才能购房)

    在深圳满足什么条件才能购房1、深户:深户居民家庭、成年单身人士(含离异)须在深圳市落户满三年,且能提供购房之日前在本市连续缴纳36个月及以上个人所得税或社会保险证明①深户家庭可以购买2套(夫妻双方有一方是深户即满足深户家庭条件。

  • 校园中的那些直男(得不到也没有那么重要了)

    在我的心底,一直埋藏着那一段只属于我一个人同性恋爱情。我们就是这么两个极端的存在,却没想到能成为最好的朋友。虽然有很多过程我已经淡忘,可是这种感觉,却至今都没有再次出现过。对于我来说也算一种享受。还佯装做势的把我一把搂在怀里。该来的总是会来的,青春年期的萌动终于在你的身上发生了,你在第二个学期交了一个女朋友。本来就是两个世界的人,联系了,也只会给自己徒增烦恼罢了。

  • 清淡大鱼怎么做(做鱼的步骤是什么)

    以下内容大家不妨参考一二希望能帮到您!清淡大鱼怎么做洗净的鱼切块,放碗里加适量盐,料酒和几片姜腌制半小时。大葱白,姜,蒜,香葱分别切末。把酱油蚝油白糖醋适量水调成汁。锅里放油,把鱼入锅中小火煎至两面发黄捞出。再把调好的汁倒入,再加少许水没过鱼块,中小火烧至收汁即可。

  • 周杰伦李健谢霆锋(周杰伦庾澄庆李健谢霆锋175天团出道)

    周杰伦李健谢霆锋6月20日,《中国新歌声》举行第三季发布会,谢霆锋、李健、庾澄庆、周杰伦组成的导师团首次合体亮相。这也是从《中国好声音》到《中国新歌声》举办七年首次迎来全男导师阵容。周杰伦庾澄庆李健谢霆锋亮相有细心的网友查询公开资料发现,本季《新歌声》四位导师的官方身高居然都是175cm。周杰伦庾澄庆李健谢霆锋公开身高均为175对此,不少网友在感叹巧合的同时也表达了对175club组团出道的欢迎。

  • 玫瑰花语颜色代表什么(玫瑰花颜色寓意)

    而对于爱情,黄玫瑰就算是一种不祥之物了,因为它代表失恋和消逝的爱,甚至是一种嫉恨的表达。在日本,黄玫瑰是分手的代表礼物。不过在有些地方,黄玫瑰还代表着等待,等待属于你们的爱情。

  • 肝癌晚期是不是最后都很痛苦(肝癌进入晚期身体会有5个)

    尤其是患上了肝癌没有在早期发现病情,患者没有得到有效的治疗,病情进化为晚期之后人体就会承受以下五大折磨!晚期的肝癌会给患者带来不少的痛苦和折磨,这个时候肝癌已经失去了最佳治疗时机,只能通过治疗使癌细胞扩散、转移的情况减慢,尽量帮助患者减轻痛苦,提高生活质量,使生命周期延长。

  • 钧窑挂红瓶子(钧窑挂红价值连城)

    北宋官造钧瓷,其势沉重古朴,明亮而深沉。北宋官窑钧瓷的发色和纹理大小和分布,都能做到人为控制而恰到好处,是北宋瓷艺的最高工艺水平的体现。可见当时钧瓷产生的轰动效应。于是各地群相仿效,窑口林立,但至今仍然不得要领。钧窑瓷器历来被人们称之为“国之瑰宝”,在宋代五大名窑中以“釉具五色,艳丽绝伦”而独树一帜。2021年拍卖市场高古瓷TOP10,钧窑则占据了半壁江山,且成交价均高于1000万,值得关注。

  • 城市迷走症是什么意思(什么叫迷路症)

    城市迷走症在网上引发网友热议。3、“迷走”二字看来有些在现实生活中梦游的意味。

  • c1科三挂了五次(考科三连续4次被私家车别停)

    有时候教练有事不能在现场指导大家练车,王先生就会承担起“教练”的角色。在科目三考试过程中,无故停车是会被判不合格的。王先生很生气,他拿到驾照后报了警,但是调查不出有利证据,也没有办法,他只能自认倒霉。全科通过后,办驾驶证要交工本费。对于驾校乱收费的情况,驾校的主管部门会进行调查。经过调查核实,物价局会责令驾校将违规收取的钱款退还给学员,并且对驾校乱收费的行为作出处罚。