前端：分享一些实用的JS代码片段

今天给大家分享一些实用的JS代码片段，有需要的朋友欢迎收藏!

1、获取浏览器的版

1. functiongetBrowser(){
2. varUserAgent=navigator.userAgent.toLowerCase();
3. varbrowserInfo={};
4. varbrowserArray={
5. IE:window.ActiveXObject||"ActiveXObject"inwindow,//IE
6. Chrome:UserAgent.indexOf('chrome')>-1&&UserAgent.indexOf('safari')>-1,//Chrome浏览器
7. Firefox:UserAgent.indexOf('firefox')>-1,//火狐浏览器
8. Opera:UserAgent.indexOf('opera')>-1,//Opera浏览器
9. Safari:UserAgent.indexOf('safari')>-1&&UserAgent.indexOf('chrome')==-1,//safari浏览器
10. Edge:UserAgent.indexOf('edge')>-1,//Edge浏览器
11. QQBrowser:/qqbrowser/.test(UserAgent),//qq浏览器
12. WeixinBrowser:/MicroMessenger/i.test(UserAgent)//微信浏览器
13. };
14. //console.log(browserArray)
15. for(variinbrowserArray){
16. if(browserArray[i]){
17. varversions='';
18. if(i=='IE'){
19. versions=UserAgent.match(/(msie\s|trident.*rv:)([\w.]+)/)[2];
20. }elseif(i=='Chrome'){
21. for(varmtinnavigator.mimeTypes){
22. //检测是否是360浏览器(测试只有pc端的360才起作用)
23. if(navigator.mimeTypes[mt]['type']=='application/360softmgrplugin'){
24. i='360';
25. }
26. }
27. versions=UserAgent.match(/chrome\/([\d.]+)/)[1];
28. }elseif(i=='Firefox'){
29. versions=UserAgent.match(/firefox\/([\d.]+)/)[1];
30. }elseif(i=='Opera'){
31. versions=UserAgent.match(/opera\/([\d.]+)/)[1];
32. }elseif(i=='Safari'){
33. versions=UserAgent.match(/version\/([\d.]+)/)[1];
34. }elseif(i=='Edge'){
35. versions=UserAgent.match(/edge\/([\d.]+)/)[1];
36. }elseif(i=='QQBrowser'){
37. versions=UserAgent.match(/qqbrowser\/([\d.]+)/)[1];
38. }
39. browserInfo.type=i;
40. browserInfo.versions=parseInt(versions);
41. }
42. }
43. returnbrowserInfo;
44. }

2、颜色RGB转十六进制

1. functioncolorRGBtoHex(color){
2. varrgb=color.split(',');
3. varr=parseInt(rgb[0].split('(')[1]);
4. varg=parseInt(rgb[1]);
5. varb=parseInt(rgb[2].split(')')[0]);
6. varhex="#"+((1<<24)+(r<<16)+(g<<8)+b).toString(16).slice(1);
7. returnhex;
8. }

3、禁止右键菜单代码、禁止复制粘贴代码

1. "text/javascript">
2. //屏蔽右键菜单
3. document.oncontextmenu=function(event){
4. if(window.event){
5. event=window.event;
6. }
7. try{
8. varthe=event.srcElement;
9. if(!((the.tagName=="INPUT"&&the.type.toLowerCase()=="text")||the.tagName=="TEXTAREA")){
10. returnfalse;
11. }
12. returntrue;
13. }catch(e){
14. returnfalse;
15. }
16. }
17. //屏蔽粘贴
18. document.onpaste=function(event){
19. if(window.event){
20. event=window.event;
21. }
22. try{
23. varthe=event.srcElement;
24. if(!((the.tagName=="INPUT"&&the.type.toLowerCase()=="text")||the.tagName=="TEXTAREA")){
25. returnfalse;
26. }
27. returntrue;
28. }catch(e){
29. returnfalse;
30. }
31. }
32. //屏蔽复制
33. document.oncopy=function(event){
34. if(window.event){
35. event=window.event;
36. }
37. try{
38. varthe=event.srcElement;
39. if(!((the.tagName=="INPUT"&&the.type.toLowerCase()=="text")||the.tagName=="TEXTAREA")){
40. returnfalse;
41. }
42. returntrue;
43. }catch(e){
44. returnfalse;
45. }
46. }
47. //屏蔽剪切
48. document.oncut=function(event){
49. if(window.event){
50. event=window.event;
51. }
52. try{
53. varthe=event.srcElement;
54. if(!((the.tagName=="INPUT"&&the.type.toLowerCase()=="text")||the.tagName=="TEXTAREA")){
55. returnfalse;
56. }
57. returntrue;
58. }catch(e){
59. returnfalse;
60. }
61. }
62. //屏蔽选中
63. document.onselectstart=function(event){
64. if(window.event){
65. event=window.event;
66. }
67. try{
68. varthe=event.srcElement;
69. if(!((the.tagName=="INPUT"&&the.type.toLowerCase()=="text")||the.tagName=="TEXTAREA")){
70. returnfalse;
71. }
72. returntrue;
73. }catch(e){
74. returnfalse;
75. }
76. } /

