首页 > 其他分享 >web前端常用的js封装,收藏起来备用!

web前端常用的js封装,收藏起来备用!

时间:2022-10-17 10:25:32浏览次数:67  
标签:web 封装 diffValue js var && date const day

做前端开发的同学是不是经常封装一些常用的函数方法,比如,日期格式、对象转换等。话不多说,直接总结一些常用的封装函数直接放在utils中拿来即用!

//数组对象深拷贝
const deepCopy = function (source) { return JSON.parse(JSON.stringify(source)) }

 

//日期格式转换
filterTime(time) {
  const date = new Date(time)
  const Y = date.getFullYear()   // 年
  const M = date.getMonth() + 1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1;   //月
  const D = date.getDate() < 10 ? '0'+(date.getDate()) : date.getDate()   //日
  const HH = date.getHours() < 10 ? '0'+(date.getHours()) : date.getHours()   //时
  const MM = date.getMinutes() < 10 ? '0'+(date.getMinutes()) : date.getMinutes()   //分
  return `${Y}-${M}-${D} ${HH}:${MM}`
},

 

//日期转为 刚刚 几分钟 ...
 
  function timeago(dateTimeStamp){  
        var minute = 1000 * 60;      //把分,时,天,周,半个月,一个月用毫秒表示
        var hour = minute * 60;
        var day = hour * 24;
        var week = day * 7;
        var halfamonth = day * 15;
        var month = day * 30;
        var now = new Date().getTime();   //获取当前时间毫秒
        console.log(now)
        var diffValue = now - dateTimeStamp;//时间差
    
        if(diffValue < 0){
            return;
        }
        var minC = diffValue/minute;  //计算时间差的分,时,天,周,月
        var hourC = diffValue/hour;
        var dayC = diffValue/day;
        var weekC = diffValue/week;
        var monthC = diffValue/month;
        if(monthC >= 1 && monthC <= 3){
            result = " " + parseInt(monthC) + "月前"
        }else if(weekC >= 1 && weekC <= 3){
            result = " " + parseInt(weekC) + "周前"
        }else if(dayC >= 1 && dayC <= 6){
            result = " " + parseInt(dayC) + "天前"
        }else if(hourC >= 1 && hourC <= 23){
            result = " " + parseInt(hourC) + "小时前"
        }else if(minC >= 1 && minC <= 59){
            result =" " + parseInt(minC) + "分钟前"
        }else if(diffValue >= 0 && diffValue <= minute){
            result = "刚刚"
        }else {
            var datetime = new Date();
            datetime.setTime(dateTimeStamp);
            var Nyear = datetime.getFullYear();
            var Nmonth = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
            var Ndate = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
            var Nhour = datetime.getHours() < 10 ? "0" + datetime.getHours() : datetime.getHours();
            var Nminute = datetime.getMinutes() < 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();
            var Nsecond = datetime.getSeconds() < 10 ? "0" + datetime.getSeconds() : datetime.getSeconds();
            result = Nyear + "-" + Nmonth + "-" + Ndate
        }
        return result;
    }

 

//原数据
dataOld: [{ id: '33', name: '小明', sex: "男"}, { id: '44', name: '小红', sex: "女"}] 
//接口需要的数据
dataNew: [{ value: '33', label: '小明', sex: "男"}, { value: '44', label: '小红', sex: "女"}]

//方法
function TurnToMy(dataOld){
let dataNew = [];    //新数组
dataOld.map(item => {
    let obj = {
        value: item.id,
        label: item.name,
    }
     dataNew.push(obj);
});
return dataNew 
}

 

标签:web,封装,diffValue,js,var,&&,date,const,day
From: https://www.cnblogs.com/agen-su/p/16798183.html

相关文章

  • html-webpack-plugin默认配置的获取与修改
    官方文档https://cli.vuejs.org/zh/guide/webpack.html#简单的配置方式获取默认配置配置vue.config.js在项目根目录下创建vue.config.js文件,键入如下代码:constHtmlWebp......
  • 做Web自动化前,你必须掌握的几个技能
    每天进步一点点,关注我们哦,每天分享测试技术文章本文章出自【码同学软件测试】码同学公众号:自动化软件测试,领取资料可加:magetest码同学抖音号:小码哥聊软件测试学习web自......
  • 基于element-ui upload 二次封装,可拖拽上传列表
    1<template>2<div>3<el-upload4ref="upload"5class="upload"6:drag="drag"7:disabled......
  • nodejs base64 编码解码
    一、普通字符串编码varb=newBuffer('JavaScript');vars=b.toString('base64');//SmF2YVNjcmlwdA==解码:varb=newBuffer('SmF2YVNjcmlwdA==','base64')......
  • React-Hooks怎样封装防抖和节流-面试真题
    Debouncedebounce原意消除抖动,对于事件触发频繁的场景,只有最后由程序控制的事件是有效的。防抖函数,我们需要做的是在一件事触发的时候设置一个定时器使事件延迟发生,在......
  • Node.js躬行记(24)——低代码
    低代码开发平台(LCDP)是无需编码(0代码)或通过少量代码就可以快速生成应用程序的开发平台。让具有不同经验水平的开发人员可以通过图形化的用户界面,通过拖拽组件和模型驱动......
  • Vue.js -- 样式绑定
    前言本文主要介绍了vue.js样式绑定的几种形式。class字符串形式代码演示:<!DOCTYPEhtml><htmllang="en"><head><title>vue样式绑定</title><scriptsrc=......
  • js列表合并以及处理响应数据
    JS实现列表元素合并 Vue做一个穿梭框的功能,需要用到合并列表元素,左列表合并到右列表。核心思路是右三个数据列表,左、右、选中method:{toRight:function(){......
  • 使用阿里的中国地图的json替换echarts中的china.js中的内容
    使用阿里的中国地图的json替换echarts中的china.js中的内容文末有相关资源这两天公司要求做一个地图展示要求每个省份根据用户量多少展示不同的颜色,且给每个市级单位加......
  • maven在idea中新建一个web工程
    web项目打包之后默认文件是war文件;点击File——-New-——Module——maven——√Creatfromarchetype——工程选择——maven-archetype-webapp    点击NEXT之后......