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

时间：2022-09-13 19:05:14

今天给大家分享一些实用的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

标签：

相关文章