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; /** 显示的行数 **/
}