下载鸥 > 网站下载 > 开发教程 > JS/JQuery

JS怎样做倒计时效果?

349 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

有帮助,很赞!

信息来源:精准像素
导出教程 下载word版教程
发表评论 共有条评论
关于JS/JQuery


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

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

推荐JS/JQuery开发教程
JS怎样做倒计时效果?
JS怎样做倒计时效果?

在各种盛大的节日、活动前,网站制作倒计时特效可有效给活动页引流。那么,怎样...

1 348
jQuery怎样监听鼠标滚动是向上还是向下的状态?
jQuery怎样监听鼠标滚动是向上还是向下的状态?

知乎鼠标向下滚动显示文章标题,向上滚动显示栏目;又或者向下滚动到底部时异步...

0 450
JS获取当前时间、日期、星期并每秒更新一次
JS获取当前时间、日期、星期并每秒更新一次

很多网站上会有当前年月日、星期、时间的展示。这个展示用php做未免浪费性...

0 303
$(window).height() 和 $(document).height()有什么不同?
$(window).height() 和 $(document).height()有什么不同?

我们常用$(window).height() 和 $(document).height()来监听当前高度,但这个...

1 283
swiper轮播图空白案例记录
swiper轮播图空白案例记录

今天鸥哥在用swiper做轮播图时,轮播效果虽然没问题,但只显示第一张,后面的图片...

0 289
JS控制输入字数的两个方案
JS控制输入字数的两个方案

我们在文章输入框中经常有用到字数控制,但字数控制有两种方案,一种是字母/空...

0 303
js判断windows操作系统还是mac os系统
js判断windows操作系统还是mac os系统

网站日常访客主要是windows和mac os两种操作系统,如果网站提供资源下载,则需...

0 1537
jQuery怎样给图片添加默认域名?
jQuery怎样给图片添加默认域名?

在很多网站中,图片的默认路径是相对于根目录的绝对路径,如果是其他站点引用,则...

0 351
随机JS/JQuery开发教程
JS强制手机端横屏方法
JS强制手机端横屏方法

JS强制手机端横屏显示,需要通过代码来实现,我们需判断手机当前是否竖屏,如果是...

1 558
禁止指定城市/省份IP访问JS代码
禁止指定城市/省份IP访问JS代码

对于小部分站点而言,需要禁止一些地区访问达到安全的目的。那么,怎样通过JS禁...

7 950
给网站加一个复制提示窗口JS代码
给网站加一个复制提示窗口JS代码

给网站加一个复制提示窗口JS代码,复制网站内容就会弹出提示框...

12 399
JS代码解除网页右键限制
JS代码解除网页右键限制

JS解除右键限制方法一...

11 329
本地储存window.localStorage使用方法
本地储存window.localStorage使用方法

浏览器本地储存用window.localStorage方法来完成,window.localStorage分JS原...

15 248
JS年月日星期早中午时间代码
JS年月日星期早中午时间代码

JS年月日星期早中午时间代码,精准像素后台自动问候时间代码,完美简单。...

0 300
JS年月日时分秒实时动态显示代码
JS年月日时分秒实时动态显示代码

JS年月日时分秒实时动态显示代码,每秒自动刷新一次。...

3 270
JS开发本站已运行时间脚本
JS开发本站已运行时间脚本

通过当前时间与站点创建时间进行对比,动态显示本站已运行时间。...

8 290
客服QQ:341553759
点击咨询 常见问题 >
官方交流群:90432500
点击加入