js 时间戳与时间格式的转化, xx天xx小时xx分倒计时,距离当前时间多久

一.时间戳和日期格式相互转化

(1) 获取时间戳

(2) 时间戳转化为日期格式

(3) 日期格式转换为时间戳

二. XX天XX小时XX分倒计时

三.距离当前时间的计算, 显示效果为3秒前,1小时前

一.时间戳和日期格式相互转化

(1) 获取时间戳

//(1)、精确到秒：Date.parse(new Date()); //1570506183000
//(2)、精确到毫秒：(new Date()).valueOf(); //1570506204713
//(3)、精确到毫秒：new Date().getTime();//1570506204713
//(4)、JQuery获取时间戳$.now(); //1570506204713

(2) 时间戳转化为日期格式

let timetamp = 1570511665;
let date = new Date(parseInt(timetamp) * 1000);
date.toDateString()
//"Tue Oct 08 2019"
date.toGMTString()
//"Tue, 08 Oct 2019 05:14:25 GMT"
date.toJSON()
//"2019-10-08T05:14:25.000Z"
date.toISOString();
//"2019-10-08T05:14:25.000Z"
date.toLocaleDateString()
//"2019/10/8"
date.toLocaleString("en-US", {hour12: false}).replace(/:\d{1,2}$/,' ')
//"10/8/2019, 13:14 " en-US设置为美国时区, hour12:false表示为24小时制
date.toString();
//"Tue Oct 08 2019 13:14:25 GMT+0800 (中国标准时间)"
date.toTimeString();
//"13:14:25 GMT+0800 (中国标准时间)"
date.toUTCString()
//"Tue, 08 Oct 2019 05:14:25 GMT"

上述是js提供的方法，如果需要自定义格式，可以使用下面的函数

    function formatDate(timestamp){let time = new Date( Number(timestamp))let year = time.getFullYear()let month = Number(time.getMonth()) + 1let date = time.getDate()let hours = time.getHours()let minute = Number(time.getMinutes())let second = time.getSeconds()if (month < 10) { month = '0' + month }if (date < 10) { date = '0' + date }if (hours < 10) { hours = '0' + hours }if (minute < 10) { minute = '0' + minute }if (second < 10) { second = '0' + second }return `${year}-${month}-${date} ${hours}:${minute}:${second}`}let currentDate = new Date().getTime();formatDate(currentDate); //"2020-05-22 23:58:32" 获取到当前时间的时间戳并按自定义格式显示

(3) 日期格式转换为时间戳

function transdate(endTime){var date = new Date();date.setFullYear(endTime.substring(0, 4));date.setMonth(endTime.substring(5, 7) - 1);date.setDate(endTime.substring(8, 10));date.setHours(endTime.substring(11, 13));date.setMinutes(endTime.substring(14, 16));date.setSeconds(endTime.substring(17, 19));return Date.parse(date) / 1000;
}
console.log(transdate("2019-10-08 13:14:25"));
//结果: 1570511665

二. XX天XX小时XX分倒计时

TimeCounter.vue文件:

Html代码

<template><div class="time-counter"><template v-if="days > 0"><span>{{days|addZero}}</span>天<span>{{hours|addZero}}</span>小时</template><template v-else><span>{{hours|addZero}}</span><span>{{minutes|addZero}}</span><span>{{seconds|addZero}}</span></template></div>
</template>

JS代码

/** 功能:(天)时分秒倒计时;参数: stopAt:截止时间  如:2019-12-22 13:14:11
*/
export default {props: {stopAt: {type: String,required: true}},data() {return {days: 0,hours: 0,minutes: 0,seconds: 0,intervalId: undefined};},methods: {onStart() {this.intervalId = setInterval(() => {let stopAt = this.stopAt || 0;if (stopAt) {stopAt = stopAt.replace(/-/g, "/");stopAt = new Date(stopAt).getTime() / 1000;}let now = new Date().getTime() / 1000;let leftTime = parseInt(stopAt - now);if (leftTime < 0) {clearInterval(this.intervalId);this.$emit("counter.end");this.seconds = 0;return;}if (leftTime < 360000) {this.hours = parseInt(leftTime / 3600, 10);this.days = 0;} else {this.days = parseInt(leftTime / 86400, 10);this.hours = parseInt((leftTime / 3600) % 24, 10);}this.minutes = parseInt((leftTime / 60) % 60, 10);this.seconds = parseInt(leftTime % 60, 10);}, 500);}},created() {this.onStart();}
};

在其他组件中调用, 需要注册TimeCounter为全局组件, 或需使用的vue文件中注册为子组件

