js 动态设置时间显示，判断时间间隔，时间格式化

已于 2025-04-09 14:21:58 修改
阅读量1.5k 收藏 1
点赞数 7
文章标签： javascript 前端 uni-app
于 2024-05-17 14:01:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41173973/article/details/139002937
版权
一、当天显示小时分钟，1-3天显示星期，超过3天显示月日，一般用于聊天消息列表居多
function formatMsgTime(time) {
    //time传入的是时间戳，且时间戳长度为10位
    const todayZero = new Date().setHours(0, 0, 0, 0);
    const yearZero = new Date(new Date().getFullYear(), 0, 1, 0, 0, 0, 0).getTime();
    const target = new Date(time * 1000);
    const oneDay = 24 * 60 * 60 * 1000;
    const oneWeek = 7 * oneDay;
    const diff = todayZero - target.getTime();
    const weekdays = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
    const weekday = weekdays[target.getDay()];

    function formatNum(num) {
        return num < 10 ? '0' + num : num.toString();
    }
    if (diff <= 0) { // 当天, 
        return `${formatNum(target.getHours())}:${formatNum(target.getMinutes())}`;
    } else if (diff <= oneWeek - oneDay * 4) { // 三天内,根据需求修改需要几天内显示的是星期
        return `${weekday} ${formatNum(target.getHours())}:${formatNum(target.getMinutes())}`;
    } else if (diff > oneWeek - oneDay * 4 && target.getTime() >= yearZero) { // 超过三天且在当年
        return `${target.getMonth() + 1}/${target.getDate()} ${formatNum(target.getHours())}:${formatNum(target.getMinutes())}`;
    } else { //不在当年
        return `${target.getFullYear()}/${target.getMonth() + 1}/${target.getDate()} ${formatNum(target.getHours())}:${formatNum(target.getMinutes())}`;
    }
}
二、判断两个时间的时间间隔，时分秒或相差的天数   多种方式
/*
* date1 开始时间, date2 结束时间, pattern 显示格式（这里只需要显示经时时分秒格式）
*/
countRunTime(date1, date2, pattern) {
    let startTime = new Date(date1)
    let endTime = new Date(date2)
    var dataDiff = endTime.getTime() - startTime.getTime()
    //天数
    var dayDiff = Math.floor(dataDiff / (24 * 3600 * 1000))
    //小时
    var leave1 = dataDiff % (24 * 3600 * 1000)
    var hours = Math.floor(leave1 / (3600 * 1000))
    //分钟
    var leave2 = leave1 % (3600 * 1000)
    var minutes = Math.floor(leave2 / (60 * 1000))
    //秒数
    var leave3 = leave2 % (60 * 1000)
    var seconds = Math.round(leave3 / 1000)
    if (pattern.indexOf(":") != -1) {
        return hours + ":" + minutes
    } else {
        return hours + '小时' + minutes + '分'
    }
}
//页面调用：<view>{{ countRunTime(fromTime,toTime,'hh时mm分')" }}</view>





countRunTime2(timestamp1, timestamp2) {
    // 确保timestamp1小于timestamp2
    if (timestamp1 > timestamp2) {
        [timestamp1, timestamp2] = [timestamp2, timestamp1];
    }
    // 计算时间差（以毫秒为单位）
    const diff = timestamp2 - timestamp1;
    // 转换为更易理解的单位
    const days = Math.floor(diff / (1000 * 60 * 60 * 24));      // 天数
    const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); // 小时数
    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));          // 分钟数
    const seconds = Math.floor((diff % (1000 * 60)) / 1000);                        // 秒数
    return { days, hours, minutes, seconds };
}
 
// 示例：计算当前时间到2023-12-31 23:59:59的时间差
const endTime = new Date('2023-12-31T23:59:59').getTime();
const nowTime= new Date().getTime();
 
