源码如下：

原理很简单，看注释吧

<!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. python字符串相关操作

    字符串搜索相关搜索指定字符串,没有返回-1:str.find('t')指定起始位置搜索:str.find('t',start)指定起始及结束位置搜索:str.find('t',start,end)从右 ...

  2. C++中的前置和后置++

    在C++中进行操作符重载的时候,前置++返回的是一个引用. 这就设计到了对于基本变量进行前置操作时候的理解了. 例如,对于int类型变量,在进行前置++的时候,是会将i进行加1,然后返回i的引用.而i ...

  3. Skype SILK codec overview

    最近简单看了一下Skype SILK codec 算法, 基本原理和流程大体明白了, 以后有时间再仔细研究一下细节,今天就简单说说. SILK Codec是一个语音和音频编解码算法, 对于音频带宽.网 ...

  4. UILabel的富文本显示选项

    UILabel的富文本格式设置 1.实例化方法和使用方法 实例化方法: 使用字符串初始化 - (id)initWithString:(NSString *)str; 例: NSMutableAttri ...

  5. Anthem.NET 的回调流程图

    下面用一个最简单的 anthem:Button 回调作为例子,理清回调过程中执行函数的次序.代码如下: <%@ Page Language="C#" AutoEventWir ...

  6. 测试-Swagger：目录

    ylbtech-测试-Swagger:目录 1.返回顶部 1. https://swagger.io/ 2.Swagger Editor http://swagger.io/swagger-edito ...

  7. JavaScript权威指南读书笔记【第一章】

    第一章 JavaScript概述 前端三大技能: HTML: 描述网页内容 CSS: 描述网页样式 JavaScript: 描述网页行为 特点:动态.弱类型.适合面向对象和函数式编程的风格 语法源自J ...

  8. PHP7三元运算符 ?? 和 ?: 的区别

    1. (expr1) ?? (expr2)  是 PHP7才有的功能,等同于: isset(expr1) ? expr1 : expr2 ; 2.(expr1) ?: (expr2) 是PHP5.3才 ...

  9. Pycharm的远程代码编辑

    作为一个从java转到python的程序猿,一直觉得python的远程代码调试能力不如java,远程调试一把需要各种改代码,牵扯到eventlet库的时候,问题就更严重,需要调整eventlet的各种 ...

  10. SpringMVC 学习笔记(请求方法的返回值和参数)

    在用注解对配置 处理器时,一般是一个方法处理一个请求,不同方法的返回类型有着不同的意义. 返回值为 ModelAndView 类型 ModelAndView 是Model 和 View 的一个集合类型 ...