源码如下：

原理很简单，看注释吧

<!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. Bootstrap-other内置组件

    1.缩略图 缩略图在网站中最常用的地方就是产品列表页面,一行显示几张图片,有的在图片底下(左侧或右侧)带有标题.描述等信息.Bootstrap框架将这一部独立成一个模块组件.并通过“thumbnail ...

  2. struts2--Basic(一)

    Struts是流行和成熟的基于MVC设计模式的WEB应用程序框架. 帮助我们减少在运用MVC设计模式来开发Web应用的时间. 1.下载添加jar包 2. 准备配置文件 web.xml <filt ...

  3. (转)gcov、lcov与genhtml 使用心得

    gcc是linux平台下的C.C++ 编译器 gcov是配合gcc产生覆盖信息报告的工具: lcov是将gcov产生的报告信息,以更直观的方式显示出来工具 基本的使用方法分为4个阶段: (一).gcc ...

  4. hsv空间

    hsv在不同的软件中,有不同的阈值, 在描述阈值之前,看一下它的定义,按照标准的定义,hsv应该是从0°到360°的一个环,加上一个表示亮度的轴,重点就是那个环. 这个环如图一,0°一般为红色120° ...

  5. SPOJ8093Sevenk Love Oimaster（广义后缀自动机）

    Oimaster and sevenk love each other.     But recently,sevenk heard that a girl named ChuYuXun was da ...

  6. 第K大子集-LH

    题解:搜索+二分 对于每个数有选与不选两种情况.然后我们先搜前一半的状态,每个数选还是不选. 有2^17种,然后我将每种状态拍一个序先存着.然后我再搜后一半的状态,2^18种. 假设后一半某一种情况的 ...

  7. IronPython 源码剖析系列（1）：IronPython 编译器

    自 IronPython 正式发布以来,由于对 Python 语言的喜爱所驱使,同时我想藉此去了解一下编程语言的编译器,分析器等程序是什么原理,如何运作的,所以我开始了对 IronPython 源代码 ...

  8. docker 容器内服务自启动

    centos6/7 有区别先说6 centos6: 方式一:rc.local + 容器内的启动脚本 1.chkconfig docker on #docker开机自启动2.[root@master y ...

  9. 使用PowerShell创建Azure Storage的SAS Token访问Azure Blob文件

    Azure的存储包含Storage Account.Container.Blob等具体的关系如下: 我们常用的blob存储,存放在Storage Account的Container里面. 目前有三种方 ...

  10. redis多机集群部署文档

    redis多机集群部署文档(centos6.2) (要让集群正常工作至少需要3个主节点,在这里我们要创建6个redis节点,其中三个为主节点,三个为从节点,对应的redis节点的ip和端口对应关系如下 ...