const remaining = countRunTime2(nowTime, endTime );
console.log(`剩余 ${remaining.days} 天 ${remaining.hours} 小时 ${remaining.minutes} 分 ${remaining.seconds} 秒`);
计算天数 
countDays(date1, date2) {
    //date1 开始时间, date2 结束时间, 将日期字符串转换为时间戳（单位：毫秒 )
    var timestamp1 = new Date(date1).getTime();
    var timestamp2 = new Date(date2).getTime();
    // 计算两个时间戳之间的毫秒数差值
    var diffInMillisecs = Math.abs(timestamp2 - timestamp1);
    // 将毫秒数差值转换为天数
    var daysDiff = Math.ceil(diffInMillisecs / (1000 * 60 * 60 * 24));
    return daysDiff
}
两个时间相差多久，相差年，月，日，小时，分钟
function getDistanceDay(time) {
	let stime = new Date().getTime(); // 2024-05-17 14:36
	let usedTime = stime - time; //两个时间戳相差的毫秒数
	let one_minute = 60 * 1000;
	let one_hour = 60 * 60 * 1000;
	let one_day = 24 * 60 * 60 * 1000;
	let timeTxt = '';
	if (usedTime >= one_day) {
		//相差几天
		let disparityDay = parseInt(usedTime / one_day);
		timeTxt = disparityDay + '天前';
		if (disparityDay > getMonthDay()){
			timeTxt = getDisparityMonth(disparityDay) + '个月前';
		}
		if (disparityDay > getYearDay()){
			timeTxt = parseInt(disparityDay / getYearDay()) + '年前';
		} else {
			if (usedTime >= one_hour) {
				timeTxt = parseInt(usedTime / one_hour) + '小时前';
			} else if (usedTime >= one_minute) {
				timeTxt = parseInt(usedTime / one_minute) + '分钟前';
			} else {
				timeTxt = '刚刚';
			}
		}
		return timeTxt;
	}
	 
	// 获取相差几个月 传天数
	function getDisparityMonth(disparityDay) {
		let disparityMonth = 0;
		let countFc = () => {
			if (disparityDay > getMonthDay(disparityMonth)) {
				disparityDay -= getMonthDay(disparityMonth)
				disparityMonth += 1;
				countFc(disparityMonth)
			} else {
				return disparityMonth;
			}
		}
		countFc(disparityMonth)
		return disparityMonth;
	}
	 
	// 获取相差几个月 传开始时间和结束时间
	function gerDisMonth(date1,date2){
		var m1 = parseInt(date1.split("-")[1].replace(/^0+/, "")) + parseInt(date1.split("-")[0]) * 12;
		var m2 = parseInt(date2.split("-")[1].replace(/^0+/, "")) + parseInt(date2.split("-")[0]) * 12;
		return(m2 - m1);
	} 
	 
	// 获取当前月有多少天 可以计算前面几个月有多少天 upNum 是前面几个月
	function getMonthDay(upNum) {
		let day = 0;
		let month = new Date().getMonth() + 1;// 获取当前月
		if (upNum) {
			let date = new Date();
			date.setMonth(date.getMonth() - upNum);
			month = date.getMonth() + 1;
		}
		if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
			day = 31
		} else if (month == 2) {
			if (getYearDay() == 366) day = 29
			if (getYearDay() == 365) day = 28
		} else {
			day = 30
		}
		return day;
	}
	 
	// 获取当前年有多少天
	function getYearDay() {
		let day = 365
		let year = new Date().getFullYear();
		if (year % 4 == 0) day = 366;
		return day
	} 
}

let time =  new Date('2024-05-15 14:00').getTime() 
let timeTxt = getDistanceDay(time)
console.log('timeTxt', timeTxt) //timeTxt 48小时前
算出一年有多少天
getYearsDays(e) {
	if (e != null && e != "" && e != undefined) {
		var year = Number(e);
		var isLeap = (year % 4 == 0) && (year % 100 != 0) || (year % 400 == 0),
			days = isLeap ? 366 : 365;
		console.log(days);
	} 
},
计算时间差的方法
monthDayDiff(startTime,endTime) {  
    let flag = [1, 3, 5, 7, 8, 10, 12, 4, 6, 9, 11, 2];
    let start = new Date(startTime);
    let end = new Date(endTime);
    let year = end.getFullYear() - start.getFullYear();
    let month = end.getMonth() - start.getMonth();
    let day = end.getDate() - start.getDate();
    if (month < 0) {
        year--;
        month = end.getMonth() + (12 - start.getMonth());
    }
    if (day < 0) {
        month--;
        let index = flag.findIndex((temp) => {
          return temp === start.getMonth() + 1
        });
        let monthLength;
        if (index <= 6) {
          monthLength = 31;
        } else if (index > 6 && index <= 10) {
          monthLength = 30;
        } else {
          monthLength = 28;
        }
        day = end.getDate() + (monthLength - start.getDate());
    }
    this.result = `相差${year}年${month}月${day}天`;
    console.log(this.result)
},
 获取月初和月末
