时分秒倒计时的js实现
示例:
剩余天数: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实现的更多相关文章
- js简单时分秒倒计时
效果: javascript: <script type="text/javascript"> function countTime() { //获取当前时间 var ...
- android 利用CountDownTimer实现时分秒倒计时效果
https://blog.csdn.net/mrzhao_perfectcode/article/details/81289578
- js 倒计时功能,获取当前时间的年月日,时分秒
一.实现当前时间到指定截止时间的倒计时功能 <html> <head> <title>TEST</title> </head> <bo ...
- JS获取年月日时分秒
var d = new Date(); ) + "-" + d.getDate() + " " + d.getHours() + ":" + ...
- JS日历控件优化(增加时分秒)
JS日历控件优化 在今年7月份时候 写了一篇关于 "JS日历控件" 的文章 , 当时只支持 年月日 的日历控件,现在优化如下: 1. 在原基础上 支持 yyyy ...
- JS将秒换成时分秒实现代码 [mark]
将秒换成时分秒的方法有很多,在本文将为大家介绍下,使用js的具体的实现思路,有需要的朋友可以参考下,希望对大家有所帮助 http://www.jb51.net/article/41098.htm fu ...
- iOS开发之--实现倒计时显示时分秒
这段时间写公司的一个外包项目,需要用到倒计时:需要显示时分秒,通过在网上搜集资料,找到了2中方法,我把这两种方法结合起来,可以很好的满足这个需求: 1.创建一个类继承自UIlabel,用来展示时分秒的 ...
- JS日历控件 灵活设置: 精确的时分秒.
在今年7月份时候 写了一篇关于 "JS日历控件" 的文章 , 当时仅仅支持 年月日 的日历控件,如今优化例如以下: 1. 在原基础上 支持 yyyy-mm-dd 的年月 ...
- 时间格式的转化 vue与js 年月日 时分秒
首先使用原生转化的方法 第一种 //时间转换 dateStr(d, sign) { //如果没有传递符号,给一个默认的符号 if (!sign) { sign = '-' } //获取d里面年月日时分 ...
随机推荐
- Android开发之旅4:应用程序基础及组件
引言 为了后面的例子做准备,本篇及接下来几篇将介绍Android应用程序的原理及术语,这些也是作为一个Android的开发人员必须要了解,且深刻理解的东西.本篇的主题如下: 1.应用程序基础 2.应用 ...
- java网络编程(UDP详解)
UDP详解 一,TCP/IP协议栈中,TCP协议和UDP协议的联系和区别? 联系: TCP和UDP是TCP/IP协议栈中传输层的两个协议,它们使用网络层功能把数据包发送到目的地,从而为应用层提供网络服 ...
- BZOJ3832: [Poi2014]Rally(拓扑排序 堆)
题意 题目链接 Sol 最直观的思路是求出删除每个点后的最长路,我们考虑这玩意儿怎么求 设\(f[i]\)表示以\(i\)结尾的最长路长度,\(g[i]\)表示以\(i\)开始的最长路长度 根据DAG ...
- 小程序视图层(xx.xml)和逻辑层(xx.js)
整个系统分为两块视图层(View)和逻辑层(App Service) 框架可以让数据与视图非常简单地保持同步.当做数据修改的时候,只需要在逻辑层修改数据,视图层就会做相应的更新. 通过这个简单的例子来 ...
- R包下载的一些小问题
install.packages(c("matrixStats", "Hmisc", "splines", "foreach&qu ...
- 浏览器根对象navigator之对象属性概览
第1章 connection[试验] navigator.connection 是只读的,提供一个NetworkInformation 对象来获取设备的网络连接信息.例如用户设备的当前带宽或连接是否被 ...
- 【小程序】返回顶部wx.pageScrollTo和scroll-view的对比
一.wx.pageScrollTo(https://mp.weixin.qq.com/debug/wxadoc/dev/api/scroll.html) 1. 小程序中双击顶部的textbar.会默认 ...
- MySQL的索引与优化
写在前面:索引对查询的速度有着至关重要的影响,理解索引也是进行数据库性能调优的起点.考虑如下情况,假设数据库中一个表有10^6条记录,DBMS的页面大小为4K,并存储100条记录.如果没有索引,查询将 ...
- eventbus3-intellij-plugin插件搜不到
一.eventbus3-intellij-plugin插件搜不到
- 漂亮的ActionBar效果
Newsstand—这个应用引进了新的方式,使得ActionBar达到了新的水平.如果你打开这个应用的发布页,你会注意到不带图标的ActionBar是半透明的,而且和一个大的图片集(一个大的杂志图标, ...