示例:

剩余天数:08天02事02分02秒

html代码:

<div id="timer" data-timer="20160628140203" style="font-size:20px">
剩余天数:
<span id="timer_d">0</span>天
<span id="timer_h">0</span>时
<span id="timer_m">0</span>分
<span id="timer_s">0</span>秒
</div>

js代码:

timer('timer');//调用方法  

//时分秒倒计时方法
function timer(eleId){
var element=document.getElementById(eleId);
if(element){
endTimer=element.getAttribute('data-timer');
var endTime=new Date(parseInt(endTimer.substr(0,4), 10),parseInt(endTimer.substr(4,2), 10),parseInt(endTimer.substr(6,2), 10),parseInt(endTimer.substr(8,2), 10),parseInt(endTimer.substr(10,2), 10),parseInt(endTimer.substr(12,2), 10));
var endTimeMonth=endTime.getMonth()-1;
endTime.setMonth(endTimeMonth);
var ts = endTime - new Date();
if(ts>0){
var dd = parseInt(ts / 1000 / 60 / 60 / 24, 10);
var hh = parseInt(ts / 1000 / 60 / 60 % 24, 10);
var mm = parseInt(ts / 1000 / 60 % 60, 10);
var ss = parseInt(ts / 1000 % 60, 10);
dd = dd<10?("0" + dd):dd; //天
hh = hh<10?("0" + hh):hh; //时
mm = mm<10?("0" + mm):mm; //分
ss = ss<10?("0" + ss):ss; //秒
document.getElementById("timer_d").innerHTML=dd;
document.getElementById("timer_h").innerHTML=hh;
document.getElementById("timer_m").innerHTML=mm;
document.getElementById("timer_s").innerHTML=ss;
setTimeout(function(){timer(eleId);},1000);
}else{
document.getElementById("timer_d").innerHTML=0;
document.getElementById("timer_h").innerHTML=0;
document.getElementById("timer_m").innerHTML=0;
document.getElementById("timer_s").innerHTML=0;
}
}
}

原文地址:http://blog.csdn.net/xw505501936/article/details/51554835

时分秒倒计时的js实现的更多相关文章

  1. js简单时分秒倒计时

    效果: javascript: <script type="text/javascript"> function countTime() { //获取当前时间 var ...

  2. android 利用CountDownTimer实现时分秒倒计时效果

    https://blog.csdn.net/mrzhao_perfectcode/article/details/81289578

  3. js 倒计时功能,获取当前时间的年月日,时分秒

    一.实现当前时间到指定截止时间的倒计时功能 <html> <head> <title>TEST</title> </head> <bo ...

  4. JS获取年月日时分秒

    var d = new Date(); ) + "-" + d.getDate() + " " + d.getHours() + ":" + ...

  5. JS日历控件优化(增加时分秒)

    JS日历控件优化      在今年7月份时候 写了一篇关于 "JS日历控件" 的文章 , 当时只支持 年月日 的日历控件,现在优化如下:      1. 在原基础上 支持 yyyy ...

  6. JS将秒换成时分秒实现代码 [mark]

    将秒换成时分秒的方法有很多,在本文将为大家介绍下,使用js的具体的实现思路,有需要的朋友可以参考下,希望对大家有所帮助 http://www.jb51.net/article/41098.htm fu ...

  7. iOS开发之--实现倒计时显示时分秒

    这段时间写公司的一个外包项目,需要用到倒计时:需要显示时分秒,通过在网上搜集资料,找到了2中方法,我把这两种方法结合起来,可以很好的满足这个需求: 1.创建一个类继承自UIlabel,用来展示时分秒的 ...

  8. JS日历控件 灵活设置: 精确的时分秒.

     在今年7月份时候 写了一篇关于 "JS日历控件" 的文章 , 当时仅仅支持 年月日 的日历控件,如今优化例如以下:      1. 在原基础上 支持 yyyy-mm-dd 的年月 ...

  9. 时间格式的转化 vue与js 年月日 时分秒

    首先使用原生转化的方法 第一种 //时间转换 dateStr(d, sign) { //如果没有传递符号,给一个默认的符号 if (!sign) { sign = '-' } //获取d里面年月日时分 ...

随机推荐

  1. 1px边框的渐变

    <div class="box">banner</div> .box { width: 100px; height: 50px; line-height: ...

  2. visibilitychange:API详解

    利用页面可见性API搞个怪 继各大站点.博客在用console发招聘.玩游戏.埋彩蛋之后(知乎相关链接),小剧似乎又发现了一个好玩儿的东西,目测会火,利用页面可见性API做些小技俩. 页面可见性是什么 ...

  3. Spring Boot fastJSON的使用

    springBoot,默认使用的json解析框架是Jackson. 虽然jackson能够满足json的解析,如果想使用熟悉的alibaba的fastjon,我们只需要在pom文件中配置maven依赖 ...

  4. jquery实现复选框全选,全不选,反选中的问题

    今天试了一下用jquery选择复选框,本来以为很简单的东西却有bug,于是搜索了一下找到了解决方法. html代码如下(这里没有用任何样式,就没有再放css了): <html> <h ...

  5. js面向对象设计之function类

    本文仅探讨如何合理的使用 function 在 javascript中实现一个面向对象设计的类.总所周知,javascript 并不能实现一个真正意义上的类,比如 protect 比如 函数重载.下面 ...

  6. linux的作业控制(job control)

    引用:http://blog.chinaunix.net/u2/68904/showart_1803789.html 把作业放到后台运行:‘ & ’ 举个简单的例子, 我们要将 /etc/ 整 ...

  7. leading--Oracle hint

    SQL>  explain plan for select rowid rid from  2   scott.emp e where e.empno >100 and e.empno & ...

  8. nodejs lodash的一些函数

    1   _.compact用法   _.compact([0, 1, false, 2, '', 3,'mm']); var test = _.compact([-1,0, 1, false, 2, ...

  9. Sass带来的变革_sass, scss 教程_w3cplus - Google Chrome

    Sass带来的变革 作者:大漠 日期:2014-11-17 点击:5291 sass scss 接触Sass差不多有一个年头了,在这一年来的时间中,也花了不少心思在Sass的学习上.同时也让自己喜欢上 ...

  10. 《Pro Git》轻松学习版本控制

    转自 https://kindlefere.com/post/333.html 什么是“版本控制”?我为什么要关心它呢?版本控制是一种记录一个或若干文件内容变化,以便将来查阅特定版本修订情况的系统.在 ...