getCurrentMonthFirst() {
	var date = new Date()
	date.setDate(1)
	var month = parseInt(date.getMonth() + 1)
	var day = date.getDate()
	if (month < 10) month = '0' + month
	if (day < 10) day = '0' + day
	this.startTime = date.getFullYear() + '-' + month + '-' + day
},
getCurrentMonthLast() {
	var date = new Date()
	var month = parseInt(date.getMonth() + 1)
	var day = lastTime.getDate()
	if (month < 10) month = '0' + month
	if (day < 10) day = '0' + day
	this.endTime = date.getFullYear() + '-' + month + '-' + day
},
计算指定日期的n天/n月/n年后的日期
/*
	interval: 单位 年/季/月/星期/天
	num: 数量
	date: 指定日期  如： 当前时间new Date()
    可单独使用每个条件中的set...(),但输出格式：Mon Jun 09 20xx 11:17:58 GMT+0800 (中国标准时间)，需要按需转换格式，如用moment.js，moment(date).format('YYYY-MM-DD')
*/
const dateAdd = (interval, num, date) => {
  const number = Number(num);
  switch (interval) {
    case "y": {
        date.setFullYear(date.getFullYear() + number);
        return date;
        break;
    }
    case "q": {
        date.setMonth(date.getMonth() + number * 3);
        return date;
        break;
    }
    case "m": { 
        date.setMonth(date.getMonth() + number);
        return date;
        break;
    }
    case "w": {
        date.setDate(date.getDate() + number * 7);
        return date;
        break;
    }
    case "d": {
        date.setDate(date.getDate() + number);
        return date;
        break;
    }
    default: {
        date.setDate(date.getDate() + number);
        return date;
        break;
    }
  }
}
根据开始日期和期限来计算结束日期
var day = 3; //获取相隔天数
var newTime = Date.parse('2024-05-17') //将日期时间转换为毫秒值
var newTimes = newTime + 3600000 * 24 * (day); // 3600000 为1小时的毫秒值
var newDate = new Date(newTimes); //将获取的毫秒值转换为对应的日期时间
console.log(newDate);
//需要处理时间格式，结果为 Mon May 20 2024 08:00:00 GMT+0800 (中国标准时间)
计算周期后的结束时间

获取当前时间，day为number，getDay(-1):昨天的日期;getDay(0):今天的日期;getDay(1):明天的日期;【以此类推】

getDay(day) {
	var today = new Date('2020-01-01');
	var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
	today.setTime(targetday_milliseconds); //注意，这行是关键代码

	var tYear = today.getFullYear();
	var tMonth = today.getMonth();
	var tDate = today.getDate();
	tMonth = this.doHandleMonth(tMonth + 1);
	tDate = this.doHandleMonth(tDate);
	return tYear + "-" + tMonth + "-" + tDate;
},
doHandleMonth(month) {
	var m = month;
	if (month.toString().length == 1) {
		m = "0" + month;
	}
	return m;
},
 三、日期格式化
parseTime(time, pattern) {
    if (arguments.length === 0 || !time) {
        return null
    }
    const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
    let date
    if (typeof time === 'object') {
        date = time
    } else {
        if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
            time = parseInt(time)
        } else if (typeof time === 'string') {
            time = time.replace(new RegExp(/-/gm), '/');
        }
        if ((typeof time === 'number') && (time.toString().length === 10)) {
            time = time * 1000
        }
        date = new Date(time)
    }
    const formatObj = {
        y: date.getFullYear(),
        m: date.getMonth() + 1,
        d: date.getDate(),
        h: date.getHours(),
        i: date.getMinutes(),
        s: date.getSeconds(),
        a: date.getDay()
    }
    const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
        let value = formatObj[key]
        if (key === 'a') {
            return ['日', '一', '二', '三', '四', '五', '六'][value]
        }
        if (result.length > 0 && value < 10) {
            value = '0' + value
        }
        return value || 0
    })
    return time_str
}
 当前日期转为字符串
dateToString(now) {
    var year = now.getFullYear();
    var month = (now.getMonth() + 1).toString();
    var day = now.getDate().toString();
    if (month.length == 1) {
        month = "0" + month;
    }
    if (day.length == 1) {
        day = "0" + day;
    }
    var dateTime = year + "-" + month + "-" + day;
    return dateTime;
},

