源码如下：

原理很简单，看注释吧

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Jun倒计时</title>

</head>

<style>

    *{

        margin: 0;

        padding: 0;

    }

    p{

        font-size: 66px;

        text-align: center;

    }

    p span{

        color: red;

        background:blanchedalmond;

    }

    p span .time{

        color: black;

        background: white;

    }

    body{

        padding-top: 200px;

    }

</style>

<body>

    <p>距离2019年4月7号</p>

    <p>

        <span>

            <!--这里面内容有js添加-->

        </span>

    </p>

    <script>

        function formatNum(time) {

            return time < 10 ? "0" + time : "" + time;

        }

        <!--函数作用：获取目标时间与现在时间的差，把结果处理后，动态填充到body中-->

        function getCountdownDate() {

            var oDate = new Date();

            var oTime = oDate.getTime();    //现在距离1970年的毫秒数

            var planDate = new Date("2019/4/7 00:00:00");

            var planTime = planDate.getTime();

            //var resultSecond = (planTime - oTime) / 1000;   //毫秒变秒,这里结果不是整数

            var resultSecond = Math.floor((planTime - oTime) / 1000);   //毫秒变秒

            var day = Math.floor(resultSecond / 86400);  //60*60*24=86400秒，即一天的总秒数

            resultSecond %=  86400;     //取余，得到余下的不到一天的秒数

            var hour = Math.floor(resultSecond / 3600);  //60*60=3600秒，一个小时的总秒数

            resultSecond %=  3600;     //取余，得到余下的不到一个小时的秒数

            var minute = Math.floor(resultSecond / 60);     //... ...

            var second = resultSecond % 60 ;      //取余，得到余下的不到一分钟的秒数

            var str = formatNum(day) + "<span class ='time'>天</span>" +

                formatNum(hour) + "<span class ='time'>时</span>" +

                formatNum(minute) + "<span class ='time'>分</span>" +

                formatNum(second) + "<span class ='time'>秒</span>";

            var targetSpan = document.getElementsByTagName("span")[0]; //获取填充的位置

            targetSpan.innerHTML = str;   //填充

        }

        getCountdownDate();

        setInterval(getCountdownDate,1000);

    </script>

</body>

</html>

　　

浏览器结果：

用js实现倒计时功能的更多相关文章

  1. destoon开发笔记-JQ+JS实现倒计时功能

    页面代码 <div class="time " class="" id="onBidtime125" pid="125&qu ...

  2. js网页倒计时功能（天，时，分，秒）

    给定任何一个时间,然后实现现在到那个时间的倒计时. 下面的例子是显示现在到2019年8月1号0时0分的倒计时: <div class="list"> <span ...

  3. 模块：js实现一个倒计时功能

    1.给显示内容加样式 <style> #p1{font-size: large; color: red;} </style> 2.客户端页面 <div id=" ...

  4. js实现是倒计时功能

    工作中经常用到倒计时的功能,最近在整理之前做的项目的时候,发现自己写过一个倒计时的功能的效果,这里和大家分享下!实现这个功能是用原生js写的,不需要加载额外的库文件!功能比较简单,但是可以在此基础上扩 ...

  5. JS实现为控件添加倒计时功能

    一.概述 在有些报表需求中,需要为控件添加倒计时功能,限制到某一个时间点后能进行一项操作或不能进行某项操作,比如查询,导出功能等等,又需要人性化地显示还有多少时间,即倒计时功能,比如下图中我们限制这个 ...

  6. 原生js实现一个简单的倒计时功能

    大家好,我是云中君!欢迎大家来观看我的博客 之前那,在群里看到很多人问,关于电商网站中的倒计时功能怎么实现,很多人说在网上找了很多插件,但是不是很会用,所以今天就在这里分享一下我封装的一个小的倒计时功 ...

  7. 微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能

    微信小程序+WEB使用JS实现注册[60s]倒计时功能开发步骤: 1.wxml页面代码: <text>绑定手机</text> <form bindsubmit=" ...

  8. js之验证码倒计时功能

    <!DOCTYPE html> <html > <head> <meta http-equiv="Content-Type" conten ...

  9. 原创：微信小程序+WEB使用JS实现注册【60s】倒计时功能

    1.效果图: 2.页面仅仅利用了JS的相关功能,包含:wxml.js.wxss 2.1wxml页面代码: <text>绑定手机</text> <form bindsubm ...

随机推荐

  1. 【Educational Codeforces Round 38】D. Buy a Ticket 堆优化Dijkstra

    题意 给定一张无向图,对每个点$i\in S$求$\min_{j\in S} {2\times d(i,j)+a_j}$ 考虑多源多汇最短路会超时,换个角度考虑每个$j$,如果$j=i$,那么答案为$ ...

  2. 幻想乡三连C：狂飙突进的幻想乡

    题解: 不难发现,对于每一条从$S$到$T$的路径,设其$x.y$的和为$S_x.S_y$,其对答案的贡献是$a\cdot S_x+(1-a)\cdot S_y$,这是一个关于$a$的一次函数.而所有 ...

  3. CH#56C 异象石 和 BZOJ3991 [SDOI2015]寻宝游戏

    异象石 CH Round #56 - 国庆节欢乐赛 描述 Adera是Microsoft应用商店中的一款解谜游戏. 异象石是进入Adera中异时空的引导物,在Adera的异时空中有一张地图.这张地图上 ...

  4. Navicat生成数据库结构同步SQL

    作为一个苦逼的技术男,在做开发的时候经常会遇见程序版本升级,数据库结构变化.我们需要一个快捷的方式让客户尽快从旧版本数据库结构更新至新版本数据库结构.如果每做一次改动我们就记录一下当然是好事,但是万一 ...

  5. LVS实战1

    (一).NAT模式:NAT模型:地址转换类型,主要是做地址转换,类似于iptables的DNAT类型,它通过多目标地址转换,来实现负载均衡:特点和要求: 1.LVS(Director)上面需要双网卡: ...

  6. SpringBoot系列（1）

    简介:用来简化新Spring应用的初始搭建以及开发过程:该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置. 特点:1. 创建独立的Spring应用程序2. 嵌入的Tomcat, ...

  7. <正则吃饺子>：关于java中垃圾回收技术的简单学习总结

    知识介绍来自网络,后面会根据继续学习进行补充和适当的修改,谢谢!原文地址:http://www.importnew.com/26821.html#comment-578355 java中的垃圾回收机制 ...

  8. 关于javaScript事件委托的那些事

    今天是第一次写稿,还是有那么一丢丢小鸡冻...回归正题啦... 关于javaScript事件委托不得不说的那些事,为什么要使用事件委托? 我们可以这么说,假设老板要分配一项任务,首先要秘书叫A君来到办 ...

  9. 【Java】Java程序员面试宝典(第三版)第5章----Java程序设计基本概念

    1.static静态变量,在次级作用域也可以被修改. 2.k++ + k++.第一个自加实际上只有在与计算+k++时补增.详情P36的题目. 3.Java数据类型从低到高分为(byte short c ...

  10. Flask11 Session、CSRF、注销session、利用端点自动跳转

    1 怎么对存储的cookie数据进行加密 利用response对象去设置cookie时,存储到浏览器中的cookie数据都是明文的,容易被一些计算机爱好者利用:利用session存的cookie数据可 ...