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

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

    推荐阅读
  • 永劫无间高性能显卡设置(永劫无间NVIDIA亮点用户指南)

    自动触发集锦录制,分享游戏精彩瞬间,百分百投入游戏,不影响游戏性能。准备工作/即将开始工作要打开NVIDIAHighlights,您必须首先安装任何Nvidia显卡。除了打开高光,它还可以帮助您优化游戏设置,并获得游戏就绪的驱动程序。该软件将与显卡驱动程序一起安装在NVIDIA显卡随附的机器中。点击首页旁边的“驱动”按钮,自动检测显卡型号,提供最新版本的显卡驱动更新。

  • 9月29日是什么日子(世界步行日介绍)

    9月29日是什么日子09月29日对应节日:世界步行日。考虑到步行对所有人健康和快乐的诸多好处,国际健身与大众体育协会发起了世界步行日,时间为每年的9月29日。在2005年10月2日的世界行走日上,已经有超过72个国家的成员参加,世界行走日活动也得到了世界卫生组织的大力支持,并且与世卫组织每年开展的为健康而运动的项目相结合开展,每年有数百万参与者,已经成为了当今世界最有影响力的运动之一。

  • 女人补气吃什么好 女人吃什么补气养血最好最快

    山药莲子红枣粥糯米、山药、红枣、莲子、枸杞子各适量;莲子、红枣头天晚上泡好,山药洗净削皮,米洗干净,放到锅里加水煮沸,先大火煮沸,再小火继至食材熟软粥粘稠。

  • qq表情红包会被看到吗 自己发的表情红包别人看得到吗

    以qq8.4.8版本为例,QQ表情红包,对方是可以看到你的样子的,这个表情红包的皮肤就是自己弄这个红包的时候的样子,发过去之后对方显示的也是这个皮肤的样子。QQ是腾讯QQ的简称,是腾讯公司开发的一款基于Internet的即时通信软件。目前QQ已经覆盖MicrosoftWindows、OSX、Android、iOS、WindowsPhone、Linux等多种主流平台。腾讯QQ支持在线聊天、视频通话、点对点断点续传文件、共享文件、网络硬盘、自定义面板、QQ邮箱等多种功能,并可与多种通讯终端相连。

  • 超级本和笔记本的区别在哪(笔记本超级本区别)

    2、签于超级轻薄的概念,超级本没有光驱,所以超级本是靠U盘、无线传输等来读取资料等。

  • 杭州区域牌照格式(杭州区域牌照划分图)

    车辆号牌前面为浙A,后面第二、五位或第三、四位为大写英文字母,其余为数字。这样的机动车号牌是杭州的区域号牌,和正常的号牌明显不一样。杭州区域号牌出现违章怎么办如违反法律法规,可在国内任何一家车管所或公安机关交通管理部门办理。也可以用手机软件交通管理12123处理,只能处理交通违法11分及以下的违法行为,否则只能在车管所处理。

  • 网页被禁止浏览怎么解决(网页被禁止浏览的解决方法)

    我们一起去了解并探讨一下这个问题吧!网页被禁止浏览怎么解决用手机打开浏览器,点击菜单展开选项,进入设置。切换到安全设置,然后把网站安全云检测关闭即可,下次再打开就可以正常访问了。电脑打开Internet浏览器,把Internet选项中禁用全部改为启动,就可以解决部分网页被禁止浏览的情况。

  • 冬天为什么会长胖(冬天为什么会长胖2斤)

    娇艳欲滴的红石榴已经被证实具有很强的抗氧化作用。它含有一种叫鞣花酸的成分,可以使细胞免于环境中的污染、UV射线的危害,滋养细胞,减缓肌体的衰老。“番茄红素有植物黄金之称,它属类胡萝卜素的一种,是自然界中最强的抗氧化剂。”

  • 国学经典九句精髓(十大国学精语指点人生迷津)

    十大国学精语指点人生迷津在中国国学文化中,经典的名句比比皆是。道教学道修道,其目的就是要通过自身的修行和修炼,使生命返复到始初的状态。而学道修道,就是要使心性和生命返到纯朴纯真的状态。9心诚则灵,唯德感天心诚则灵,关键是要做到“心”、“诚”两点。10大道至简,淳朴自然大道至简,是中华道家哲学。道在中国哲学中,是一个重要的概念,表示“终极真理”。

  • 七步诗表达曹植的思想(是曹植在什么情况下写成的)

    在他所有的任性行为中,违背禁令私开司马门,行车于驰道应该是最为严重的。曹操在权衡再三之后,决定立曹丕为世子,在两人的角逐中,曹丕最终获胜。曹操去世后,曹丕继承魏王,他便对曹植及其辅翼人士的职位进行了一系列的调整,他们中的大多数人都离开了权利中心,有些人甚至因此丧命。曹丕尤其对曹植不放心,如果不是太后出面干涉,曹植早已丧命。