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

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

    推荐阅读
  • 直流双路电源自动切换电路图(通过原理图讲清楚双电源自动切换电路实现过程)

    主电源断电,备用电源通过主接触器的常闭点导通。常开触点恢复初始断开状态,主线路断开。接触器和继电器在通断电的时候有时间差,对用电要求很高的设备或者电器会有短暂的反应。PC级双电源切换开关没有短路保护功能,用户是否额外增加断路器应根据电路系统是否需要来考虑。双电源切换开关它的作用是实现双路电源转换作用,有无短路保护功能不会对它的运行影响。

  • 手链和手表同时怎么戴(手表带左手还是右手)

    不过大部分情况下,一般都会把手表戴在左手上。还有一种比较传统的“男左女右”的说法,男士手表都是戴在左边,而女士就是戴在右边。手表戴右边上面说过男左女右的手表戴法,有些男生会觉手表戴在右边太娘气,但这种说法是比较片面的,国外有非常多的人就是把手表戴在右边,也有是因为有些人是左撇子。

  • iPhone iphone13

    线性马达又分为横向和纵向两种,iPhone所用的就是更高级的横向线性马达。横向线性马达可以提供媲美实体按键的按压反馈,让用户以为home键真的能按下去,而普通的纵向线性马达只有一层表面的震感,没有立体和真实的按压感,两者之间差距非常巨大。每天手机拿在手上要感受上百次的震动反馈,越真实越舒适的震动无疑会拥有更优良的使用体验。

  • 移动硬盘连接电脑无法识别(移动硬盘连接到电脑以后无法被识别)

    移动硬盘连接电脑无法识别将一块移动硬盘连接到一台windows操作系统的电脑中,在使用移动硬盘的过程中发生错误,导致电脑死机,接着重新启动电脑,启动后在我的电脑中找不到移动硬盘的盘符。此类故障多数是由于硬件驱动程序损坏引起的,一般恢复注册表或恢复系统即可解决问题。

  • 苹果手机微信图片怎么撤回(苹果手机微信图片如何撤回)

    接下来我们就一起去研究一下吧!苹果手机微信图片怎么撤回工具/原料:iphoneiOS14.微信7.0.21打开微信进入,选择需要撤回图片的联系人。在下方弹出的提示内,点击确定。确定后,即可将发送的图片撤回。

  • 环卫精细化扮靓城市颜值(奋斗百年路安徽创辉煌)

    疫情突发,党支部临危受命靠前指挥2021年5月13日突发的新冠疫情,打破了六安主城区的宁静,也唤起了六安中环洁全体党员干部和广大职工的责任意识,激发了直面挑战的担当精神。疫情就是命令,防控就是责任。六安中环洁党支部书记兼项目总经理包利斌迅速反应,立即召开紧急会议,针对新冠疫情启动应急预案。为此,该公司严格执行政府防疫要求,积极响应市、区两级领导的号召,配合政府进行各项防疫工作,全力提高消杀防疫工作能力。

  • 成语面目狰狞是什么意思(成语面目狰狞的意思)

    下面更多详细答案一起来看看吧!成语面目狰狞是什么意思面目狰狞,汉语成语,拼音是miànmùzhēngníng,意思是形容面目凶狠可怕;亦作“面貌狰狞”、“狰狞面目”。出自清·吴趼人《九命奇冤》第13回:“另外还有两人……都是身材骄健,面目狰狞。”

  • 孔明算命术(孔明的七星续命术是真是假)

    七星续命是三国国演义中孔明在五丈原,为了延续自己的生命而点的灯。“若七日内主灯不灭,吾寿可增一纪”,但最后因魏延迅速入帐,使灯熄灭。此事见于三国演义104回。后来却因为魏延打翻了一盏,导致孔明归天。

  • 有人问你粥可温全诗(有人问你粥可温全诗(是什么)

    有人问你粥可温全诗?下面更多详细答案一起来看看吧!回首向来萧瑟处,无人等在灯火阑珊处;给人一种寂寥、-缕忧思,特别是结尾的“无人与我立黄昏,无人问我粥可温”,瞬间给人一种凄凄惨惨戚戚的感觉,好吧,可怜的空巢少年,明年的腊八节,我们一起过吧!

  • 中苏关系什么时候恢复的(为什么中苏关系会突然破裂)

    1949年,新中国成立后,苏联作为社会主义老大哥,第一时间承认并与中国建交。斯大林执政期间,中苏两国关系处于蜜月期,友谊达到顶峰。第二个阶段是斯大林去世后,赫鲁晓夫成为苏联第三位话事人。中苏关系恶化的根本原因只有一个:苏联企图侵犯中国主权。种种因素之下,在经过短暂的蜜月期后,中苏关系在赫鲁晓夫上台后迅速破裂,甚至双方一度陈兵边境。但苏联对中国主权抱有幻想,那绝不能容忍。