4、检查日期是否合法

1. functionCheckDateTime(str){
2. varreg=/^(\d+)-(\d{1,2})-(\d{1,2})(\d{1,2}):(\d{1,2}):(\d{1,2})$/;
3. varr=str.match(reg);
4. if(r==null)returnfalse;
5. r[2]=r[2]-1;
6. vard=newDate(r[1],r[2],r[3],r[4],r[5],r[6]);
7. if(d.getFullYear()!=r[1])returnfalse;
8. if(d.getMonth()!=r[2])returnfalse;
9. if(d.getDate()!=r[3])returnfalse;
10. if(d.getHours()!=r[4])returnfalse;
11. if(d.getMinutes()!=r[5])returnfalse;
12. if(d.getSeconds()!=r[6])returnfalse;
13. returntrue;
14. }

5、英文字符串首字母大写

1. /**
2. *方法一：js字符串切割
3. *@param{*}str
4. */
5. functionfirstToUpper1(str){
6. returnstr.trim().toLowerCase().replace(str[0],str[0].toUpperCase());
7. }
8. /**
9. *方法二：js正则
10. *@param{*}str
11. */
12. functionfirstToUpper2(str){
13. returnstr.replace(/\b(\w)(\w*)/g,function($0,$1,$2){
14. return$1.toUpperCase()+$2.toLowerCase();
15. });
16. }
17. /**
18. *方法三：js正则
19. *@param{*}str
20. */
21. functionfirstToUpper3(str){
22. returnstr.toLowerCase().replace(/(|^)[a-z]/g,(L)=>L.toUpperCase());
23. }

6、计算2个日期之间相差多少天

1. functiongetDays(strDateStart,strDateEnd){
2. varstrSeparator="-";//日期分隔符
3. varoDate1;
4. varoDate2;
5. variDays;
6. oDate1=strDateStart.split(strSeparator);
7. oDate2=strDateEnd.split(strSeparator);
8. varstrDateS=newDate(oDate1[0],oDate1[1]-1,oDate1[2]);
9. varstrDateE=newDate(oDate2[0],oDate2[1]-1,oDate2[2]);
10. iDays=parseInt(Math.abs(strDateS-strDateE)/1000/60/60/24)//把相差的毫秒数转换为天数
11. returniDays;
12. }

7、生成随机十六进制颜色

1. functionrandomHexColor(){
2. //随机生成十六进制颜色
3. varhex=Math.floor(Math.random()*16777216).toString(16);
4. //生成ffffff以内16进制数
5. while(hex.length<6){
6. //while循环判断hex位数，少于6位前面加0凑够6位hex='0'+hex;}
7. return'#'+hex;//返回‘#'开头16进制颜色
8. }

8、数组去重

1. constremoveDuplicates=(arr)=>[...newSet(arr)];
2. console.log(removeDuplicates([1,2,3,3,4,4,5,5,6]));
3. //Result:[1,2,3,4,5,6]

9、从 URL 获取查询参数

1. functiongetParameterByName(name,url){
2. if(!url)url=window.location.href;
3. name=name.replace(/[\[\]]/g,"\\$&");
4. varregex=newRegExp("[?&]"+name+"(=([^&#]*)|&|#|$)"),
5. results=regex.exec(url);
6. if(!results)returnnull;
7. if(!results[2])return'';
8. returndecodeURIComponent(results[2].replace(/\+/g,""));
9. }

10、校验数字是奇数还是偶数

1. constisEven=num=>num%2===0;
2. console.log(isEven(2));
3. //Result:True

11、求数字的平均值

1. constaverage=(...args)=>args.reduce((a,b)=>a+b)/args.length;
2. average(1,2,3,4);
3. //Result:2.5

12、回到顶部

1. functiontopFunction(){
2. document.body.scrollTop=0;
3. document.documentElement.scrollTop=0;
4. }

13、翻转字符串

1. //reverse
2. varname="MycityisWH";
4. varresultStr=name.split('').reverse().join('');
5. console.log(resultStr);//HWsiyticyM//charAt
6. varname="MycityisWuHan";
7. varnameArr=name.split('');
8. varresultStr='';
9. for(vari=nameArr.length-1;i>=0;i--){
10. resultStr+=name.charAt(i);
11. }
12. console.log(resultStr);//naHuWsiyticyM

14、校验数组是否为空

1. constisNotEmpty=arr=>Array.isArray(arr)&&arr.length>0;
2. isNotEmpty([1,2,3]);
3. //Result:true

原文链接：https://mp.weixin.qq.com/s/xyuYoGz-iRbfo6FnfOyYUA