示例:

剩余天数: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. html中内联元素和块元素的区别、用法以及联系

    昨天用asp.net的BulletedList做一个导航栏,最终该控件形成的html代码是ul列表和a超链接,具体代码如下: <ul id="BulletedList1" s ...

  2. 倒计时5,4,3,2,1css实现(count down from 5 to 1 using css)

    //count down from 5 to 1, a useful animation. show the code to you:   <!DOCTYPE html> <html ...

  3. [移动端WEB] 移动端input标签按钮为什么在苹果手机上还有一层白色?

    移动端input标签按钮为什么在苹果手机上还有一层白色? 解决办法:其实蛮简单的,就加一个属性就好了 input { outline:0px ; -webkit-appearance: none; } ...

  4. input文字垂直居中和按钮对齐问题,兼容IE8

    1.盒子模型问题:请CSS重置 2.按钮不对齐:请浮动或者vertical-align:middle;然后计算宽高,使其对齐 : 3.IE8文本不居中:line-height属性     注意:IE8 ...

  5. react组件里阻事件冒泡

    e.nativeEvent.stopImmediatePropagation();

  6. RPC簡介

    RPC 技术原理       RPC ( Remote Procedure Call Protocol,远程过程调用协议 ): 客户端在不知道调用细节的情况下,调用存在于远程计算机上的某个对象,就像调 ...

  7. ArcGIS10.3+Oracle12C+ArcGIS Server10.3安装布署(之二)

    1.创建PDB 输入 dbca 命令 2.安装完成后,连接PDBSDE的容器数据库 3.环境变量 从Oracle的官方网站下载   instantclient-basic-nt-12.1.0.2.0. ...

  8. 可执行文件patch技术&&持续更新

    前言 在ctf比赛中, 有时我们需要对可执行文件进行patch, 或者在植入后门时,patch也是常用的手段.不过手工patch比较麻烦,下面介绍几个工具.本文介绍遇到的各种技术,不断更新. ELF ...

  9. 安装android-sdk,gradle mac 篇

    安装包管理器 Homebrew /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/insta ...

  10. 转: Dubbo远程调用服务框架原理与示例

    Dubbo 是阿里巴巴公司开源的一个高性能优秀的服务框架,使得应用可通过高性能的 RPC 实现服务的输出和输入功能,可以和  Spring 框架无缝集成. 主要核心部件: Remoting:  网络通 ...