<script>
(function () {

var tian = document.getElementsByClassName('JS-tian')[0];
var shi = document.getElementsByClassName('JS-shi')[0];
var fen = document.getElementsByClassName('JS-fen')[0];
var miao = document.getElementsByClassName('JS-miao')[0];

var endTime = new Date('2117/07/12 23:59:59').getTime() + 1000;

var interval = null;
interval = setInterval(function () {
var syhm = endTime - Date.now(); // 剩余毫秒
if (syhm >= 0) {
tian.innerText = Math.floor(syhm / 1000 / 60 / 60 / 24);
shi.innerText = Math.floor(syhm / 1000 / 60 / 60 % 24);
fen.innerText = Math.floor(syhm / 1000 / 60 % 60);
miao.innerText = Math.floor(syhm / 1000 % 60);
} else {
clearInterval(interval);
}
}, 0);

})();
</script>
 
 
htmlDemo:
 
<div>
距结束还剩:<span class="JS-tian"></span>天<span class="JS-shi"></span>时<span class="JS-fen"></span>分<span class="JS-miao"></span>秒
</div>

JS - 实现简单易用的倒计时 x 天 x 时 x 分 x 秒的更多相关文章

  1. js学习笔记之日期倒计时(天,时,分,秒)

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

  2. js网页倒计时功能(天,时,分,秒)

    给定任何一个时间,然后实现现在到那个时间的倒计时. 下面的例子是显示现在到2019年8月1号0时0分的倒计时: <div class="list"> <span ...

  3. javascript - 活动倒计时(天、时、分、秒)

    计数时: 结束时: 示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  4. js实现简单易用的上下无缝滚动效果

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

  5. Android倒计时:计算两个时间将得到的时间差转化为倒计时(xx时xx分xx秒格式)

    首先是一个自定义控件: public class RushBuyCountDownTimerView extends LinearLayout { // 小时,十位 private TextView ...

  6. vue.js 监听属性的学习/ 千米、米的转换 /时、分、秒 的转换

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. js如何比较两个日期之间相差数(天、时、分、秒)

    首先,我们模拟一个例子 引入js文件 <script type="text/javascript" src="jquery.min.js">< ...

  8. js计算时间差,包括计算,天,时,分,秒

    收集两个计算时间差的计算方法代码片段: var date1=new Date(); //开始时间 var date2=new Date(); //结束时间 var date3=date2.getTim ...

  9. 【JavaScript 实现倒计时(天、时、分、秒)】

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

随机推荐

  1. Vulkan Tutorial 08 交换链

    操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Visual Studio 2017 在这一章节,我们了解一下将渲染图像提交到屏幕的基本机制.这种机制成为交换链,并且需要 ...

  2. Python-快速排序

    算法思想:快速排序运用了分而治之的思想,即在所选数组中选择一个基准(任选一个都可以),以改基准为基础,将小于该基准的元素都移动基准的左边,大于该基准的数据都移动到右边,然后对左右两边进行递归处理.同样 ...

  3. Coursera 机器学习笔记(七)

    主要为第九周内容:异常检测.推荐系统 (一)异常检测(DENSITY ESTIMATION) 核密度估计(kernel density estimation)是在概率论中用来估计未知的密度函数,属于非 ...

  4. CSS3学习系列之选择器(二)

    first-child选择器和last-child选择器 first-child指定第一个元素.last-child指定最后一个子元素. 例如: <!DOCTYPE html> <h ...

  5. gulp报错

    这个问题网上搜索到的答案不一定能够解决问题,有可能是node版本问题,需要升级 到最新版就可以了....

  6. python入门小记

    一.help python中的帮助手册,对于初学者,多多使用help,多看看原生注释-- 1.help的使用 1.命令需要使用双引号或者单引号括起来,不使用引号引起来会报错 2.类或者函数(方法)不需 ...

  7. c++字符串的输入的思考

    字符串的输入,是学习c++的一个重点,也是一个极富有细节意味的知识点,如果你不了解这些细节,你可能会在写程序时犯错而一脸懵逼不知所措. 与此同时,我们要了解c++缓冲区的概念,程序的输入都建有一个缓冲 ...

  8. orcale设置自增列

    create sequence SEQ_ERRORID minvalue 1 maxvalue 99999999 start with 1000 increment by 1 nocache orde ...

  9. [转]AngularJS 之 ng-options指令

    原文地址 一. 基本下拉效果(lable for value in array) 其中select标签中的ng-model属性必须有,其值为选中的对象或属性值. <div ng-controll ...

  10. 支付宝即时到账DEMO配置与使用

    支付宝网页即时到账功能,可让用户在线向开发者的支付宝账号支付资金,交易资金即时到账,帮助开发者快速回笼资金. 当用户进行支付操作时候可以直接跳转到支付宝支付页面进行支付 1. 准备 关于支付宝签约即时 ...