前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端:分享一些实用的JS代码片段

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

作者头像
IT技术分享社区
发布2021-11-02 16:17:56
9600
发布2021-11-02 16:17:56
举报
文章被收录于专栏:IT技术分享社区IT技术分享社区

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

1、获取浏览器的版本

代码语言:javascript
复制
function getBrowser() {
    var UserAgent = navigator.userAgent.toLowerCase();
    var browserInfo = {};
    var browserArray = {
        IE: window.ActiveXObject || "ActiveXObject" in window, // IE
        Chrome: 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转十六进制

代码语言:javascript
复制
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、禁止右键菜单代码、禁止复制粘贴代码

代码语言:javascript
复制
< 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>/
代码语言:javascript
复制

4、检查日期是否合法

代码语言:javascript
复制
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;
}
代码语言:javascript
复制

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

代码语言:javascript
复制
/**
 * 方法一: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());
}
代码语言:javascript
复制

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

代码语言:javascript
复制
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 ;
}
代码语言:javascript
复制

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

代码语言:javascript
复制
代码语言:javascript
复制
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进制颜色
}
代码语言:javascript
复制

8、数组去重

代码语言:javascript
复制
 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 ]
代码语言:javascript
复制

9、从 URL 获取查询参数

代码语言:javascript
复制
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, " "));
}
代码语言:javascript
复制

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

代码语言:javascript
复制
 const isEven = num => num % 2 === 0;     
 console.log(isEven(2)); 
 // Result: True
代码语言:javascript
复制

11、求数字的平均值

代码语言:javascript
复制
 const average = (...args) => args.reduce((a, b) => a + b) / args.length;     
 average(1, 2, 3, 4);
 // Result: 2.5
代码语言:javascript
复制

12、回到顶部

代码语言:javascript
复制
代码语言:javascript
复制
function topFunction() {
 document.body.scrollTop = 0; 
 document.documentElement.scrollTop = 0; 
 }
代码语言:javascript
复制

13、翻转字符串

代码语言:javascript
复制
代码语言:javascript
复制
// 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
代码语言:javascript
复制


14、校验数组是否为空

代码语言:javascript
复制
 const isNotEmpty = arr => Array.isArray(arr) && arr.length > 0;  
 isNotEmpty([1, 2, 3]);
 // Result: true
代码语言:javascript
复制

IT技术分享社区

个人博客网站:https://programmerblog.xyz

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-10-31,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 小明互联网技术分享社区 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1、获取浏览器的版本
  • 2、颜色RGB转十六进制
  • 3、禁止右键菜单代码、禁止复制粘贴代码
  • 4、检查日期是否合法
  • 5、英文字符串首字母大写
  • 6、计算2个日期之间相差多少天
  • 7、生成随机十六进制颜色
  • 8、数组去重
  • 9、从 URL 获取查询参数
  • 10、校验数字是奇数还是偶数
  • 11、求数字的平均值
  • 12、回到顶部
  • 14、校验数组是否为空
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档