javascript - 活动倒计时(天、时、分、秒)
计数时:
结束时:
示例:
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome">
<title>活动倒计时示例</title>
</head> <body>
<div class="time">
<span id="day">00</span>
<span id="hour">00</span>
<span id="month">00</span>
<span id="second">00</span>
</div>
<script type="text/javascript">
(function () {
// 页面加载完
window.onload = function () {
countTime();
}
// 小于9则添加前缀:01\02....
function checkTime(_zero) {
return _zero > 9 ? _zero : '0' + _zero;
}
function countTime() { // 截止时间. 年、月、日 时、分、秒 - 设置结束时间后 - 自动关闭计时器.
var dateStr = "2018/8/14 08:00:00"; //获取当前时间
var date = new Date();
var now = date.getTime();
//设置截止时间
var endDate = new Date(dateStr);
var end = endDate.getTime();
//时间差
var leftTime = end - now;
//定义变量 d,h,m,s保存倒计时的时间
var d, h, m, s;
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);
//将倒计时赋值到div中
document.getElementById("day").innerHTML = d > 9 ? d + '天' : checkTime(d) + "天";
document.getElementById("hour").innerHTML = h > 9 ? h + '时' : checkTime(h) + "时";
document.getElementById("month").innerHTML = m > 9 ? m + '分' : checkTime(m) + "分";
document.getElementById("second").innerHTML = s > 9 ? s + '秒' : checkTime(s) + "秒";
//递归每秒调用countTime方法,显示动态时间效果
setTimeout(countTime, 1000);
} else {
document.getElementById("day").innerHTML = "00天";
document.getElementById("hour").innerHTML = "00时";
document.getElementById("month").innerHTML = "00分";
document.getElementById("second").innerHTML = "00秒";
}
}
})(); </script>
</body> </html>
javascript - 活动倒计时(天、时、分、秒)的更多相关文章
- JS实现倒计时(天数,时,分,秒)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" > <titl ...
- jQuery UI Datepicker&Datetimepicker添加 时-分-秒 并且,判断
jQuery UI Datepicker时间(年-月-日) 相关代码: <input type="text" value="" name="ad ...
- js倒计时demo 天/时/分/秒
<html><head> <meta charset="UTF-8"> <title>js简单时分秒倒计时</title> ...
- 网页倒计时,动态显示"××年还剩××天××时××分××秒"
var target = document.getElementById('target'); function getTimeString(){ // 要计算任意两个日期的时间差只要修改curren ...
- JavaScript/js把秒或者毫秒换算成xx-xx-xx 时-分-秒的形式
function MillisecondToDate(msd) { // var time = parseFloat(msd) / 1000; var time=msd; if (null != ti ...
- 【转】使用DateFormat把时间长度格式化为"时:分:秒"格式--不错
原文网址:http://ssd910.blog.163.com/blog/static/238767972010112214114201/ 经常在系统中显示时间长度,基本上每次都是显示秒数,客户觉得按 ...
- Java 获取年 月 日 时 分 秒
/** * 英文简写(默认)如:2010-12-01 */ public static String FORMAT_SHORT = "yyyy-MM-dd"; /** * 英文全称 ...
- oracle截取时间的年/月/日/时/分/秒
修改日期格式为年月日时分秒: alter session set nls_date_format='yyyy-mm-dd hh24:mi:ss';select to_char(sysdate,'yyy ...
- ASP.NET C# 日期 时间 年 月 日 时 分 秒 格式及转换(转自happymagic的专栏)
在平时编码中,经常要把日期转换成各种各样的形式输出或保持,今天专门做了个测试,发现DateTime的ToString()方法居然有这么多的表现形式,和大家一起分享. DateTime time=Dat ...
随机推荐
- 洛谷 P2916 [USACO08NOV]为母牛欢呼Cheering up the C…
题目描述 Farmer John has grown so lazy that he no longer wants to continue maintaining the cow paths tha ...
- php 内核变量 引用计数器写时复制
写时复制,是一个解决内存复用的方法,就是你在php语言层,如$d=$c=$b=$a='value';把$a赋给另一个或多个变量,这时这个变量都只占用一个内存块,当其中一个变量值改变时,才会开辟另一个内 ...
- number(NOIP模拟赛Round 3)
好吧,神奇的题目.. 原题传送门 这道题目,神奇的字符单调栈.. 首先预处理出1~n个数(大家都会.) 然后塞进字符串里,输出答案(水~) 然后.. 我们需要将所有的字符存入单调栈中,然后乱搞,就可以 ...
- 使用 Python 开始你的机器学习之旅【转】
转自:https://linux.cn/article-8582-1.html 编译自:https://opensource.com/article/17/5/python-machine-learn ...
- linux缺页异常处理--内核空间【转】
转自:http://blog.csdn.net/vanbreaker/article/details/7867720 版权声明:本文为博主原创文章,未经博主允许不得转载. 缺页异常被触发通常有两种情况 ...
- 你不一定知道的、并没有什么卵用的一些python库
1. delorean,用来处理时间的库 import datetime import pytz # 一般情况下,我们想表示时间的话 est = pytz.timezone("Asia/Sh ...
- Informix 启动 Fatal error in shared memory initialization解决方法
https://blog.csdn.net/cy309173854/article/details/54929735
- Git&GitHun 命令合集
Git&GitHun 命令合集 基本操作 git --version 查看git版本信息 git add 本地库初始化 设置签名 git config user.name xxx git co ...
- 几何【P2313】 [HNOI2005]汤姆的游戏
顾z 你没有发现两个字里的blog都不一样嘛 qwq 题目描述--->p2313 [HNOI]汤姆的游戏 分析 说不上是分析. 数据范围给出来,这题明显暴力啊emmm. 个人认为的坑点. 这题不 ...
- luogu P1361 小M的作物
题目链接 luogu P1361 小M的作物 题解 源汇点为A,B 向种子连边,容量为价值,每个种子能与A或B联通,考虑最小割 用建边的总流量减去最小割就是答案 相同利益的时候新建节点,由额外利益构成 ...