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

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

    推荐阅读
  • 慰问信范文(慰问信范文模板)

    一元复始,万象更新,值此新春佳节到来之际,工商银行对您一向以来的支持致以崇高的敬意和新春的祝福。岁未年初是我们欢聚一堂、辞旧迎新的时刻,也是我们工行崇州支行孕育新的梦想,展望更高远的未来的时刻,在新的一年里,工行崇州支行将继续发展新业务,勇于创新,为您带给更好更贴心更便捷的服务,让您更满意,更放心,更安心。最后,工行崇州支行全体员工衷心祝愿您及家人节日愉快,阖家幸福,身体健康,万事如意!

  • 小米生态智能家居用什么智能开关(智能家居的实用性设置有哪些)

    我们也聊了很多智能家居的基本知识,市面上也有着各种各样的智能家居,那么智能家居的实用性设置究竟有哪些呢?首先做智能家居之前一定要考虑的两个问题:第一点就是从整体考虑,选择一个生态的产品,要考虑清楚产品之间的联动性。是智能家电,但不是智能家居。第二点就是要是自己搭建还是交给当地的智能家居服务商搭建。自己搭建就要选择产品线丰富,产品种类齐全的智能家居生态。

  • 一句话描述你喜欢的那个人(一句话描述你喜欢的那个人句子有哪些)

    一句话描述你喜欢的那个人他的名字贯穿我的一生。他眼中的春与秋胜过我见过爱过的一切山川与河流。我的意中人是个盖世英雄,我知道有一天他会在一个万众嘱目的情况下出现,身披金甲圣衣,脚踏七彩云来娶我。看见他的时候全身上下每一个细胞都在说着我想抱他想吻他。有的人从喜欢上的那一刻,就开始了漫长细碎的失恋。所爱隔山海,山海不可平。他路痴,到现在还没有找到我。始于颜值,陷于才华,忠于人品。

  • 营养土怎么用比较好(营养土应该怎么用)

    营养土怎么用比较好刚买回来的营养土需要暴晒消毒再用,避免有太多的有毒物质。其次选择一个合适且底部有孔的花盆,将营养土倒到大概四分之一的地方。营养土保水性不强,所以一般不建议单独使用。通常将它铺在花盆底部,跟少量黄土一起混合使用来增加保水性。因为每种植物的生长习性不同,所以在选择营养土上也会有所不同。而天竺兰是喜碱的植物,同理,则要挑选带有碱性的营养土。

  • 凯绅是什么车 凯绅车身尺寸

    凯绅一共搭载了两款发动机,一款是1.8升自然吸气发动机,另一款是1.6升涡轮增压发动机。与这款发动机匹配的是6速手自一体变速箱。与这款发动机匹配的是7速双离合变速箱。凯绅的前悬架使用了麦弗逊式独立悬架,后悬架使用了多连杆独立悬架。凯绅的外观设计是非常好看的,并且内饰设计也是很好看的。

  • 晚安代表什么意思(晚安有什么特殊的含义)

    晚安代表什么意思与早安相对应:早安,意味着一天美好的开始。一般对你说早安与晚安的人,都是希望你拥有一天美好的心情。人们在结束碰面前的最后一句话,往往都是晚安,也就意味着希望待会能做一个好梦。即wannan,人们解释为我爱你爱你,满满的情意在里面。

  • 解冻后的母乳还可以加热吗(解冻后的母乳怎么加热)

    浸泡时,要时不时地晃动容器使母乳受热均匀。使用恒温调奶器,温度设定在40℃,加热母乳。如果是冷冻的母乳,可能会出现分层的现象,这是正常的。常温保存下的母乳保存时间较短,妈妈要注意在存放母乳的瓶子上标注好时间,避免宝宝喝到过期的母乳而导致消化道疾病的发生。母乳常温保存时间初乳:27—32℃室温内可保存12个小时。给宝宝喂食前,妈妈要先摇匀,使水乳合为一体。

  • 新买的仙客来怎么养(新买的仙客来如何养护)

    新买的仙客来怎么养?新买的仙客来怎么养补水新买来的植物一般都会长得比较好,但是在养了它一周之后会发现它有非常多的黄叶子出现,而且也会倒伏,这个时候就需要给它补充水了,在上了水之后这一现象就会明显的改变。不过缺水只是其中一种原因,有时候并不是因为水的缺少才导致这样现象的产生,而是因为它尚未完全适应新的生活条件。这个时候就不能随意补水了,因为这样会导致它的根系腐烂。

  • 清洁铁勺子的方法(有什么清洗的技巧)

    以下内容希望对你有帮助!清洁铁勺子的方法新买来的铁勺,有很多铁锈不能使用,可用砂纸或磨刀石,先把铁锈磨掉,用清水刷洗两遍,放火上烧干,再擦上食用油或猪油,把锅烧热,放热水,刷干净,就可以使用了。生锈的铁勺泡在淘米水中数小时后,再用清水洗干净,铁勺上的铁锈会清除得干干净。

  • 红枣汤最简单的做法(简单、营养的红枣汤最简单的做法)

    下面更多详细答案一起来看看吧!红枣汤最简单的做法灰枣,皮薄也比较甜,梨汁红糖。准备好的银杏、红枣、马蹄。锅中放2大碗水,,烧开后到入所有食材,加2大勺红糖中小火煮20分钟,就可以了。