<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. javascript基础-事件1

    原理 事件分两种.第一种浏览器事件,由浏览器抛出事件,它是人机交互的基础:第二种自定义事件,由程序员抛出事件,它是模拟事件流程.两者都是为了完成数据的传递. 浏览器事件 机制 冒泡和捕获两种机制.因I ...

  2. 东正王增涛浅析OA信息化整合平台系统在企业中的应用价值

    王增涛说OA信息化整合平台系统作为企业管理中最基础的管理软件,已在企业成长道路上存在多年,它的应用开启了智能移动办公的先河,也让企业的办公流程管理更加的便捷.高效.流畅.省时.省力,它的使用不但让企业 ...

  3. 一篇%3CDIV%20style%3D%22FONT-SIZE%

    %3CDIV%20style%3D%22FONT-SIZE%3A%2016px%22%3E1%EF%BC%8C%E6%88%91%E4%BB%A5%E4%B8%BA%E7%BB%88%E6%9C%89 ...

  4. Java内存管理思维导图

    文 by / 林本托 Tips 做一个终身学习的人. 如果想要成为一名合格的 Java 程序员,就必须要涉及和掌握一些 Java 虚拟机的内部结构和特性.最近在读<深入理解Java 虚拟机> ...

  5. 使用SQL语句使数据从坚向排列转化成横向排列(排班表)

    知识重点: 1.extract(day from schedule01::timestamp)=13 Extract 属于 SQL 的 DML(即数据库管理语言)函数,同样,InterBase 也支持 ...

  6. 创建对象的N种模式

    1 new Object() 先创建一个Object实例,然后为它添加属性和方法 var Person = new Object() Person.name = 'hl' Person.sayName ...

  7. linux exec操作文件描述符

    linux每一个打开文件都会关联一个文件描述符,需要的时候我们可以使用exec命令指定一个大于3的数字作为文件 linux默认文件描述符 每打开一个shell就会打开默认的三个文件描述符描0,1,2, ...

  8. 尝试向树莓派3B引入Drbian 9 arm64-PART 1

    Stage 1:试图加入arm64软件包 笔者默认您清楚这些指令背后的意义以及其可能造成的后果,并默认您已备份重要资料 sudo dpkg --add-archietcture arm64 sudo ...

  9. MySQL5.7绿色版(免装版)的初始化和修改密码

    1.下载MySQL5.7.18绿色版 1.1下载链接 以下是MySQL5.7.18绿色版的链接(来源oracle官网),打开链接直接下载 https://dev.mysql.com/gt/Downlo ...

  10. find的用法

    find在Linux系统中和其它工具,如sed.awk.grep等结合起来用,非常有用. 1.列出系统中所有属于root用户的“set uid”文件 #find / -perm 4755 –uid 0 ...