javascript 时间倒计时
新加入一个项目的集中开发,遇到一个需要倒计时的需求,经过测试,有以下几种方案,分享出来:
方案一:
页面Html:
- <span style="font-size:18px;"><html>
- <head>
- <meta charset="utf-8">
- </head>
- <body onload="timeCounter('timeCounter')">
- <p id="timeCounter">2:00:00</p>
- </body>
- </html></span>
JavaScript代码:
- <span style="font-size:18px;"><script>
- var timeCounter = (function () {
- var int;
- var timeID = SumTime().split(":");
- var total =parseInt(timeID[0] * 3600) + parseInt(timeID[1] * 60) + parseInt(timeID[2]);//将时间换算成秒数
- return function (elemID) {
- obj = document.getElementById(elemID);
- var s = (total % 60) < 10 ? ('0' + total % 60) : total % 60;//秒
- var h = total / 3600 < 10 ? ('0' + parseInt(total / 3600)) : parseInt(total / 3600);//时
- var m = (total - h * 3600) / 60 < 10 ? ('0' + parseInt((total - h * 3600) / 60)) : parseInt((total - h * 3600) / 60);//分
- obj.innerHTML = h + ' : ' + m + ' : ' + s;
- total--;
- int = setTimeout("timeCounter('" + elemID + "')", 1000);
- if (total < 0) clearTimeout(int);
- }
- })()
- function SumTime() {
- var ap = new Date().toLocaleTimeString().substring(0, 2);
- var startTime = new Date().toLocaleTimeString().substring(2);
- var endTime = "15:00:00";
- var start = new Array;
- var end = new Array;
- start = startTime.split(":");
- end = endTime.split(":");
- var hh = end[0] - start[0];
- if (ap == "下午" || ap=="PM") { hh -= 12;}
- if (end[1] < start[1]) {
- hh -= 1;
- var mm = end[1] + 60 - start[1];
- } else {
- var mm = end[1] - start[1];
- }
- if (end[2] < start[2]) {
- mm -= 1;
- var ss = end[2] + 60 - start[2];
- } else {
- var ss = end[2] - start[2];
- }
- var diffTime = hh + ":" + mm + ":" + ss;
- return diffTime;
- }
- </script></span>
方案二:
- <span style="font-size:18px;"><meta charset="utf-8">
- <div>
- <span id='daya'></span>天
- <span id='hoursa'></span>小时
- <span id='minua'></span>分
- <span id='secoa'></span>秒
- </div></span>
js:
- <span style="font-size:18px;"><script type="text/javascript">
- var a=7200; //以毫秒为单位
- function fomtime()
- {
- a=a-1000;
- var b=new Date();
- b.setTime(0);
- var c=new Date();
- c.setTime(a);
- var day1=b.getDate(); //为方便调用,把天数、小时等单独定义
- var hours1=b.getHours();
- var minu1=b.getMinutes();
- var seco1=b.getSeconds();
- var day2=c.getDate();
- var hours2=c.getHours();
- var minu2=c.getMinutes();
- var seco2=c.getSeconds();
- var day=day2-day1;
- var hours=hours2-hours1;
- var minu=minu2-minu1;
- var seco=seco2-seco1;
- document.getElementById('daya').innerHTML=day;
- document.getElementById('hoursa').innerHTML=hours;
- document.getElementById('minua').innerHTML=minu;
- document.getElementById('secoa').innerHTML=seco;
- setTimeout("fomtime()",1000);
- }
- fomtime();
- </script></span>
方案三:
- <span style="font-size:18px;"><script>
- var second = 7200; // 剩余秒数
- // 写一个方法,将秒数专为天数
- var toDays = function(){
- var s = second % 60; // 秒
- var mi = (second - s) / 60 % 60; // 分钟
- var h = ((second - s) / 60 - mi ) / 60 % 24; // 小时
- var d = (((second - s) / 60 - mi ) / 60 - h ) / 24 // 天
- return d + "天" + h + "小时" + mi + "分钟" + s + "秒";
- }
- //定时器
- window.setInterval(function(){
- second --;
- document.getElementById("showTimes").innerHTML = toDays ();
- }, 1000);
- </script>
- <p id="<span margin: 0px; padding: 0px; border: currentColor; color: black; background-color: inherit;">font-family: Arial, Helvetica, sans-serif;">timeCounter</span>"></p></span>
总结:
总结一下上面的集中方法,其实就是一种方法:将时间差转化为以秒为单位的数,然后写定时器美妙执行一次时间变化,只是这个变化的方式稍有不同,但是都离不开SetTimeout延时这个方法,另一个就是window的setInterval设置时间间隔,思想是一样的。
javascript 时间倒计时的更多相关文章
- javascript 时间倒计时效果
<div id="divdown1"></div> <script language="javascript" type=&quo ...
- 原生JavaScript时间倒计时的方法
这个思路是来源用%的方法来做的: 以前用%做过转秒的 现在用来做倒计时方法: 需要用到的方法是getTime:获取距离1970年1月1日午夜00:00之间的毫秒差: var targetTime=ne ...
- js时间倒计时
看了网上的其他的例子,觉得写的都有点复杂,不好理解,于是自己动手写了个. 本来想封装成jquery插件,但是觉得因为功能很简单,没有必要做成jquery插件,引用的时候不需要引入jqery库,这里直接 ...
- javascript的倒计时功能中newData().getTime()在iOS下会报错问题解决
javascript的倒计时功能中newData().getTime()在iOS下会报错问题解决 在做移动端时间转化为时间戳时,遇到了一个问题,安卓手机上访问时,能拿到时间戳,从而正确转换时间,而在i ...
- 用Javascript 实现倒计时
用Javascript 实现倒计时<!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- Java 获取当前时间及实现时间倒计时功能
引言 在一些项目中或是一些特殊的业务场景中,需要用到显示系统的当前时间,以及一些固定的时间倒计时,时间到后做一些什么事情的业务 .接下来咱们就具体看看代码是怎么实现的: <%@ page lan ...
- javascript 时间操作
javascript时间函数 javascript提供了Date对象来进行时间和日期的计算.Date对象有多种构造函数: 1.dateObj=new Date() //当前时间 2.dateObj=n ...
- 第一百零四节,JavaScript时间与日期
JavaScript时间与日期 学习要点: 1.Date类型 2.通用的方法 3.格式化方法 4.组件方法 ECMAScript提供了Date类型来处理时间和日期.Date类型内置一系列获取和设置日期 ...
- 原生js 当前时间 倒计时代码
源:https://www.oschina.net/code/snippet_2318153_54763 <!DOCTYPE html> <html> <head> ...
随机推荐
- CentOS更新yum源
CentOS更新yum源 1.备份 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup 2.下载 ...
- (转)C++0x语言新特性一览
转自:http://blog.csdn.net/zwvista/article/details/2429781 原文请见http://en.wikipedia.org/wiki/C%2B%2B0x. ...
- the XMLHttpRequest Object
Ajax的核心是XMLHttpRequest对象.XMLHttpRequest对象允许异步发送请求并且以文本的形式返回结果.发送什么样的请求(what),在服务器端怎样处理这个请求(how),返回什么 ...
- C# Winfrom 页面传值
2个窗体 Parent,Children 代码: Parent public partial class Parent : Form { public string parentValue = &qu ...
- 6.nodejs权威指南--进程
1. 进程 var net = require('net'); var cluster = require('cluster'); cluster.setupMaster({ exec:'child. ...
- pt-query-digest使用介绍【转】
本文来自:http://isadba.com/?p=651 一.pt-query-digest参数介绍. pt-query-digest --user=anemometer --password=an ...
- MySQL 主键范围查找问题
背景: 今天遇到一个主键范围查找的情况: id是主键,每次取10000.上面的这个查询id范围越往后面消耗的时间越久.通过id自增主键去查找数据应该不会出现这个现象的.以前都没有注意这个奇怪的现象,现 ...
- web前端开发:css3实现loading
web前端开发:css3实现loading 有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 <!DOCTYPE ...
- hdu1798(几何面积计算)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1798 题意:给出两个圆的圆心坐标与半径,求他们相交部分的大小 思路:有三种情况: 1. 两圆相离,ar ...
- java 小数点处理
public class Test { public static void main(String[] args) { double i = 3.856; // 舍掉小数取整 System.out. ...