【前端实用工具】一些实用函数记录(JavaScript)

【前端实用工具】一些实用函数记录

    • 1.返回一个对象里面包含后一个数组比第一个数组增加、减少的数据
    • 2.计算天数差
    • 3.获取当月收尾日期
    • 4.获取当前日期前n天
    • 5.时间选择范围
    • 6.RGB颜色值转换成十六进制颜色码
    • 7.检查密码强度,判断是否弱密码

不定时更新,有的在以前的帖子不做搬运。
如有更好的写法请联系我!!!
在utils.js文件里声明然后在需要的地方引用即可

1.返回一个对象里面包含后一个数组比第一个数组增加、减少的数据

/**
 * 方法名:
 * 功能介绍:返回一个对象里面包含后一个数组比第一个数组增加、减少的数据(适用于去重过后的数组)
 * 参数:
 * beforeArr:前一个数组
 * afterArr:后一个数组
 */
export function compare(beforeArr, afterArr) {
  let resObj = {
    add: [],
    del: []
  },
    cenObj = {};
  //把beforeArr数组去重放入cenObj 
  for (let i = 0; i < beforeArr.length; i++) {
    cenObj[beforeArr[i]] = beforeArr[i];
  }
  //遍历afterArr,查看其元素是否在cenObj中
  for (let j = 0; j < afterArr.length; j++) {
    if (!cenObj[afterArr[j]]) {
      resObj.add.push(afterArr[j]);
    } else {
      delete cenObj[afterArr[j]]
    }
  }
  for (k in cenObj) {
    resObj.del.push(k);
  }
  return resObj;
}

2.计算天数差

/**
 * 方法名:
 * 功能介绍:计算天数差
 * 参数:
 * sDate1:2006-12-18格式  
 * sDate2:2006-12-18格式  
 */
export function DateDiff(sDate1, sDate2) {    //sDate1和sDate2是2006-12-18格式  
  var aDate, oDate1, oDate2, iDays
  aDate = sDate1.split("-")
  oDate1 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0])    //转换为12-18-2006格式  
  aDate = sDate2.split("-")
  oDate2 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0])
  iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24)    //把相差的毫秒数转换为天数  
  return iDays
}

3.获取当月收尾日期

/**
 * 方法名:
 * 功能介绍:获取当月收尾日期
 * 参数:
 * day:日期
 */
export function getFullDate(day) {
  var date = new Date();
  var year = date.getFullYear();
  var month = date.getMonth();
  var sDate = new Date(year, month, 1)
  var eDate = new Date(year, month + 1, 0)
  return [sDate, eDate]
}

4.获取当前日期前n天

/**
 * 方法名:
 * 功能介绍:获取当前日期前n天
 * 参数:
 * day:日期
 */
export function getNDate(day) {
  var date = new Date();
  var base = new Date(date).getTime();
  var oneDay = 24 * 3600 * 1000;
  var date = [];
  var data = [Math.random() * 300];
  var time = new Date(base);
  date.push([time.getFullYear(), time.getMonth() + 1, time.getDate()].join('-'));
  for (var i = 1; i < day; i++) {//控制需要的天数
    var now = new Date(base -= oneDay); //这里控制往前一周还是往后一周
    date.push([now.getFullYear(), (now.getMonth() + 1) >= 10 ? (now.getMonth() + 1) : '0' + (now.getMonth() + 1), now.getDate() >= 10 ? now.getDate() : '0' + now.getDate()].join('-'));
    data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
  }
  var newdate = date.reverse(); //往后一周的话需要将数组倒叙,完后不需要
  return newdate
}

5.时间选择范围

/**
 * 方法名:
 * 功能介绍:时间选择范围 
 * 参数:
 * strDate :字符串日期 如:'2019-01-01'
 * n:当前为0,前一天为-1,后一天为1
 */
export function getBeforeDate(strDate, n) {
  var datt = strDate.split('-');//这边给定一个特定时间
  var newDate = new Date(datt[0], datt[1] - 1, datt[2]);
  var befminuts = newDate.getTime() + 1000 * 60 * 60 * 24 * parseInt(n);//计算前几天用减,计算后几天用加,最后一个就是多少天的数量
  var beforeDat = new Date;
  beforeDat.setTime(befminuts);
  var befMonth = beforeDat.getMonth() + 1;
  var mon = befMonth >= 10 ? befMonth : '0' + befMonth;
  var befDate = beforeDat.getDate();
  var da = befDate >= 10 ? befDate : '0' + befDate;
  var newDate = beforeDat.getFullYear() + '-' + mon + '-' + da;
  return newDate;
}

6.RGB颜色值转换成十六进制颜色码

/**
 * 方法名:
 * 功能介绍:RGB颜色值转换成十六进制颜色码
 * 参数:
 * hexColo:RGB颜色值 
 * alpha:透明度
 */
export function getColor(hexColor, alpha = .5) { 
  // 移除 # 号并提取颜色值
  var hex = hexColor.replace('#', '');

  // 将颜色值拆分成 R、G、B 三个部分
  var r = parseInt(hex.substring(0, 2), 16);
  var g = parseInt(hex.substring(2, 4), 16);
  var b = parseInt(hex.substring(4, 6), 16);

  // 转换为 RGBA 格式并添加透明度
  var rgba = `rgba(${r}, ${g}, ${b}, ${alpha})`

  return rgba;
}

7.检查密码强度,判断是否弱密码

/**
 * 方法名:
 * 功能介绍:检查密码强度,判断是否弱密码
 * 参数:
 * pwd:密码 
 */
 export function checkPwdStrong(pwd) {
  let score = 0
  // 必须同时包含数字和大小写字母,不小于六位
  if ((!pwd || pwd.length < 6) || (!/^(?=.*[0-9].*)(?=.*[a-z].*)(?=.*[A-Z]).{6,20}$/.test(pwd))) {
    return score
  }
  score++
  // 密码包含下划线
  if (/[_]/.test(pwd) || /^[A-Z]+$/.test(pwd)) {
    score++
  }
  return score
}


<ul class="pwd-strong">
      <li :class="{ weak: pwdLevel === 0 }"></li>
      <li :class="{ better: pwdLevel === 1 }"></li>
      <li :class="{ strong: pwdLevel === 2 }"></li>
    </ul>
computed: {
    // 密码强度等级
    pwdLevel() {
      return checkPwdStrong(this.user.newPassword);
    },
  },

你可能感兴趣的:(前端实用工具,前端,javascript,开发语言)