JS 和 vue 时间倒计时（天、时、分、秒）

JS 代码

// 传递过来的都是截止时间2021-09-17 15:45:30
function getResidueDate(end_date){let residue = end_date - new Date();let days = Math.floor(residue / 1000 / 60 / 60 / 24);let hours = Math.floor((residue / 1000 / 60 / 60) % 24);let minutes = Math.floor((residue / 1000 / 60) % 60);let seconds = Math.floor((residue / 1000) % 60);// 不需要补零的话，这部分就可以不用了days = days < 10 ? "0" + days : days;hours = hours < 10 ? "0" + hours : hours;minutes = minutes < 10 ? "0" + minutes : minutes;seconds = seconds < 10 ? "0" + seconds : seconds;return `剩余：${days}天${hours}小时${minutes}分钟${seconds}秒`
};// 加载完成后，执行倒计时
window.onload = function () {// 每秒执行一次倒计时函数setInterval(() => {getResidueDate('2021-09-17 15:45:30');}, 1000);
}

VUE

<template><div>剩余时间：<p>天：{{ days }}</p><p>小时：{{ hours }}</p><p>分钟：{{ minutes }}</p><p>秒：{{ seconds }}</p></div>
</template><script>
export default {name: "Test",data: function () {return {end_date: "2021-09-17 15:45:30", // 截止时间days: 0,hours: 0,minutes: 0,seconds: 0,residue: 0,};},created() {setInterval(() => {this.getResidueDate();}, 1000);},methods: {getResidueDate() {this.residue = new Date(this.end_date).getTime() - new Date();this.days = this.addZero(Math.floor(this.residue / 1000 / 60 / 60 / 24)); //天this.hours = this.addZero(Math.floor((this.residue / 1000 / 60 / 60) % 24)); //时this.minutes = this.addZero(Math.floor((this.residue / 1000 / 60) % 60)); //分this.seconds = this.addZero(Math.floor((this.residue / 1000) % 60)); //秒},start() {// let _this = this;},addZero(d) {return parseInt(d) < 10 ? "0" + d : d;},},
};
</script>

JS 和 vue 时间倒计时（天、时、分、秒）相关推荐

JS获取日期(年/月/日/时/分/秒)格式转化
因为用到JS倒计时,所以就把网上搜到的各种关于日期的整理了一下,有个印象,以后再用到,可以直接看自己的,方便很多. var myDate = new Date(); 以下都是在myDate的基础上得到 ...
JS获取日期(年/月/日/时/分/秒)以及完整格式转化（补0）
var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位 ...
html天时分秒倒计时,倒计时(天时分秒)(原创)
//格式化时间 Date.prototype.format = function(format) { /* * 使用例子:format="yyyy-MM-dd hh:mm:ss"; ...
android时间字符串加减,android 时间相减时分秒转换
2019独角兽企业重金招聘Python工程师标准>>> public class test { public static void main(String ss[]) { Simp ...
JS实现倒计时精确到天数,时,分,秒或者精确到时、分、秒（小时数累加）
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>JS ...
js将当前时间格式化为年-月-日时:分:秒
利用js的Date()对象,将系统当前时间格式化为年-月-日时:分:秒.也可以自己定义格式.(做项目时遇到这个问题.本来想百度一个用,哎,网上的结果太乱了,于是自己写一个) 代码如下: <!D ...
js php 获取时间倒计时_,js实现倒计时及时间对象
JS实现倒计时效果代码如下: 无标题文档h #box { width: 100%; height: 400px; background: black; color: #fff; font-size:4 ...
vue2.0有关时间戳时间的公共方法（YYYY-MM-DD HH:mm:ss，YYYY-MM-DD，HH:mm:ss，转化为 utc 时间，utc转标准时间，相对时间，日/月/年时:分:秒）
moment.js是一个javascript时间处理类库.它可以将时间搓格式化,使用起来很方便.下面是vue2.0中moment.js的使用步骤: moment.js可以全局使用,也可以局部使用. 一 ...
JS获取当前时间（年月日时分秒）
JS获取当前时间(年月日时分秒) JS获取当前时间(年月日时分秒) 代码直接撸: **拿走直接用 `//获取当前时间 getNowTime() { var date = new Date(); //年 ...

JS 和 vue 时间倒计时（天、时、分、秒）

JS 和 vue 时间倒计时（天、时、分、秒）相关推荐

最新文章

热门文章