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

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

    推荐阅读
  • 我的世界中国版怎么下载(下载过程非常简单)

    下面希望有你要的答案,我们一起来看看吧!我的世界中国版怎么下载搜索“我的世界”,进入官网,点击“立即下载端游”,下载到电脑上。双击运行exe应用程序,安装游戏。《Minecraft》是一款风靡全球的第一人称视角的3D高自由度沙盒游戏。于2009年5月13日发行。其灵感来自《无尽矿工》,由瑞典游戏设计师马库斯·阿列克谢·泊松开创,现由MojangAB维护,是Xbox工作室的一部分。

  • 华为手机如何开启静音模式(华为手机怎么弄静音模式)

    如果不希望被打扰,可以打开华为手机的静音模式。进入到设置界面。找到声音这一栏,点击。将静音模式右边的键往右滑动就可以开启了。

  • 商业公寓和普通住宅有啥区别(如何选择商业公寓和普通住宅)

    普通住宅是指按所在地一般民用住宅建筑标准来建造的作为居住用途的房屋,目前多为多层住宅与高层住宅。住宅是指提供居住的房屋,包括别墅、公寓、职工家属宿舍和集体宿舍等。居住人群要看中居住环境,绿化,学校等配套。若是贷款购买住宅,首付比例通常不低于35%,但根据地区的差异,首付比例也会有所不同。另外,考虑到交通车程、生活配套以及教育地产的人群,小户型住宅更是优选。

  • 炒排骨怎么炒(炒排骨怎么炒才好吃)

    我们一起去了解并探讨一下这个问题吧!炒排骨怎么炒准备用料。将洗净沥干的排骨加盐进行搅拌,把鸡蛋打散,倒入排骨,加入淀粉抓匀,腌制十分钟。起锅,油七成热时,下排骨炸至金黄,捞出沥油,另起锅,下入葱、姜、排骨,翻炒均匀。加酱油、花椒、白胡椒,翻炒均匀,加入适量温水,中火收汁,出锅装盘即可完成。

  • 手动挡起步离合器和油门怎么配合(手动挡起步难吗)

    离合器半联动位置,意味着离合器压盘的作用力还不是很大,发动机和变速器之间会存在一定的转速差,造成离合器摩擦片有一定的摩擦磨损,利用摩擦磨损为发动机和变速器提供软连接,防止起步或换挡时出现冲击或振动。二慢离合器半联动位置,车主一定要进行较为精准的控制。

  • 梦见自己在宁静的大海里玩水(她梦见自己在水里睡着了)

    跟着小编一起来看一看吧!梦见自己在宁静的大海里玩水

  • 仓央嘉措写的情诗经典句(仓央嘉措犯相思的诗词)

    李白这首是典型的相思诗,而且写得很好。——仓央嘉措#仓央嘉措语录#读完这首诗,可以说前几句写的是很有气势,是在写景,写高山之雄伟,不可攀,天空上又升起了明月。东山崔嵬不可登,绝顶高天明月生。仓央嘉措这句,是直言不讳道出了相思的苦,这一点,就能引起很多犯相思的人共鸣。所以说仓央嘉措犯相思的诗词,尾句很出彩,道尽相思情:此心独忆是卿卿!

  • 刘丧到底是什么身份(很多人中毒二次发作)

    其次,刘丧实际上中毒的时间不长,毒性发作的比较慢。在剧中,我们可以看到刘丧之所以中毒,主要就是因为红顶水仙的陷害所导致的。相对于十一仓的其他人,他们中毒的时间比较长,毒性比较重,而刘丧中毒的时间比较短,毒性相对而言,自然就要弱很多。

  • 家庭网络的常识(看这一篇文章就够了)

    然后直接访问192.168.1.1进行注册,成功后将路由器lan1口还原到路由器wan口。83%,平台认证故障,检测所连接的网络是否可以正常访问Internet。3)光猫原数据未删除。

  • 凯迪拉克ct5的bose音响是标配的吗 凯迪拉克xt5有几个bose音响

    只有豪华、领先的运动版和铂金运动版才有bose音响。凯迪拉克ct5的2.0升涡轮增压发动机代号为LSY。这款发动机最大功率177kw,最大扭矩350Nm。与这台发动机匹配的是10at变速箱。凯迪拉克ct5的前悬挂采用麦弗逊式独立悬挂,后悬挂采用多连杆式独立悬挂。凯迪拉克ct5的长宽高分别为4924mm、1883mm和1453mm,轴距为2947mm。这辆车的后备箱容积是384升。最重要的是,凯迪拉克ct5是一款前置发动机后轮驱动的车。