话不多说,直接上代码:

  有需要直接拿走,

<html>

<head>
<style>
div{
width:100%;
text-align:center;
font-size: 14px;
}
</style>
</head>
<div id="go">
</div>
<body>
<script>
function countTime(time,id) {
var date = new Date();
var now = date.getTime();
var endDate = new Date(time);//设置截止时间
var end = endDate.getTime();
var leftTime = end - now; //时间差
var d, h, m, s, ms;
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 % 1000);
if(ms < 100) {
ms = "0" + ms;
}
if(s < 10) {
s = "0" + s;
}
if(m < 10) {
m = "0" + m;
}
if(h < 10) {
h = "0" + h;
}
//将倒计时赋值到div中
document.getElementById(id).innerHTML = d + "天" + h + "时" + m + "分" + s + "秒"+ ms + "毫秒";
} else {
console.log('已截止')
//将倒计时赋值到div中
document.getElementById(id).innerHTML = "已开抢"
}
//递归每秒调用countTime方法,显示动态时间效果
return leftTime
}
//调用方式 需要传入 结束时间 和 倒计时内容所在的id名称
var s = setInterval(function (){
var dates = countTime("2019-7-2 10:32:00", "go");
if(dates<=0) {
clearInterval(s)
}
},50)
</script>
</body> </html>

前端js倒计时(精确到毫秒)的更多相关文章

  1. jQuery setInterval倒计时精确到毫秒

    效果类似于:购物抢购倒计时-->在跳转N多个页面之后,倒计时间仍然正常显示. 思路: 结束时间是固定不变的(endTime),一直在改变的是当下的时间(curTime = new date()) ...

  2. clips 前端 js 倒计时 获取验证码的按钮

    <a href="javascript:void(0);" onclick="get_captcha()" class="btn btn-def ...

  3. 活动倒计时代码(精确到毫秒)jquery插件

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

  4. PHP精确到毫秒秒杀倒计时实例

    精确到毫秒秒杀倒计时PHP源码实例,前台js活动展示倒计时,后台计算倒计时时间.每0.1秒定时刷新活动倒计时时间. PHP: // 注意:php的时间是以秒算.js的时间以毫秒算 // 设置时区 da ...

  5. js网页倒计时精确到秒级

    网页实时倒计时,精确到秒级,和天数倒计时原理一样. 一个很好用的js倒计时!网页实时倒计时,精确到秒级,和天数倒计时原理一样.js倒计时一般用于商城网站团购,特卖,很多地方都可用到!希望能够给大家带来 ...

  6. JS对象 Date 日期对象 日期对象可以储存任意一个日期,并且可以精确到毫秒数(1/1000 秒)。 定义一个时间对象 : var Udate=new Date();Date()的首字母须大写

    Date 日期对象 日期对象可以储存任意一个日期,并且可以精确到毫秒数(1/1000 秒). 定义一个时间对象 : var Udate=new Date(); 注意:使用关键字new,Date()的首 ...

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

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

  8. 前端js文件合并三种方式

    最近在思考前端js文件该如何合并,当然不包括不能合并文件,而是我们能合并的文件,想了想应该也只有三种方式. 三个方式如下: 1. 一个大文件,所有js合并成一个大文件,所有页面都引用它. 2. 各个页 ...

  9. 前端js,css文件合并三种方式,bat命令

    前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...

随机推荐

  1. 转义及编码(\u, \x)

    首先前面的 \表示转义, \x:只是 16 进制的意思,后边跟两位,则表示单字节编码: \d:十进制:\o:八进制: 对于 \xaa ⇒ chr(0xaa) ⇒ chr(16*a+a) \u:unic ...

  2. Installation and Configuration Guide

    Harbor can be installed by one of three approaches: Online installer: The installer downloads Harbor ...

  3. 就服务器项目部署debug谈谈自己的感受

    前言 学校小组Project那些外国人啥也不会, 基本上我一个人全包了前端和后端, 说实话这些天来也感受到了写一个比较拿得出手的web确实也不是这么容易的, 特别是我没什么项目经验, 很多时候碰到问题 ...

  4. XF相对控件布局

    using System; using Xamarin.Forms; using Xamarin.Forms.Xaml; [assembly: XamlCompilation (XamlCompila ...

  5. JAVASCRIPT高程笔记-------第六章 面向对象的程序设计

    理解对象的概念  js中的对象与其他 编程语言中的类不一样  ECMAscript 没有类的概念      ECMA-262 把对象定义为 “无序属性的集合,其属性可以包含基本值,对象或者函数”   ...

  6. [原译]WPF绘制圆角多边形

    原文:[原译]WPF绘制圆角多边形 介绍 最近,我发现我需要个圆角多边形.而且是需要在运行时从用户界面来绘制.WPF有多边形.但是不支持圆角.我搜索了一下.也没找到可行的现成例子.于是就自己做吧.本文 ...

  7. GIS基础软件及操作(三)

    原文 GIS基础软件及操作(三) 练习三.地图配准操作 1.对无坐标信息的地形图(图片格式)进行地图配准操作2.编辑器的使用(点要素.线要素.多边形要素的数字化) 本例主要介绍如何给无坐标信息的地形图 ...

  8. JavaScript关于原型的相关内容

    function Person () { } Person.prototype.name = 'Alan'; Person.prototype.age = 26; Person.prototype.j ...

  9. 基于 libevent 开发的 C++ 11 高性能网络服务器 evpp(360的作品)

    evpp是一个基于libevent开发的现代化C++11高性能网络服务器,自带TCP/UDP/HTTP等协议的异步非阻塞式的服务器和客户端库. 特性: 现代版的C++11接口 非阻塞异步接口都是C++ ...

  10. 原创powershell脚本:通过远程桌面3389黑名单,阻止黑客ip

    远程桌面 3389 ban ip 防火墙 rdp   通过远程桌面3389黑名单,阻止黑客ip.这是一个常见的需求.但我搜遍了谷歌也找不到成品脚本.想做搬运工却做不成,只能自己费尽写.下载备用吧,估计 ...