源码如下：

原理很简单，看注释吧

<!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. Javascript-- jQuery事件篇(3)

    on()的多事件绑定 之前学的鼠标事件,表单事件与键盘事件都有个特点,就是直接给元素绑定一个处理函数,所有这类事件都是属于快捷处理.翻开源码其实可以看到,所有的快捷事件在底层的处理都是通过一个&quo ...

  2. 【二叉查找树】02不同的二叉查找树个数II【Unique Binary Search Trees II】

    提到二叉查找树,就得想到二叉查找树的递归定义, 左子树的节点值都小于根节点,右子树的节点值都大于根节点. +++++++++++++++++++++++++++++++++++++++++++++++ ...

  3. jQuery插件:图片放大镜--jQuery Zoom

    本文转载于http://blog.csdn.net/xinhaozheng/article/details/4085644, 这是一款非常不错的给图片添加放大镜效果,可以应用在诸如zen cart,m ...

  4. mysql删除重复数据方法

    create table tmp SELECT * from lhb t where t.id not in (select max(id) from lhb group by code,date,r ...

  5. I.MX6 Busybox watchdog

    /************************************************************************* * I.MX6 Busybox watchdog ...

  6. bzoj 4817: [Sdoi2017]树点涂色 LCT+树链剖分+线段树

    题目: Bob有一棵n个点的有根树,其中1号点是根节点.Bob在每个点上涂了颜色,并且每个点上的颜色不同. 定义一条路径的权值是:这条路径上的点(包括起点和终点)共有多少种不同的颜色. Bob可能会进 ...

  7. Python：collections的deque()方法

    转于:https://www.cnblogs.com/zhenwei66/p/6598996.html 博主:http://www.cnblogs.com/zhenwei66/(渐晨) python3 ...

  8. github 换行符自动转换功能

    最近想把自己的一个Qt工程同步到github上,但是当自己把代码从仓库中签出来的时候编译的时候总是出现一些很奇葩的错误,一开始以为是源文件编码的问题,改了编码以后问题还是没有解决,我比较了一下两个工程 ...

  9. 使用Meshlab软件将点云（Point Cloud）转换为模型（Mesh）

    使用Meshlab软件将点云(Point Cloud)转换为模型(Mesh) 启动Meshlab软件: 导入.ply点云文件: 接着点击: 弹出一个右侧边栏: 接着,计算每个点的法线: 输入100,点 ...

  10. solr搜索应用

    非票商品搜索,为了不模糊查询影响数据库的性能,搭建了solr搜索应用,php从solr读取数据