倒计时是2019年6月7号10点开始的

代码粘贴过去直接运行即可

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>倒计时</title>

</head>

<body>

    <div id="timeBox">

    </div>

</body>

<script>

    // 获取容器

    var timeBox = document.querySelector('#timeBox');

    // 倒计时方法

    /*

       times 为未来的事件 为时间戳

    */

    function countDown(times) {

        // 正常是要校验的自己使用就不校验了，知道怎么传参

        // 获取今天的事件戳

        var today = new Date().getTime();

        // 当前时间已经大于传入的时间，times不属于未来时

        if (today >= times) {

            return {

                countdownHtml: '倒计时已经结束了',

                flag: true

            }

        }

        // 获得剩余的毫秒数

        var timeDiff = times - today;

        //计算剩余的天数

        //  /1000 转化成秒  / 60 转化成分 /60 转化成时 //转化成天  10 是 10进制

        var d = parseInt(timeDiff / 1000 / 60 / 60 / 24, 10);

        // 计算剩余的小时 总小时 除余 剩下的就是小时

        var h = parseInt(timeDiff / 1000 / 60 / 60 % 24, 10);

        // 计算剩余的分钟 总分钟数 除余 60 剩下的就是小时

        var M = parseInt(timeDiff / 1000 / 60 % 60, 10);

        // 计算剩余的秒数 同上的同样的

        var s = parseInt(timeDiff / 1000 % 60, 10);

        var seperator1 = "天";

        var seperator2 = "时";

        var seperator3 = "分";

        var seperator3 = "秒";

        // 小于两位数前边➕0

        d = d < 9 ? "0" + d : d;

        h = h < 9 ? "0" + h : h;

        M = M < 9 ? "0" + M : M;

        s = s < 9 ? "0" + s : s;

        var countdown = d + seperator1 +

            h + seperator2 +

            M + seperator3 +

            s + seperator3

        return {

            countdownHtml: countdown,

            flag: false

        }

    }

    // 创建一个未来时间

    var times = new Date('2019/6/7 10:00').getTime();

    // 获取倒计时返回的对象

    var count = countDown(times);

    // 调用一次函数弥补计时器空缺的一秒

    timeBox.innerHTML = count.countdownHtml;

    // 调用计时器

    var interval = setInterval(function() {

        // 重新获取倒计时返回的对象

        var count = countDown(times);

        if (count.flag) {

            clearInterval(interval);

        }

        timeBox.innerHTML = count.countdownHtml;

    }, 1000)

</script>

</html>

js原生倒计时的更多相关文章

  1. js时间倒计时

    看了网上的其他的例子,觉得写的都有点复杂,不好理解,于是自己动手写了个. 本来想封装成jquery插件,但是觉得因为功能很简单,没有必要做成jquery插件,引用的时候不需要引入jqery库,这里直接 ...

  2. js原生代码实现轮播图案例

    一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...

  3. 倒计时的js实现 倒计时 js Jquery

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=987 一.如火如荼的团 ...

  4. 一个简单的js实现倒计时函数

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. JS原生效果瀑布流布局的实现(一)

    JS原生效果 实现: HTML页面布局: <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...

  6. 工作当中实际运用（3）——js原生实现鼠标点击弹出div层 在点击隐藏

    function onmou(){ var divs=document.getElementById('kefuDV');//获取到你要操作的div if (divs.style.display==& ...

  7. 仿jQuery的siblings效果的js原生代码

    仿jQuery的siblings效果的js原生代码 <previousSibling> 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点). <nextSibling&g ...

  8. js原生的url操作函数，及使用方法。（附：下边还有jquery对url里的中文解码函数）

    js原生的url操作函数,完善的. /*****************************/ /* 动态修改url */ /*****************************/ var ...

  9. js实现倒计时及时间对象

    JS实现倒计时效果代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> ...

随机推荐

  1. 浅谈session和cookie

    含义: session(会话):指用户登录网站后的一系列动作,比如浏览商品添加到购物车并购买 cookie:用户身份的一种标识 区别: 1.Cookie通过在客户端记录信息确定用户身份,Session ...

  2. JAVA第十次作业

    JAVA第十次作业 (一)学习总结 1.用思维导图对java多线程的学习内容进行总结. 参考资料: XMind. 2.下面是一个单线程实现的龟兔赛跑游戏. public class TortoiseH ...

  3. js作用域和内存

    对于一本编程语言来讲,个人认为,最基本的就是存储,在存储,读取,计算值的时候是按照一定的规则来操作,这套规则呢就叫做作用域. 值保存,读取,的时候需要一个范围,如果以按照函数为单位的话就做函数作用域, ...

  4. abaqus python库变强变大233333333333333

    有没有小伙伴想在 至于怎么安装pip 度小娘一位大神提供了办法  https://jingyan.baidu.com/article/7e4409533f32092fc0e2ef24.html 如有需 ...

  5. 编译原理作业(第一次)-完成retinf.c(阉割版)

    首先,作业要求概括如下: 根据前缀表达式文法,实现statements() 和expression() 两个函数. 并且要求使得语义分析在完成分析前缀表达式并输出中间代码的同时,也能够将前缀表达式翻译 ...

  6. meven仓库设置局域网私服

    找到设置文件 在设置文件中配置私服地址

  7. 为什么要用docker

    一:更高效的利用系统资源            由于容器不需要进行硬件虚拟以及运行完整操作系统等额外开销,Docker 对系统资源的利用率更高.无论是应用执行速度.内存损耗或者文件存储速度,都要比传统 ...

  8. SpeedReader for Mac(快速阅读器)v1.6免费版

    SpeedReader for Mac是一款运行在Mac平台上的阅读软件,通过这款软件就可以自行调整阅读速度.通过SpeedReader Mac版用户可以将想要阅读的内容拖入到软件中,调整速度和字体, ...

  9. Unity 3D中不得不说的yield协程与消息传递

    1. 协程 在Unity 3D中,我们刚开始写脚本的时候肯定会遇到类似下面这样的需求:每隔3秒发射一个烟花.怪物死亡后20秒再复活之类的.刚开始的时候喜欢把这些东西都塞到Update里面去,就像下面这 ...

  10. 工控随笔_14_西门子_Step7项目：打开项目不可用解决方法

    由于计算机系统区域和语言的设置,以及Step建立项目时的不同设置,有时候利用Step7打开项目时 会遇到如下情况:   项目不可用. 具体如下图所示: 图 step 7 打开时项目不可用 一.Step ...