源码如下：

原理很简单，看注释吧

<!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. codeforces 622C C. Not Equal on a Segment

    C. Not Equal on a Segment time limit per test 1 second memory limit per test 256 megabytes input sta ...

  2. the referenced script on this behaviour is missing!

    1.看看你脚本上挂的某个组件是不是发生了变动,比如被删除了什么的 2.最有可能的是你创建完脚本后,中途改过脚本的名字,致使脚本名字和内部的名字不统一.

  3. IE input 去掉文本框的叉叉和密码输入框的眼睛图标

    ::-ms-clear, ::-ms-reveal{display: none;}

  4. ffmpeg处理rtmp/文件/rtsp的推流和拉流

    ffmpeg处理rtmp/文件/rtsp的推流和拉流   本demo演示了利用ffmpeg从服务器拉流或本地文件读取流,更改流url或文件类型名称发送回服务器或存到本地的作用. 由于本程序只写了3个小 ...

  5. Homer Conferencing

    Homer Conferencing (short: Homer) is a free SIP softphone with advanced audio and video support. The ...

  6. bzoj 4504: K个串 可持久化线段树+堆

    题目: Description 兔子们在玩k个串的游戏.首先,它们拿出了一个长度为n的数字序列,选出其中的一 个连续子串,然后统计其子串中所有数字之和(注意这里重复出现的数字只被统计一次). 兔子们想 ...

  7. 洛谷 P2701 [USACO5.3]巨大的牛棚Big Barn

    题目背景 (USACO 5.3.4) 题目描述 农夫约翰想要在他的正方形农场上建造一座正方形大牛棚.他讨厌在他的农场中砍树,想找一个能够让他在空旷无树的地方修建牛棚的地方.我们假定,他的农场划分成 N ...

  8. 【LeetCode】036. Valid Sudoku

    题目: Determine if a Sudoku is valid, according to: Sudoku Puzzles - The Rules. The Sudoku board could ...

  9. Oracle12c多租户如何连接到CDB或PDB、CDB与PDB容器切换

    Oracle 数据库 12 c 多租户选项允许单个容器数据库 (CDB) 来承载多个单独的可插拔数据库 (PDB).那么我们如何连接到容器数据库 (CDB) 和可插拔数据库 (PDB). 1. V$S ...

  10. 洛谷P4721 【模板】分治 FFT（生成函数+多项式求逆）

    传送门 我是用多项式求逆做的因为分治FFT看不懂…… upd:分治FFT的看这里 话说这个万恶的生成函数到底是什么东西…… 我们令$F(x)=\sum_{i=0}^\infty f_ix^i,G(x) ...