前端js倒计时(精确到毫秒)
话不多说,直接上代码:
有需要直接拿走,
<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倒计时(精确到毫秒)的更多相关文章
- jQuery setInterval倒计时精确到毫秒
效果类似于:购物抢购倒计时-->在跳转N多个页面之后,倒计时间仍然正常显示. 思路: 结束时间是固定不变的(endTime),一直在改变的是当下的时间(curTime = new date()) ...
- clips 前端 js 倒计时 获取验证码的按钮
<a href="javascript:void(0);" onclick="get_captcha()" class="btn btn-def ...
- 活动倒计时代码(精确到毫秒)jquery插件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- PHP精确到毫秒秒杀倒计时实例
精确到毫秒秒杀倒计时PHP源码实例,前台js活动展示倒计时,后台计算倒计时时间.每0.1秒定时刷新活动倒计时时间. PHP: // 注意:php的时间是以秒算.js的时间以毫秒算 // 设置时区 da ...
- js网页倒计时精确到秒级
网页实时倒计时,精确到秒级,和天数倒计时原理一样. 一个很好用的js倒计时!网页实时倒计时,精确到秒级,和天数倒计时原理一样.js倒计时一般用于商城网站团购,特卖,很多地方都可用到!希望能够给大家带来 ...
- JS对象 Date 日期对象 日期对象可以储存任意一个日期,并且可以精确到毫秒数(1/1000 秒)。 定义一个时间对象 : var Udate=new Date();Date()的首字母须大写
Date 日期对象 日期对象可以储存任意一个日期,并且可以精确到毫秒数(1/1000 秒). 定义一个时间对象 : var Udate=new Date(); 注意:使用关键字new,Date()的首 ...
- js倒计时-倒计输入的时间
计算指定时间到指定时间之间相差多少天.时.分.秒. 节日.活动.商城常用. 原理: 主要使用到时间戳,也就是从1970 年 1 月 1 日 到指定时间的毫秒数. 1. 求出毫秒差 :当两个时间直接进行 ...
- 前端js文件合并三种方式
最近在思考前端js文件该如何合并,当然不包括不能合并文件,而是我们能合并的文件,想了想应该也只有三种方式. 三个方式如下: 1. 一个大文件,所有js合并成一个大文件,所有页面都引用它. 2. 各个页 ...
- 前端js,css文件合并三种方式,bat命令
前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...
随机推荐
- visualsvn server 提交修改日志
修改日志时遇到以下错误: Repository has not been enabled to accept revision propchanges;ask the administrator to ...
- 得知OpenCV研究报告指出系列(一)VS2010+OpenCV2.4.9环境配置
学习OpenCV,首先,当然,要知道如何配置的环境. 余系统的软件和硬件环境,如以下: 以本人的配置环境为例,配置过程例如以下. 第一步 下载及解压OpenCV源代码 尽管非常多第三方站点及一些学习论 ...
- Matlab Tricks(二十五) —— 二维图像的 shuffle
比如对于 mnist (手写字符图像),每幅图像的像素点为 28*28,所以有: perm = randperm(28*28); % 重排列 mnist.train_images = reshape( ...
- VS2005下第一个ATL
作者:kagula 日期: 2008-9-2 环境: [1]VisualStudio2005简体中文版(必需已经安装C语言开发环境支持) [2]WinXP+SP3 读者要求: 初步使用过Visual ...
- python3操作注册表设置/取消IE代理
import io, sys, time, re, os import winreg def enableProxy(IP, Port): proxy = IP + ":" + s ...
- 键盘各键对应的编码值(key code)
原文:键盘各键对应的编码值(key code) 来源:http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes ...
- springboot 集成单元测试
官网参考地址 1. 添加依赖 <!-- 测试 --> <dependency> <groupId>org.springframework.boot</grou ...
- 搭建本地yum源和局域网yum源
搭建本地yum源和局域网yum源 由于很多客户环境是专网,不允许连网,无法使用网上的各种yum源,来回拷贝rpm包安装麻烦,还得解决依赖问题.所以想着搭建个本地/局域网YUM源,方便安装软件. 1 ...
- 自定义函数Function
定义 对于SQL Server来讲,我们声明一个变量的方式是用@变量名,而且相对于编程来讲,SQL Server声明的方式跟我们开了个玩笑,是先变量后面才是类型.对于需要传参跟不需要传参的方式,其实跟 ...
- 最简单的IdentityServer实现——项目基本结构与流程
项目结构 共分为三个组成部分: IdentityServer:用于登录.身份认证与授权 Api:提供获得授权后调用的各接口 Client(客户端,控制台):访问IdentityServer授权,再访问 ...