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

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

    推荐阅读
  • 内存单双通道差别大吗 内存双通道好还是单

    双通道是指内存的读、写使用不同的通道,可以同时读和写,内存带宽翻倍。就像停车场的出入口各自独立分开,出入同时进行,互不影响;2、内存带宽翻倍会带来系统性能提升,但并不代表系统性能翻倍。如果原来运行某些大型游戏时,由于内存带宽问题有点吃力,双通道带来的性能提升就能明显感觉到。上网聊天看电影什么的就没有区别了。

  • 空调被可以洗吗(空调被可以洗吗会脱棉吗)

    3、尽量选择中性洗涤剂,避免非中性洗涤剂腐蚀空调被。

  • 两冲摩托车怎么调开阀 两冲摩托车怎么调开阀时间

    化油器的混合气螺丝是顺时针拧入混合气调稀,逆时针旋出混合气调浓。摩托车化油器多采用此种形式。

  • 妇女节祝贺词(三八妇女节的祝福语录)

    妇女节祝贺词你是一阵温柔的风,吹来幸福的涟漪;你是一束芬芳的花,带来爱情的甜蜜;你是一支彩色的笔,绘出家庭的美丽。妇女节到了,祝你节日快乐,身体健康!三八妇女节即将来临,提前祝你开心愉快!三八妇女节,驱散所有的疲惫,愿你好好休息,开心的度过这个属于自己的节日。妇女节里笑容翻飞,欢乐不退!三八妇女节来到,我懂你四百分:百分百的健康,百分百的喜悦,百分百的幸福,百分百的悠闲。

  • 如何让宝宝不吐奶 怎样让宝宝不吐奶

    如宝宝吐奶频繁,每次喂奶量不宜过多,可少量多次。吐奶呛奶这样处理如果宝宝呛奶了,千万不能竖着抱起来,以免奶水呛入肺部。宝宝大小便量每天约有4~6片湿透的纸尿片,尿色浅或接近无色,无异味。体重增加第一个月,每周增重约110~200g;出生后2~6个月,每月体重增加450~670g;出生后6~12个月,体重每月增加350~450g。

  • 造谣生事的意思 形容造谣生事

    2、成语出处:鲁迅《书信集·致黎烈文》:“而漂聚于上海者,实尤为古怪,造谣生事,害人卖友,几乎视若当然。”

  • 仙客来养护应把握哪些关键环节(仙客来养护技术)

    仙客来在开花的时候,一定注意,要暂停施肥,同时浇水也不要忽多忽少的。

  • 螺旋藻哺乳期可以吃吗 哺乳期可以吃磷脂和螺旋藻吗?

    螺旋藻是一种很健康的保健品,一般来说螺旋藻吃了对我们的身体可以起到保健的效果,那么螺旋藻哺乳期可以吃吗?螺旋藻哺乳期可以吃吗哺乳期是可以服用螺旋藻来调理身体的。螺旋藻富含优质的蛋白质和人体必需的氨基酸,是目前发现的蛋白质含量较高且品质较好的理想食物资源,哺乳期服用螺旋藻能够为宝宝提供更优质的母乳。此外螺旋藻还可以用于调理因产后营养不均衡而造成的肥胖症或因缺铁性、缺叶酸性贫血症。

  • 部编版二年级语文下册词语复习(部编版二年级下册语文词语综合分类盘点)

    部编二下词语分类盘点第一单元词语搭配1.动词搭配:(脱掉)棉袄(冲出)家门(奔向)田野(寻找)春天2.形容词搭配:(害羞)的小姑娘(解冻)的小溪(难忘)的日子(兴致勃勃)地挖着(绿油油)的小柏树(精心)地挑选词语归类1.AABB式的词语:遮遮掩掩躲躲藏藏叮叮咚咚高高兴兴快快乐乐2.ABCC式的词语:兴致勃勃人才济济仪表堂堂第二单元词语搭配(长长)的小溪(迷路)的孩子(蒙蒙)的细雨(年迈)的大娘(晶

  • 制作五香豆腐干的全过程(豆腐干别在外面买了)

    大家好,我是明月,今天教大家用豆腐做成五香豆腐干。没有烤箱的朋友用电饼铛烙一下也可以。