`

js毫秒倒计时

阅读更多

刷新时间也不一定就是50毫秒最好,但是考虑到人的肉眼识别能力,刷新频率太快也没啥意义,另外,我们应该考虑到两种需求情况:1.现在距离将来某一时间还有多久;2.从过去某一时间到现在已经经历了多久。

<div id="timeB"></div>
<script type="text/javascript">
    function countDown(endTime, startTime = new Date()) {//为了满足一些特殊情况这里给一个开始时间的参数并附上默认值,一般情况只需要传入结束时间即可
        let date = endTime - startTime; //时间差  
        let mmsec = date % 1000 //所余毫秒数  
        let seconds = Math.floor(date / 1000 % 60); //所余秒数  
        let minutes = Math.floor(date / 1000 / 60 % 60); //所余分钟数  
        let hour = Math.floor(date / 1000 / 60 / 60 % 24); //所余时钟数  
        let day = Math.floor(date / 1000 / 60 / 60 / 24); //天数  
        return {
            day: day
            , hour: hour
            , minutes: minutes
            , seconds: seconds
            , mmsec: mmsec
        }
    }
    const timeB = document.querySelector('#timeB');
    //开启定时器
    setInterval(() => {
        let time = countDown(new Date(2016, 8, 1));//只需要传入结束时间
        timeB.innerHTML = "距离2016年9月1号00点还有" + time.day + "天" + time.hour + "小时" + time.minutes + '分钟' + time.seconds + '秒' + time.mmsec + "毫秒";
    }, 50);
</script>

效果: 

  • 大小: 7.7 KB
1
0
分享到:
评论

相关推荐

    js倒计时代码 精确到毫秒

    闲着没事 发个倒计时代码 可以精确到毫秒的

    js实现精确到毫秒的倒计时效果

    本文将介绍如何使用JavaScript实现精确到毫秒的倒计时效果。 JavaScript中的Date对象提供了获取当前时间以及设置时间的方法。首先需要创建一个Date对象来获取当前的时间戳,然后可以通过用户设定的时间戳与当前...

    JS 倒计时 精确到毫秒

    js编写的倒计时特效,精确到毫秒。可以自由控制倒计时结束时间。

    js实现倒计时时分秒

    在提供的压缩包文件中,"js倒计时"可能包含了一个完整的JS倒计时实现,你可以查看源代码学习更多细节,比如如何将倒计时数据显示在网页上,或者如何处理时区问题。通过深入理解这些代码,你将能更好地掌握JS实现倒...

    多个js毫秒倒计时同时进行效果

    本文实例讲解js毫秒倒计时同时进行效果的代码,分享给大家供大家参考,具体内容如下 实现功能:调用一个函数,传入html元素的id,和一个截止时间(unix时间戳),在该html元素中打印出到当前到截止时间为止的倒计时,...

    JavaScript实现倒计时

    倒计时功能是JavaScript常用的一种应用场景,例如在线考试、活动预告、新年倒计时等。本篇文章将详细探讨如何使用JavaScript实现倒计时功能。 首先,我们需要理解倒计时的基本原理。倒计时通常涉及到两个关键时间点...

    javascript 实现网页 倒计时 代码

    本篇文章将详细介绍如何利用JavaScript编写一个网页倒计时功能,并结合提供的`index.html`和`js`文件进行解析。 首先,我们需要理解JavaScript中的时间处理。JavaScript使用`Date`对象来表示日期和时间,它提供了...

    95、精确到毫秒jQuery倒计时代码

    总的来说,精确到毫秒的jQuery倒计时代码是一个挑战,但通过掌握基本的JavaScript Date对象和jQuery的DOM操作,我们可以创建出高效且用户友好的倒计时组件。对于学习和提升JavaScript技能,这样的实践项目非常有价值...

    元旦倒计时html/元旦倒计时js/元旦节日祝福html源码【元旦倒计时效果很炫酷】

    在本文中,我们将深入探讨如何使用原生JavaScript来实现一个倒计时特效,特别是针对2023年的元旦。这个倒计时功能不仅限于元旦,通过调整代码,你可以将其应用到任何特定的节日或日期。我们将从以下几个方面展开讨论...

    JS倒计时源码

    JavaScript(简称JS)倒计时源码是一种常见的前端开发技术,用于实现网页上的时间计时功能,例如活动截止、考试开始等场景。本资源包含一个实现了天、小时、分钟和秒显示的倒计时功能的JS代码示例。下面将详细讲解JS...

    淘宝聚划算倒计时JS代码 - 精确到毫秒

    淘宝聚划算倒计时JS代码 - 精确到毫秒 [保证可用]

    js短信验证码倒计时(页面刷新无效)

    本文将深入探讨如何实现一个js短信验证码倒计时功能,同时确保在页面刷新后倒计时状态能够保持。 首先,我们需要理解验证码发送和倒计时的基本逻辑。当用户点击获取验证码按钮时,前端会向后端发送请求,请求发送...

    精确到毫秒jQuery倒计时代码.zip

    通过学习和理解这个代码,开发者不仅可以掌握如何在JavaScript和jQuery中实现倒计时,还能了解到如何处理时间差的计算以及毫秒级精度的挑战。对于提升前端开发技能和增强项目实战经验都是非常有价值的。

    倒计时功能插件js

    本文将深入探讨“倒计时功能插件js”的相关知识点,帮助开发者理解如何利用JavaScript实现倒计时功能。 首先,倒计时功能是网页或应用中常见的一种交互元素,通常用于事件预告、促销活动等场景。在JavaScript中,...

    jquery实现倒计时,支持多行分别无限循环倒计时

    - 通过将毫秒数转换为天、小时、分钟和秒,我们可以构建出倒计时的显示格式。 3. **jQuery实现**: - 使用jQuery选择器选取需要展示倒计时的元素,如`$("#countdown")`。 - 创建一个`setInterval`函数,每秒更新...

    JS时间倒计时

    JavaScript时间倒计时是网页开发中常见的功能,用于实现如活动剩余时间、考试倒计时等动态显示。在JavaScript中,我们通常会结合Date对象和setInterval函数来实现这一功能。接下来,我们将深入探讨如何使用...

    考试系统js时间倒计时

    "考试系统js时间倒计时"这个主题关注的就是如何利用JavaScript来实现考试页面上的时间倒计时功能。JavaScript是一种广泛用于网页交互和动态效果的编程语言,非常适合在网页上实时更新时间信息。 首先,我们需要理解...

    js实现的倒计时定时自动关机源码

    实现倒计时功能的核心是创建一个循环,每秒或每毫秒减少设定的时间。这个循环可以使用setInterval函数启动,然后在每次迭代中更新页面上的显示,并在到达零时触发自动关机的逻辑。 4. **自动关机逻辑**: 虽然...

    实例讲解多个js毫秒倒计时同时进行效果

    在JavaScript中,倒计时是一种常见的应用场景,例如用于活动开始前的预告或者倒计时结束后的提醒。本实例将详细讲解如何实现多个毫秒级倒计时同时进行的效果。通过以下步骤,我们可以创建一个功能,它接受HTML元素的...

    vue实现天时分秒倒计时效果.rar

    在Vue.js框架中实现天时分秒倒计时效果,主要涉及到组件化开发、时间处理、数据绑定以及定时器的使用。以下是对这个项目中关键知识点的详细解释: 1. **Vue.js**: Vue.js 是一个轻量级的前端JavaScript框架,它提供...

Global site tag (gtag.js) - Google Analytics