<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js时分秒毫秒倒计时</title>
</head>
<body>
<div>
<span id="_d">00</span>
<span id="_h">00</span>
<span id="_m">00</span>
<span id="_s">00</span>
<span id="_ms">00</span>
</div>
<script type="text/javascript">
function countTime() {
var date = new Date();
var now = date.getTime();
var endDate = new Date("2018-8-20 18:28:00");//设置截止时间
var end = endDate.getTime();
var leftTime = end - now; //时间差
var d, h, m, s, ms;
var timer;
if(leftTime >= 0) {
d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
m = Math.floor(leftTime / 1000 / 60 % 60);
s = Math.floor(leftTime / 1000 % 60);
ms = Math.floor(leftTime % 10);
if(ms < 10) {
ms = "0" + ms;
}
if(s < 10) {
s = "0" + s;
}
if(m < 10) {
m = "0" + m;
}
if(h < 10) {
h = "0" + h;
}
//将倒计时赋值到div中
document.getElementById("_d").innerHTML = d + "天";
document.getElementById("_h").innerHTML = h + "时";
document.getElementById("_m").innerHTML = m + "分";
document.getElementById("_s").innerHTML = s + "秒";
document.getElementById("_ms").innerHTML = ms + "毫秒";
//递归每秒调用countTime方法，显示动态时间效果
timer = setTimeout(countTime, 50);

} else {
console.log('已截止')
document.getElementById("_d").innerHTML ="00天";
document.getElementById("_h").innerHTML ="00时";
document.getElementById("_m").innerHTML ="00分";
document.getElementById("_s").innerHTML ="00秒";
document.getElementById("_ms").innerHTML = "00毫秒";
}

}

countTime();
</script>
</body>
</html>

JS倒计时-毫秒的更多相关文章

  1. js 倒计时毫秒级别显示

    <html> <head> <style> div{ width:100%; text-align:center; font-size: 14px; } </ ...

  2. js倒计时-倒计输入的时间

    计算指定时间到指定时间之间相差多少天.时.分.秒. 节日.活动.商城常用. 原理: 主要使用到时间戳,也就是从1970 年 1 月 1 日 到指定时间的毫秒数. 1. 求出毫秒差 :当两个时间直接进行 ...

  3. js 倒计时（可自定义时间）

    <html> <head> <title>js 倒计时</title> </head> <body> <div> & ...

  4. js倒计时显示

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...

  5. Js倒计时程序

    Js倒计时程序 点击下载

  6. 用js完成毫秒格式数据的日期格式化任务

    后台传过来的数据  creationTime  在后台是Date类型的 毫秒转换成  05-24  月 日格式的 //获得月日得到日期oTime function getMoth(str){ var  ...

  7. JS倒计时网页自动跳转代码

    <title>JS倒计时网页自动跳转代码</title> <script language="JavaScript" type="text/ ...

  8. JS倒计时 代码

    JS倒计时 代码 <div> <span id="KSD">3</span>天 <span id="KSH">1 ...

  9. js倒计时函数和(js禁用和恢复a标签的操作)

    <script type="text/javascript"> /*获取手机号*/ var start_time=60; function get_phone_nums ...

随机推荐

  1. 性能分析神器VisualVM【转】

    性能分析神器VisualVM[转] Posted on 2015-04-17 09:37 WadeXu 阅读(5809) 评论(6) 编辑 收藏 VisualVM 是一款免费的,集成了多个 JDK 命 ...

  2. Eclipse 常用快捷键 (动画讲解)【转】

    Eclipse 常用快捷键 (动画讲解)[转] Eclipse有强大的编辑功能, 工欲善其事,必先利其器, 掌握Eclipse快捷键,可以大大提高工作效率. 小坦克我花了一整天时间, 精选了一些常用的 ...

  3. 简单搭建 @vue-cli3.0 及常用sass使用

    1,在安装了Node.js后使用其中自带的包管理工具npm.或者使用淘宝镜像cnpm(这里不做说明) 1-1,下载vue3.0脚手架(如果之前装vue-cli3x之前的版本,先卸载 npm unins ...

  4. Vue创建项目环境

    目录 Vue项目环境搭建 Vue项目创建 pycharm配置并启动vue项目 vue项目目录结构分析 vue组件(.vue文件) 全局脚本文件main.js(项目入口) 改写 Vue项目环境搭建 &q ...

  5. 关于将ECharts引入到项目中的几种方式

    方式一.在webpack中使用ECharts 1.npm安装ECharts npm install echarts --save 2.引入ECharts 通过 npm 上安装的 ECharts 和 z ...

  6. Spring中的Junit

    Spring中的Junit package com.imooc.test.base; import org.junit.After; import org.junit.Before; import o ...

  7. 洛谷P2471——[SCOI2007]降雨量

    本机AC提交RE…… 传送门:QAQQAQ 题意:自己看 思路:据说这道题用RMQ做很快,但这道题线段树是可以的 线段树维护一段区间最左年,最右年,是否有间隙和区间最大值 这道题分类讨论是一大难点,主 ...

  8. Python学习day10-文件处理

    figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...

  9. kafka一些问题点的分析

    kakfka架构图: 理解kafka需要理解三个问题. 1.producer,broker,consumer,ZK的工作模式. broker,ZK是作为一个后台服务,而producer和consume ...

  10. 03.Hibernate配置文件之核心配置文件

    一.核心配置文件的两种配置方式 1.属性文件方式 hibernate.properties(基本不会选用 hibernate.connection.driver_class=com.mysql.jdb ...