<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>JS实现倒计时</title>

    <style>

        *{ margin:0; padding:0; list-style:none;}

        body{ font-size:18px; text-align:center;}

        .time{ height:30px; padding:200px;}

    </style>

</head>

<body>

<div class="time">

    <span id="showInterval"></span>

</div>

<script>

    function getDistanceTime(time,showInterval){

        var endTime= new Date(Date.parse(time.replace(/-/g, "/")));/*replace将时间字符串中所有的'-'替换成'/',parse将时间格式的字符串转换成毫秒*/

        var nowTime = new Date();

        var distance =endTime.getTime() - nowTime.getTime();/*getTime把一个date对象转换成毫秒*/

        var day = 0;

        var hour = 0;

        var minute = 0;

        var second = 0;

        if(distance >= 0){

            day = Math.floor(distance/1000/60/60/24);

            hour = Math.floor(distance/1000/60/60%24);

            minute = Math.floor(distance/1000/60%60);

            second = Math.floor(distance/1000%60);

        }else{

            alert("目标日期小于当前日期!")

        }

        document.getElementById(showInterval).innerHTML = day + "天" +  hour + "时" + minute + "分" + second + "秒";

    }

//    setInterval(function(){getDistanceTime('2016/05/19 12:00:00','showInterval');},0);

    setInterval(function(){getDistanceTime('2017-05-19 12:00:00','showInterval');},0);

</script>

</body>

</html>

传入的日期参数格式,也可以是'2017/05/19 12:00:00'

效果如下:

用JS实现倒计时(日期字符串作为参数)的更多相关文章

  1. libs/tools.js stringToDate dateToString 日期字符串转换函数

    libs/tools.js stringToDate dateToString 日期字符串转换函数 import { stringToDate } from '@/libs/tools.js'   e ...

  2. js时间戳和日期字符串相互转换

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  3. 【问题】Asp.net MVC 的cshtml页面中调用JS方法传递字符串变量参数

    [问题]Asp.net MVC 的cshtml页面中调用JS方法传递字符串变量参数. [解决]直接对变量加引号,如: <button onclick="deleteProduct('@ ...

  4. 根据日期字符串获取星期几，日期获取星期，时间获取星期，js获取星期

    根据日期字符串获取星期几,日期获取星期,时间获取星期,js获取星期 >>>>>>>>>>>>>>>>&g ...

  5. 【js Date】时间字符串、时间戳转换成今天，明天，本月等文字日期

    作为前端开发攻城师,难免对时间进行各种计算和格式转换,一个js的Date对象统统可以搞定.下例是将一个具体的时间转换成今天.明天.几天之内.本月等文字描述的日期的工具函数,也可以基于它扩展,多应用于网 ...

  6. js 将long型字符串转换成日期格式

    工作中难免会碰到日期的转换,往往为了方便,后台都是把时间以long型(形如1343818800000)返回给web前端.再有前端自己根据页面需求转换成相应的日期格式.这里将我常用的一个转换时间的函数贴 ...

  7. js日期字符串增加天数的函数

    //日期加天数的方法 //dataStr日期字符串 //dayCount 要增加的天数 //return 增加n天后的日期字符串 function dateAddDays(dataStr,dayCou ...

  8. JS处理日期&字符串格式相互转换

    之前找过一些获取系统日期以及日期&字符串格式相互转换的方式,但总体自我感觉来说还是以下的方式会更适合一些. 如有更好的方式,望大家多多赐教和交流,谢谢! 2016年曾写过一次,不过只是发了一下 ...

  9. JS获取浏览器URL中查询字符串的参数

    首先要知道Location这个对象以及这个对象中的一些属性: href:设置或返回完整的url.如本博客首页返回http://www.cnblogs.com/wymninja/ host:设置或返回主 ...

随机推荐

  1. Codeforces 786E. ALT 最小割+倍增

    E. ALT http://codeforces.com/problemset/problem/786/E 题意: 给出一棵 n 个节点的树与 m 个工人.每个工人有一条上下班路线(简单路径),一个工 ...

  2. 如何在SAP云平台的Cloud Foundry环境下添加新的Service(服务)

    我想在SAP云平台的Cloud Foundry环境下使用MongoDB的服务,但是我在Service Marketplace上找不到这个服务. cf marketplace返回的结果也没有. 解决方案 ...

  3. Codeforces Round #321 (Div. 2) C Kefa and Park（深搜）

    dfs一遍,维护当前连续遇到的喵的数量,然后剪枝,每个统计孩子数量判断是不是叶子结点. #include<bits/stdc++.h> using namespace std; ; int ...

  4. 陆教授浅谈5G毫米波手机天线技术的发展现状和未来的应用场景

    近日,香港城大电子工程学系讲座教授陆贵文教授荣获英国皇家工程院院士荣衔,以表彰他在推动天线研究的卓越贡献.他研发的天线由L形探针馈电微带天线.磁电耦极天线,以至5G毫米波手机天线等技术,均在天线领域影 ...

  5. mysq--索引模块

    问题:为什么要 使用索引? --->快速查询数据,但是仅仅这么回答,就是不专业的!!! 应该要分为数据量少的时候,不适用索引,走全表扫描的话,查询速率也是很快的 数据量大的话,使用索引,查询速率 ...

  6. 标签input的value属性和placeholderde 区别

    placeholder 顾名思义是一个占位符 在你的value为空的时候他才会显示出来,但是他本身并不是value,也不会被表单提交.

  7. React支持装饰器

    在用mobx时用到了装饰器,无奈环境不支持装饰器,搜索了半天,网上教程乱七八糟,最后想到了babel官网上肯定有,一搜果然有,安装教程 见Babel官网. 最快捷的教程是官网文档

  8. 救援（BFS）

    题目描述: 在你的帮助下,Oliver终于追到小X了,可有一天,坏人把小X抓走了.这正是Oliver英雄救美的时候.所以,Oliver又找到哆啦A梦,借了一个机器,机器显示出一幅方格地图,它告诉Oli ...

  9. [51nod] 1301 集合异或和

    考虑不限制xor{Y}>xor{X} 考虑n=m的情况,每个数i∈[1,n]可以被分配到X集合或Y集合,或不分配 设f[S]表示{X} xor {Y} == S的方案数 有f[S]+=2*f[S ...

  10. tomcat如何登录Server Status、Manager App、Host Manager

    启动tomcat后,访问127.0.0.1会进入如下页面 版权声明:本文为博主原创文章,未经博主允许不得转载. 原文地址:https://www.cnblogs.com/poterliu/p/9602 ...