vue倒计时

太过爱你忘了你带给我的痛 2022-12-11 13:56 314阅读 0赞

vue倒记时示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>倒计时</title>
  7.     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
  8. </head>
  9. <body>
  10.     <div id="app">
  11.         <div class="timerrunning">{
  12.    {day}}天{
  13.    {hr}}:{
  14.    {min}}:{
  15.    {sec}}</div>
  16.     </div>
  17.     <script> var vm = new Vue({ el:'#app', data:{ day:0, hr:0, min:0, sec:0 }, mounted:function(){ this.countdown() }, methods:{ countdown: function(){ //定义结束时间戳 const end = Date.parse(new Date('2020-11-01 00:00:00')) //定义当前时间戳 const now = Date.parse(new Date()) if(now>=end){ this.day=0 this.hr=0 this.min=0 this.sec=0 return } //用结束时间戳减去当前时间获得倒计时时间戳 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 //定义this指向 const that=this //使用定时器,然后使用递归让每一次函数能调用自己达到倒计时效果 setTimeout(function(){ that.countdown() },1000) } } }) </script>
  18. </body>
  19. </html>

发表评论

表情：
评论列表 （有 0 条评论，314人围观）

还没有评论，来说两句吧...

相关阅读

    相关 vue-倒计时控件

    好久木有来更新了，最近几个月把精力都花费在了加班上~ 最近用vue整前端有个倒计时控件的需求，用element-ui满足不了需求，便模仿常见的倒计时效果，写了一个控件，有需要

    素颜马尾好姑娘i素颜马尾好姑娘i/ 0 赞/ 631 阅读