分享最简单的JavaScript倒计时代码(附完整代码)

工作中经常需要在页面中设置倒计时,那你知道js倒计时代码怎么写吗?这篇文章就给大家分享一个最简单的js倒计时代码,以及详细的倒计时js代码的思路,,有一定的参考价值,感兴趣的朋友可以看看。

举例:设定一个截止日期,显示剩余时间。比如双十一马上来了,商家搞活动,可以用JS倒计时显示距离活动结束还有多久。具体代码如下:

HTML部分:

  
                                        
 

登录后复制

给四个 标签,用于显示剩余的天数,小时,分钟和秒

JavaScript部分:

立即学习“Java免费学习笔记(深入)”;

  function countTime() {            //获取当前时间            var date = new Date();            var now = date.getTime();            //设置截止时间            var endDate = new Date("2018-10-31 0:0:0");            var end = endDate.getTime();            //获取截止时间和当前时间的时间差            var leftTime = end-now;            //定义变量 d,h,m,s分别保存天数,小时,分钟,秒            var d,h,m,s;            //判断剩余天数,时,分,秒            if (leftTime>=0) {                d = Math.floor(leftTime/1000/60/60/24);                h = Math.floor(leftTime/1000/60/60%24);                m = Math.floor(leftTime/1000/60%60);                s = Math.floor(leftTime/1000%60);                               }            //将时间赋值到div中            document.getElementById("day").innerHTML = d+"天";            document.getElementById("hour").innerHTML = h+"时";            document.getElementById("minute").innerHTML = m+"分";            document.getElementById("second").innerHTML = s+"秒";            //递归每秒调用countTime方法,显示动态时间效果            setTimeout(countTime,1000);         } 

登录后复制

 倒计时JS代码的思路:

1、用 date = new Date() 获取当前时间

2、设置截止时间 endDate = new Date(“2018-10-31 0:0:0”)

3、获取时间差  leftTime = end-now

4、定义变量 d,h,m,s,用if函数判断剩余的天数和时分秒

5、用innerHTML将时间赋值到div中

6、递归每秒调用countTime函数的方法,显示动态时间效果

效果如图所示:

图片1.jpg

以上和大家分享了一个简单的JS倒计时代码,详细讲解了JS倒计时代码的思路,工作中可以直接拿去使用,比较简单,初学者可以自己动手尝试,看看能不能实现倒计时的效果,希望这篇文章对你有所帮助!

相关视频教程推荐:JavaScript视频教程

以上就是分享最简单的JavaScript倒计时代码(附完整代码)的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2739331.html

(0)
上一篇 2025年3月8日 02:03:59
下一篇 2025年3月6日 18:58:13

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • JavaScript实现插入节点方法总结

    javascript如何实现插入节点?本篇文章就给大家总结了几种javascript插入节点的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 JS原生API插入节点的方式大致有innerHTML、outerHTML、…

    2025年3月8日
    200
  • 详解js数组实现排序的sort()方法(代码实例)

    sort()如何实现js数组的排序?本篇文章就给大家介绍一下js数组实现排序的sort()方法,让大家可以了解js数组中sort()排序的原理,知道sort()是如何给js数组排序的。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有…

    2025年3月8日
    200
  • javascript中深拷贝和浅拷贝的区别介绍

    本篇文章给大家带来的内容是关于javascript中深拷贝和浅拷贝的区别介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 本文解释javascript中深拷贝和浅拷贝的区别。 浅拷贝/Shallow Copy 浅拷贝指拷…

    2025年3月8日
    200
  • $.ajax 、axios和fetch的简单介绍(附代码)

    本篇文章给大家带来的内容是关于$.ajax 、axios和fetch的简单介绍(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 Ajax 是什么? 答:Ajax是一种可以在浏览器和服务器之间使用异步数据传输(HTT…

    编程技术 2025年3月8日
    200
  • js中获取时间的常用方法(代码)

    本篇文章给大家带来的内容是关于js中获取时间的常用方法(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 1、获取当前时间的时间戳 //第一种方法(精确到秒) var timestamp = Date.parse(ne…

    编程技术 2025年3月8日
    200
  • js线程机制与事件机制的详细介绍(图文)

    本篇文章给大家带来的内容是关于js线程机制与事件机制的详细介绍(图文),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 一、进程与线程 1.进程 进程是指程序的一次执行,它占有一片独有的内存空间,可以通过windows任务管…

    2025年3月8日 编程技术
    200
  • bootstrap datetimepicker日期插件美化的效果(代码)

    本篇文章给大家带来的内容是关于bootstrap datetimepicker日期插件美化的效果(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 需求: (1)日期面板默认展开 (2)可以根据点击的日期,处理额外的信…

    2025年3月8日
    200
  • 九个常用的JavaScript图表库的介绍

    本篇文章给大家带来的内容是关于九个常用的javascript图表库的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 当前,数据可视化已经成为数据科学领域非常重要的一部分。不同网络系统中产生的数据,都需要经过适当的可视化…

    2025年3月8日 编程技术
    200
  • css float的详细讲解(附实例)

    本篇文章给大家带来的内容是关于css float的详细讲解(附实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 div+css布局,是前端开发人员的核心技能,在工作中占很大的比重。良好的前端布局是进行javascrip…

    2025年3月8日 编程技术
    200
  • tab开发的一个简单实例(代码)

    本篇文章给大家带来的内容是关于tab开发的一个简单实例(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。使用了以下方法方法1-3中使用的changetabhandle函数 //当前点击按钮的索引function cha…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论