一些方法合集,记录一下,方便CV,不定时更新

1、根据选择/输入的日期计算年龄

    getage(date){
      if(date){
        let d = new Date(date)
        let t = d.getTime(d)
        var t1 = Date.parse(new Date());
        let t2 = (t1 - t) / 1000 / (60 * 60 * 24 * 30 * 12)
        return Math.floor(t2)
      }else{
        return '请选择'
      }
    },

使用:
 

 watch:{
    'ruleForm.date1':{
      deep:true,
      handler(val){
        // val:就是时间,这里是中国标准时间,YYYY-MM-DD格式也可以
        if(val){
          this.ruleForm.age = this.getage(val)
        }else {
          this.ruleForm.age = ''
        }
      }
    }
  },

2、el-form v-model多层嵌套下的rules验证

首先数据格式

      perinfor: {
        assessName: "个人用户信息",
        answers: {
          height: "",
          weigth: "",
          BMI: "",
          XY: "", 
          XL: "",
          times: "",
          ryTimes: new Date(),
          LNBLE: "",
          LNWhy: [],
        }
      }

重点来了,直接将rules写在HTML里就可以实现验证了

<el-form
    :model="perinfor.answers"
    :rules="perinfor.rules"
    ref="perinforForm"
    >

        <el-form-item
           :rules="{
                required: true, message: '请输入身高', trigger: 'blur'
            }"
           label="体重:" 
           prop="weigth"
        >
              <el-input
                 v-model="perinfor.answers.weigth"  
                 oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
                 placeholder="- -">
              </el-input>

        </el-form-item>        

 </el-form>

3、获取滚动条距离顶部/底部的距离

    getscell() {
      this.$nextTick(() => {
        var dom = document.getElementById("dom"); // 存在滚动条的DOM
        bady.onscroll = () => {
          // 距离顶部
          var scrollTop = bady.scrollTop;
          // 可视区高度
          var windowHeight = bady.clientHeight;
          // 总高度
          var scrollHeight = bady.scrollHeight;
          if (scrollTop + windowHeight >= scrollHeight) {
            // 距离顶部scrollTop + 可视区高度windowHeight >= 总高度scrollHeight 就是到底了
            console.log("触底");
          }
        };
      });
    },

4、去除overflow-y产生的滚动条

当overflow出现滚动条时 
<--在.maskcon上设置overflow-->
.maskcon {
  overflow-y: auto;
}
<--这个会隐藏滚动条-->
.maskcon::-webkit-scrollbar {
    display: none;
}

5、更换obj对象的key为想要的字段

更换对象的key为想要的字段

let obj = {
  a: "sddfa",
  b: 1,
  c: [1, 2, 3],
  d: {
    ac: 11,
  },
  e: function () {
    return 1;
  },
};
var keyMap = { a: "序列", b: "姓名", c: "Coco" };
 
let obj2 = Object.keys(obj).reduce((newData, key) => {
  let newKey = keyMap[key] || key;
  newData[newKey] = obj[key];
  return newData;
},{});
 
console.log("XXXXXXXXXXXXXXXXXXXXX", obj2);

6、给一个数字,三个数组,得到 (数字 - 每个数组中任取一个元素 和),并去重排序

    // 输入任意三个数组,以及减数。得到不重复的从小到大排序的
    getnum(subtraction, arr1, arr2, arr3) {
      // 所有结果
      let arr = [];
      // 去重
      var result = [];
      var hash = {};

      if ((subtraction, arr1, arr2, arr3)) {
        for (let a = 0; a < 1000000; a++) {
          var arr1index = Math.floor(Math.random() * arr1.length);
          var arr2index = Math.floor(Math.random() * arr2.length);
          var arr3index = Math.floor(Math.random() * arr3.length);
          arr.push(100 - arr1[arr1index] - arr2[arr2index] - arr3[arr3index]);
        }

        for (var i = 0, elem; (elem = arr[i]) != null; i++) {
          if (!hash[elem]) {
            result.push(elem);
            hash[elem] = true;
          }
        }

        for (var i = 1; i <= result.length - 1; i++) {
          //内层循环
          for (var j = 0; j <= result.length - 1 - i; j++) {
            //比较当前数字result[j]与下一个数字result[j+1]的大小关系,如果result[J]大于result[j+1]则互换位置
            if (result[j] > result[j + 1]) {
              result[j] ^= result[j + 1];
              result[j + 1] ^= result[j];
              result[j] ^= result[j + 1];
            }
          }
        }
        console.log(`共有${result.length}条数据`)
        console.log("它们是:", result.toString());
        return result;
      } else {
        alert("参数不全!");
      }
    },

第二种方法

    let arr1 = [0, 2, 10, 15, 20];
    let arr2 = [0, 2, 10, 15, 20];
    let arr3 = [0, 2, 5, 10, 15];
    let newArr = [];
    arr1.forEach((item) => {
      arr2.forEach((item2) => {
        arr3.forEach((item3) => {
          newArr.push([item, item2, item3]);
        });
      });
    });
    let sumArr = [];
    newArr.forEach((item) => {
      sumArr.push(100 - item[0] - item[1] - item[2]);
    });
    let now = new Set(sumArr);
    console.log(now, "now");

6、输入开始时间,结束时间,获取这段时间内的每一天是几号

// 获取x轴,选择了时间间隔,计算开始时间到结束时间中的每一天
    // 获取间隔天数
    function getDays(day1, day2) {
      // 获取入参字符串形式日期的Date型日期
      let st = day1.getDate()
      const et = day2.getDate()

      const retArr = []

      // 获取开始日期的年,月,日
      const yyyy = st.getFullYear()
      const mm = st.getMonth()
      let dd = st.getDate()

      // 循环
      while (st.getTime() !== et.getTime()) {
        retArr.push(st.getYMD())

        // 使用dd++进行天数的自增
        st = new Date(yyyy, mm, dd++)
      }

      // 将结束日期的天放进数组
      retArr.push(et.getYMD())

      console.log('获取的横坐标', retArr.slice(1, retArr.length)) // 或可换为return ret;
      xData.value = retArr.slice(1, retArr.length)
    }
    // 给Date对象添加getYMD方法,获取字符串形式的年月日
    // eslint-disable-next-line no-extend-native
    Date.prototype.getYMD = function () {
      // 将结果放在数组中,使用数组的join方法返回连接起来的字符串,并给不足两位的天和月十位上补零
      return [this.getFullYear(),fz(this.getMonth() + 1), fz(this.getDate())].join('-')
    }

    // 给String对象添加getDate方法,使字符串形式的日期返回为Date型的日期
    // eslint-disable-next-line no-extend-native
    String.prototype.getDate = function () {
      const strArr = this.split('-')
      return new Date(strArr[0], strArr[1] - 1, strArr[2])
    }

    // 给月和天,不足两位的前面补0
    function fz(num) {
      if (num < 10) {
        num = '0' + num
      }
      return num
    }

7、实现复制功能(原生JS)

// 复制
function copy() {
  console.log('点击复制')
  const copyContent = document.createElement('input')
  copyContent.value = '需要复制的文本'
  document.body.appendChild(copyContent)
  copyContent.select()
  document.execCommand('copy')
  document.body.removeChild(copyContent)
  console.log('复制成功')
}

8、CSS超出变省略号...

{
      overflow: hidden;
      word-break: break-all; /* break-all(允许在单词内换行。) */
      text-overflow: ellipsis; /* 超出部分省略号 */
      display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
      -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
      -webkit-line-clamp: 1; /** 显示的行数 **/
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值