<time-counter :stop-at="activity.expiresDate"/>

说明: addZero是一个函数, 当数值为个位数时,补0.

function addZero(value)  {if(!value) {return '00';}return value < 10 ? "0" + value : value;
}

效果图:

三.距离当前时间的计算, 显示效果为3秒前,1小时前

   /*** 参数 timetamp  时间戳* */function getTimeStr(timetamp){const nowTime = (new Date()).getTime(); // 获取当前时间戳const dateDiff = nowTime - timetamp;//时间差的毫秒数const second = 1000; //1秒==1000毫秒const minute = second * 60; //1分==60秒;const hour = minute * 60; //1小时=60分;const day = hour * 24; //1天 == 24小时;const month = day * 30; //按1月==30天,存在一两天误差, 纯展示暂不做细处理;const monthC = Math.floor( dateDiff / month);const weekC = Math.floor(dateDiff / (7*day));const dayC = Math.floor(dateDiff / day);const hourC = Math.floor(dateDiff / hour);const minC = Math.floor(dateDiff / minute);const secC = Math.floor(dateDiff / second);let timesString = '';if(monthC>=1){timesString = parseInt(monthC) + "个月前";}else if(weekC>=1){timesString = parseInt(weekC) + "周前"}else if(dayC>=1){timesString = parseInt(dayC) + "天前"}else if(hourC>=1){timesString = parseInt(hourC) +"小时前";}else if(minC>=1){timesString = parseInt(minC) +"分钟前"}else if(secC >=1){timesString = parseInt(secC) +"秒前"}else{timesString = '刚刚'}return timesString;}
//调用:
console.log(getTimeStr(1573710216026))//31秒前

效果图:

js 时间戳与时间格式的转化, xx天xx小时xx分倒计时,距离当前时间多久相关推荐

vue怎么截取时间年月_时间格式的转化 vue与js 年月日时分秒
首先使用原生转化的方法第一种 //时间转换 dateStr(d, sign) { //如果没有传递符号,给一个默认的符号 if (!sign) { sign = '-' } //获取d里面年月日时分 ...
java中各种时间格式的转化
http://www.chinaitpower.com/A/2005-01-14/104881.html 使用java.util.Calendar返回间隔天数 static int g ...
用to_datetime函数实现时间格式的转化
日常工作中,我们经常需要对Excel表格中的时间格式进行转化,但是各家YYS和YH的格式总是五花八门,用Excel进行转化总是不得心应手,可能是我不太会用吧,所以想到能不能编个python小程序实现不 ...
js 时间戳和日期格式相互转换
一.时间戳转化为日期格式这个比较麻烦,没有找到js自带函数进行转换,所以需自定义一个函数,可作为公共函数使用. 使用效果如下: time = timestampToTime(1660208851); ...
微信小程序，时间戳和日期格式互相转化
微信小程序,时间戳转为日期格式通常后台传递过来的都是时间戳,但是前台展示不能展示时间戳.就需要转化了. 功能说明: 微信小程序里,时间戳转化为日期格式,支持自定义. 拷贝至项目utils/utils ...
js 时间戳转为日期格式
什么是Unix时间戳(Unix timestamp): Unix时间戳(Unix timestamp),或称Unix时间(Unix time).POSIX时间(POSIX time),是一种时间表示方 ...
iOS开发之时间格式的转化
在开发iOS程序时,有时候需要将时间格式调整成自己希望的格式,这个时候我们可以用NSDateFormatter类来处理. 例如:如何将格式为"12-May-14 05.08.02.00000 ...
vue.js 时间戳转换日期格式
时间戳可以理解为过滤器的一种方式,日期格式的转换在项目中也经常遇到,今天我来总结项目中踩过的坑,以及解决方法. 时间戳转换日期格式有三种方法: 方式一运行 cmd 执行 npm install mo ...
js与php时间戳,js时间戳与日期格式之间的互转
1. 将时间戳转换成日期格式 // 简单的一句代码 var date = new Date(时间戳); //获取一个时间对象 /** 1. 下面是获取时间日期的方法,需要什么样的格式自己拼接起来就好了 ...

js 时间戳与时间格式的转化, xx天xx小时xx分倒计时,距离当前时间多久

一.时间戳和日期格式相互转化

(1) 获取时间戳

(2) 时间戳转化为日期格式

(3) 日期格式转换为时间戳

二. XX天XX小时XX分倒计时

三.距离当前时间的计算, 显示效果为3秒前,1小时前

js 时间戳与时间格式的转化, xx天xx小时xx分倒计时,距离当前时间多久相关推荐

最新文章

热门文章