<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. 搭建rtmp直播流服务之2:使用java实现ffmpeg命令接口化调用(用java执行ffmpeg命令)

    欢迎大家积极开心的加入讨论群 群号:371249677 (点击这里进群) 一.环境搭建 1.安装ffmpeg 下载对应系统的ffmpeg安装包,个人采用windows平台进行开发,所以安装了windo ...

  2. Leetcode 494 Target Sum 动态规划 背包+滚动数据

    这是一道水题,作为没有货的水货楼主如是说. 题意:已知一个数组nums {a1,a2,a3,.....,an}(其中0<ai <=1000(1<=k<=n, n<=20) ...

  3. tostring方法

    //__tostring()方法//输出内容时不报错 用法实例:class Ren{ public $name; public function __tostring() { return " ...

  4. redisLock redis分布式锁

    redis-lock redis setnx cmmand java object condition queue 条件队列 retrycount 带有重试次数限制 object wait time ...

  5. Spring AOP拦截对Controller的请求时的配置失败

    简单的说,就是父子容器的问题,将AOP的配置信息放在applicationContext.xml中,该配置文件被ContextLoaderListener加载,Spring会创建一个WebApplic ...

  6. .Net中关于等于的故事(一)

    在.Net框架中,如果您查看所有类型的的基类:System.Object类,将找到如下4个与相等判断的方法: static Equals() virtual Equals() static Refer ...

  7. final用法

    1.修饰类 如果一个类被定义为final类型,那么该类无法被其他类继承,该类中的所有方法都是final类型的,字段是否是final类型取决于字段自身的定义. 2.修饰方法 一个方法被定义为final类 ...

  8. phpcms和php格式化时间戳

    用PHPCMS V9 建站时,经常会用到时间标签,它是通用标签调用-日期时间格式化,适用全站. 一.日期时间格式化显示: a\标准型:{date('Y-m-d H:i:s', $rs['inputti ...

  9. JSONArray用法jquery循环list<Map>对象

    controoler中 List<Map<String,Object>> resList =(List<Map<String,Object>>)resM ...

  10. php中的XML转数组

    /** * 最简单的XML转数组 * @param string $xmlstring XML字符串 * @return array XML数组 */ function simplest_xml_to ...