JavaScript 时间处理(date对象)
zzjlhlcd的博客
03-08 505
频繁创建Date对象会影响性能。：服务器时间和本地时间的差异。：月份从0开始（0=1月）JavaScript使用。：轻量级替代moment。
js 计算两个时间的时间差
weixin_33742618的博客
10-16 3901
写在前面： 如题，就像题目说的需要计算出时间差，虽然不太难，但这个需求经常会在项目中遇到的，我在这边做一下整理，希望能够尽量全的整理出来。有需要的朋友可以做一下参考，喜欢的可以点波赞，或者关注一下，希望可以帮到大家。 本文首发于我的个人blog：obkoro1.com 计算时间差原理： getTime()方法 方法定义： getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒...
JavaScript 类似微信历史聊天时间样式
08-30
类似于微信历史聊天时间样式，当天历史时间显示 如： 上午 08：08 或 08：08 前一天历史记录显示 如：昨天 13：30 一周内显示 如： 星期五 13：30
js显示时间日期
01-13
js显示时间日期
JS显示时间
ndiedie的博客
05-17 162
开发工具与关键技术：Dw 作者：nd 撰写时间：2021/5/17 首先将布局摆放好 先在网页上放置一个按钮 既 button标签，这个标签的作用是用来调用方法 通过 onClick属性绑定事件 将一切放置好后 就可以写需要的函数了 Function 然后在里面写出要使用的函数 因为写的是控制台方法所以要使用 console.log函数 在console.log函数内嵌套多种方法，或将函数输出 所以将function写好后就准备开始写核心函数 首先先获取年月日 var dat..
JS 计算两个时间的间隔
Jana Jing的分享
01-20 6792
js 计算两个时间之间间隔的天数 var start = new Date('2019-12-10'); //开始的时间 var end = new Date('2019-12-31'); //结束的时间 var se = end - start; //计算两个时间之间的秒数 var days = Math.floor(se / (24 * 3600 * 1000)); // 计算天数 console.log(days); //21 ...
JavaScript验证时间格式
weixin_33831196的博客
12-31 135
1. 短时间，形如 (13:04:06) function isTime(str) { var a = str.match(/^(\d{1,2})(:)?(\d{1,2})\2(\d{1,2})$/); if (a == null) {alert('输入的参数不是时间格式'); return false;} if (a[1]&gt;24 || a[3]&gt;60 || a[4]&...
JS时间格式化：显示为几天/几小时前
"这篇资源主要讨论了如何使用JavaScript来实现时间显示为‘几天前’、‘几小时前’或‘几分钟前’的格式，通过不同方法和示例代码提供了时间格式转换的解决方案。其中包括使用jQuery插件、Freemarker模板语言以及第...
微信聊天消息列表的时间显示判断.rar
05-28
在微信聊天消息列表中，...综上所述，微信聊天消息列表的时间显示判断涉及HTML5的语义化标签、JavaScript的时间格式化和动态更新，以及CSS的样式设计。这些技术的巧妙结合，为用户提供了一个高效、易读的信息展示环境。
JS中处理与当前时间间隔的函数代码
10-28
以上知识点详细介绍了如何在JavaScript中处理与当前时间间隔相关的函数，包括日期的创建、时间差的计算、字符串的格式化显示、以及一些可能遇到的问题和解决方案。通过理解和应用这些知识点，开发者可以更有效地使用...
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
10-14
总结起来，Vue.js中按照创建时间和当前时间显示操作的关键在于正确地处理时间差，并根据时间差的范围生成合适的文本描述。同时，通过时间戳计算年龄也是前端开发中常见的需求，可以通过类似的逻辑实现。这两个功能...
日期时间格式判断js
10-14
有用的时间日期格式判断，满足不同的需求，YYYY-MM-DD, 时间格式检测：23:59:59的格式等
Js 时间间隔计算的函数(间隔天数)
10-28
Js计算间隔天数的函数代码，需要的朋友可以参考下。
JS时间格式化，时间差，昨天明天
10-26
JS时间格式化，JS两个时间差，JS当前日期的昨天明天 ,JS当前日期周几
JS 计算两个时间之间的间隔（天、时、分、秒），2024年最新web开发学习
最新发布
m0_63174618的博客
04-17 1110
世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
js判断间隔时间
07-23 239
function timer(){var l = (new Date()-Date.parse(document.lastModified))/1000/3600/24);alert(l);if(l&gt;1){new Ajax().getData("MakeIndex.aspx","isAjax=true",function(obj){var a="";});}}timer();
JS 计算两个时间之间的间隔（天、时、分、秒）
卡尔特斯
05-08 9480
function fun () { let startTime = new Date('2015-12-20'); // 开始时间 let endTime = new Date(); // 结束时间 let usedTime = endTime - startTime; // 相差的毫秒数 let days = Math.floor(usedTime / (24 * 3600 * 1000)); // 计算出天数 let leavel = usedTime % (24
js计算两个时间差 天 时 分 秒 毫秒
weixin_34268610的博客
05-21 805
// 计算两个时间差 dateBegin 开始时间 function timeFn(dateBegin) { //如果时间格式是正确的，那下面这一步转化时间格式就可以不用了 var dateEnd = new Date();//获取当前时间 var dateDiff = dateEnd.getTime() - dateBegin;//时间差的毫秒数 v...
js 时间格式化
weixin_30756499的博客
01-03 131
gistfile1.txt //js时间对象的格式化; //eg:format="yyyy-MM-dd hh:mm:ss w"; Date.prototype.format = function(format) { var o = { 'M+': this.getMonth() + 1, //month 'd+': this.getDate(), //day 'h+...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值