vue中倒计时(日，时，分，秒)的计算和当前时间计时读秒

在了解倒计时原理之前先了解一些时间戳

例如：12小时转换为时间戳

12✖️60✖️60✖️1000

第一个60单位分钟
第二个60单位是秒
第三个1000单位毫秒

未来某天的倒计时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>倒计时</title>
</head>
<body>
    <div id="app">
        <div id="app">{{ `${day}天 ${hr}小时 ${min}分钟 ${sec}秒` }}</div>
    </div>
    <script>
        vm = new Vue({
            el:'#app',
            data:{
                day: 0, hr: 0, min: 0, sec: 0
            },
            created(){
            
                this.futureDay()

            },
            methods:{
                futureDay(){ //未来某天的倒计时
                	// 1、获取未来的日期
                	// 2、获现在的时间
                	// 3、未来的日期➖现在的时间
                	// 4、得到相减的结果，换算为，天-小时-分钟-秒
                	// 5、每隔1秒获取一次，直至相减为0（需自己做限制）
                    const end = Date.parse(new Date('2030-01-01'))
                    const now = Date.parse(new Date())
                    const msec = end - now
                    let day = parseInt(msec / 1000 / 60 / 60 / 24)
                    let hr = parseInt(msec / 1000 / 60 / 60 % 24)
                    let min = parseInt(msec / 1000 / 60 % 60)
                    let sec = parseInt(msec / 1000 % 60)
                    this.day = day
                    this.hr = hr > 9 ? hr : '0' + hr
                    this.min = min > 9 ? min : '0' + min
                    this.sec = sec > 9 ? sec : '0' + sec
                    
                    setTimeout(() => {
                        this.futureDay()
                    }, 1000)
                }
            }
        })
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

当前系统日期 - 当前系统时间计时读秒

下方如何渲染可以自主的调试 === 下方在线调试网址
https://jsrun.net/nzsKp/edit

**效果 ========= **

在这里插入图片描述

<div id="app">
    <h1>{{ week }}h1>
	<h1>{{ date_show }}h1>
	<h1>{{ time_show }}h1>
div>
1
2
3
4
5

var app = new Vue({
  el: '#app',
  data() {
    return {
      week:'', // 星期几
	  date_show:'', // 日期
	  time_show:'',//当前时间
    }
  }, 
  created(){
	this.getTime = setInterval(()=>{
	 	this.getnewTime()
	},1000)
	this.getdataTime() // 获取系统日期
  },
  methods: {
      //获取当前系统的的日期
	  getdataTime(){
	  	let wk = new Date().getDay()  
	  	let yy = new Date().getFullYear();
	  	let mm = new Date().getMonth() + 1;
	  	let dd = new Date().getDate();
	  	let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
	  	this.week = weeks[wk]
	  	this.date_show = yy + "年" + mm + "月" + dd + "日"
	  },
	  // 获取当前系统的时间
	  getnewTime(){
	  	let hh = new Date().getHours();
	  	let mf = new Date().getMinutes() < 10 
	  	? "0" + new Date().getMinutes() 
	  	: new Date().getMinutes();
	  	let ss = new Date().getSeconds() < 10
	  	? "0" + new Date().getSeconds()
	  	: new Date().getSeconds();
	  	this.time_show = hh + ":" + mf + ":" + ss;
	  },
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

相关阅读:
[附源码]计算机毕业设计JAVA大学生足球预约信息
java---卡特兰数---满足条件的01序列（每日一道算法2022.9.29）
Azure - 机器学习：使用自动化机器学习训练计算机视觉模型的数据架构
测试开发干货：records让你优雅的操作数据库
基于springboot实现家具销售电商平台管理系统项目【项目源码+论文说明】
通过shiro进行按钮及页面访问url的权限控制
Java版本+企业电子招投标系统源代码+支持二开+招投标系统+中小型企业采购供应商招投标平台
Vuex中getters和4个map方法的使用
Spring Cloud Netflix Hystrix
REDIS09_HyperLogLog的概述、基本命令、UV、PV、DAU、MAU、首页UV如何进行统计处理

原文地址：https://blog.csdn.net/u011608672/article/details/115306977