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

在了解倒计时原理之前先了解一些时间戳例如：12小时转换为时间戳12✖️60✖️60✖️1000第一个60单位分钟第二个60单位是秒第三个1000单位毫秒未来某天的倒计时<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compati

面对疾风ba

3101人浏览 · 2022-11-05 15:56:07

面对疾风ba · 2022-11-05 15:56:07 发布

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

例如：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>

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

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

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

在这里插入图片描述

<div id="app">
    <h1>{{ week }}</h1>
	<h1>{{ date_show }}</h1>
	<h1>{{ time_show }}</h1>
</div>

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;
	  },
  }
});

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^