利用JavaScript实现一个简单的倒计时功能

前端的小白

已于 2022-03-27 10:45:45 修改

阅读量3.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript 前端

于 2022-03-27 10:43:15 首次发布

本文链接：https://blog.youkuaiyun.com/hyscsdn/article/details/123769183

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

这篇博客介绍如何利用JavaScript实现一个商品倒计时功能，适用于电商平台的促销活动。通过示例代码和效果展示，帮助初级开发者理解并应用JavaScript进行实际项目开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当我们会一点JavaScript的时候，总会想弄一些案例来提升一下我们对于 JavaScript 的一个理解，把我们学到的知识应用到实际里面来。现在的这一个案例是实现我们比较常见的一些电商平台的商品倒计时功能，倒计时结束就进行打折促销活动。那么，一个倒计时功能我们一些小白要怎么使用JavaScript 来实现呢？直接上代码

代码展示：

function countDown(time){      //定义一个倒计时函数
    var nowTime = +new Date();   //这个返回的是当前时间的总毫秒数。这里面的 +new 和 new 返回数据类型是不一样的，使用 +new 的方法可以很快的得到我们的时间毫秒数
    var inputTime = +new Date(time)   //返回的是输入时间的总毫秒数
    var time = (inputTime - nowTime) / 1000   //得到的是距离截至时间的总毫秒数
    var day = Math.floor( time / 60 / 60 / 24) ;   //得到是时间的天数,这里要使用Math.floor()来把数值
    day = day < 10 ? "0" + day : day;         //这一步的操作主要是起到当数字是小于10的时候自动在前面补上一个0
    var hour = Math.floor(time / 60 / 60 % 24)    //得到的时间的小时数
    hour = hour < 10 ? "0" + hour : hour
    var minute = Math.floor(time / 60 % 60)     //得到的是时间分钟数 
    minute = minute < 10 ? "0" + minute : minute
    var second = Math.floor(time % 60) ;      //得到的是时间秒数
    second = second < 10 ? "0" + second : second
    return day +"天" + hour + "时" + minute +"分" + second +"秒"  
  }

  setInterval(()=>{   //设置一个每秒触发一次的定时器，用于刷新页面的数据，起到一个动态的页面倒计时
    document.getElementById("time").innerHTML = countDown("2022-3-31 00:00:00")  //这里设置的时间就是倒计时结束的时间，这个是传过去的时间格式
  },1000)

效果展示：

以上就是实现一个简单的倒计时功能的代码了，是不是很简单呢