JS怎样做倒计时效果？

1 517 2021-03-02 12:05:45

在各种盛大的节日、活动前，网站制作倒计时特效可有效给活动页引流。那么，怎样用JS做一个倒计时的效果呢？

本文以精准像素2020年过年倒计时为例，供大家参考。

<div class="gn_box">
<h1><center><font color=#E80017>2</font><font color=#D1002E>0</font><font color=#BA0045>2</font><font color=#A3005C>0</font><font
color=#8C0073>年</font><font color=#75008A>-</font><font color=#5E00A1>新</font><font
color=#4700B8>年</font><font color=#3000CF>倒</font><font color=#1900E6>计</font><font color=#0200FD>时</font>
</center></h1>
<center>
<div id="CountMsg" class="HotDate">
<span id="t_d">157 天</span>
<span id="t_h">9 时</span>
<span id="t_m">7 分</span>
<span id="t_s">42 秒</span>
</div>
</center>
<script type="text/javascript"> function getRTime() {
var EndTime = new Date('2020/01/25 00:00:00');
var NowTime = new Date();
var t = EndTime.getTime() - NowTime.getTime();
var d = Math.floor(t / 1000 / 60 / 60 / 24);
var h = Math.floor(t / 1000 / 60 / 60 % 24);
var m = Math.floor(t / 1000 / 60 % 60);
var s = Math.floor(t / 1000 % 60);
document.getElementById("t_d").innerHTML = d + " 天";
document.getElementById("t_h").innerHTML = h + " 时";
document.getElementById("t_m").innerHTML = m + " 分";
document.getElementById("t_s").innerHTML = s + " 秒";
}
setInterval(getRTime, 1000);
</script>
</div>

效果、实现的思路都是一样的，在这个基础上，只要你对js、html有一点了解，简单改造一下做出各种各样的倒计时效果并不难。

本文地址：https://xzo.com.cn/develop/js/653.html

有帮助，很赞！

信息来源：精准像素

业务合作

如果您认可我们的分享，有意与我们合作开展帝国cms网站建设与开发业务或插件定制，请联系右侧在线客服。我们能给您的，就是高质量的模板与售后。

版权声明

标注了信息来源为下载鸥的文章皆为原创，如果是转载的优质文章，我们也都标注了出处。如果您喜欢我们的文章，请按照下载鸥所标注的文章出处进行标注，谢谢您的配合。

信息标签

兼容pc+手机的轮播插件-swiper3.4.2 JS怎样做距离2020过年倒计时？帝国cms怎样将过期下架产品设为灰色 JS年月日星期早中午时间代码 JS获取当前时间、日期、星期并每秒更新一次帝国cms查询指定时间段发布的信息如何获取时间？ js怎样判断现在是早上中午还是晚上帝国CMS列表页面list.var怎样将年月日时间分开调用？帝国cms灵动标签日期用英文显示的方法 jQuery霓虹灯特效插件免费下载 jQuery怎样实现动态倒计时效果？ CSS3怎样简单实现循环旋转效果？帝国cms怎样用自定义列表/灵动标签调用当天发布的信息？帝国cms自带的年月日时间选择js怎么用? JS实现文字向上循环滚动特效 mysql判断数据库表里的时间戳是不是今天记录的帝国CMS实际发布时间、最后修改时间有何区别如何调用？ jQuery2021牛年新年放鞭炮动画代码，可点火爆炸帝国CMS调用当天发布的信息帝国CMS按照日期调用当日更新信息教程

导出教程下载word版教程

关于前端开发

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

JavaScript十分强大，不管是前端页面开发、视觉动态渲染、数据交互还是后端逻辑处理，都可以通过JS实现。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中。