<!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. docker-java的使用

    1. docker java 的api需要证书的认证 在/home/hett文件下创建certs证书 生成服务器私钥,命令如下: $openssl genrsa -out server-key.pem ...

  2. python基础教程总结5——函数

    1.函数创建 1).函数代码块以def关键词开头,后接函数标识符名称和圆括号()2).任何传入参数和自变量必须放在圆括号中间.圆括号之间可以用于定义参数3).函数的第一行语句可以选择性地使用文档字符串 ...

  3. JPA + EclipseLink + SAP云平台 = 运行在云端的数据库应用

    JPA(Java Persistence API)的实现Provider有Hibernate,OpenJPA和EclipseLink等等. 本文介绍如何通过JPA + Eclipse连接SAP云平台上 ...

  4. IM云通信行业步入快车道，谁将成为代表中国的全球IM“独角兽”？

    2016年,Twilio的成功上市,以及抢眼的股价表现,拓宽了全球云通信行业的想象空间,行业内公司估值水平也集体上调. 在中国,IM云通信行业也从2016年开始进入了一个“黄金发展时期”,一批如融云. ...

  5. C11 C语言文件的读写

    目录 文件的打开和关闭 字符流读写文件 文件的打开和关闭 fopen( ) fopen( ) 函数来创建一个新的文件或者打开一个已有的文件,这个调用会初始化类型 FILE 的一个对象,类型 FILE ...

  6. TCP/IP协议头部结构体

    TCP/IP协议头部结构体(转) 网络协议结构体定义 // i386 is little_endian. #ifndef LITTLE_ENDIAN #define LITTLE_ENDIAN (1) ...

  7. C语言预处理_05

    凡是以 “#”开头的均为预处理命令! 其定义的一般形式为: #define  标示符  字符串 对于宏定义说明以下几点: 1.宏定义是用宏名来表示一个字符串,在宏展开时又以该字符串取代宏名,这只是一种 ...

  8. poj1265 Area

    题目描述: vjudge POJ 由于题目乱码概括一下题意: 给出一个路径,求围成多边形中内部点数.边上点数(包括顶点)以及面积. 题解: 边上点数=$\sum gcd(dx,dy)$ $Pick$定 ...

  9. 01Qt中的隐式共享

    隐式共享 ​ 隐式共享又称为回写复制(copy on write).当两个对象共享同一分数据时(通过浅拷贝实现数据共享),如果数据不改变,则不进行数据的复制.而当某个对象需要需要改变数据时,则进行深拷 ...

  10. ipvsadm分发MySQL读请求

    在MySQL的部署场景中,经常使用HAproxy和ipvs来作为读请求转发的网关.ipvs的好处在于本身不需要daemon的方式来运行,而是直接作为kernel的服务来提供:当ipvs和应用程序服务器 ...