JS如何实现倒计时效果

最新推荐文章于 2024-04-28 17:03:19 发布

原创

最新推荐文章于 2024-04-28 17:03:19 发布 · 540 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端 #开发语言 #ecmascript

本文介绍了如何使用JavaScript和Vue.js实现倒计时效果，常见于电商网站的促销活动。示例展示了从原生JS到Vue的实现方式，包括时间格式化和定时器函数的运用。在Vue版本中，还添加了监听器来控制显示和禁用状态。

前言

在一些重大的消费节日,或特殊节日,比如:双十一,奥运会,圣诞节,元旦等,很多电商网站都会有倒计时的习惯

团购拼抢等促销活动,本示例演示一个简易的倒计时的效果

示例展示

https://coder.itclan.cn/fontend/js/35-daojishi-effect/

点击左下角阅读原文即可查看

原生JS

具体的代码如下所示

<!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" />
    <title>计算离元旦还有多长时间</title>
  </head>
  <body>
      <input type="button" value="开始进入倒计时" onclick="timeInit()" />
      <p id="text"></p>
      <script>
          // 开始倒计时函数
          function timeInit() {
            setInterval(function() {
              var now = new Date(); // 获取当前时间
              // 得到下一个特定的时间,比如元旦
              var end = new Date(now.getYear()+1+1900,0,1);
              // 得到距离元旦时间戳的毫秒数
              var time = end.getTime() - now.getTime();
              var str = getTimeTxt(time); // 拼接字符
              // 填充内容
              var text = document.getElementById('text');
              text.innerHTML = '距离明年元旦还剩'+str
            },1000)
     &