要用Js写一个倒计时功能
在Js里面用好window.setTimeOut和clearInterval即可
简单应用是可以写出来的
如何写成一个通用的timer类呢
下面是一位js达人贡献的(- ^ -)
---初版
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> JS Timer </title>
<meta name="author" content="caikanxp" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
* {font-family: 宋体;}
</style>
<script type="text/javascript">
<!--
(function() {
var Timer = function(destTime, interval, onTimeCount, onTimeUp) {
this.destTime = destTime || new Date();
this.interval = interval || 100;
this.onTimeCount = onTimeCount;
this.onTimeUp = onTimeUp;
};
Timer.prototype.run = function(interval) {
var interval = interval || this.interval;
var timer = this;
if (!this.intervalId) {
this.intervalId = window.setInterval(function() {
var now = new Date();
var time = timer.destTime - now;
var remainder = new Remainder(time);
if (typeof timer.onTimeCount == 'function') {
timer.onTimeCount(timer, remainder);
}
if (time <= 0 && !timer.timeUp) {
timer.timeUp = true;
if (typeof timer.onTimeUp == 'function') {
timer.onTimeUp(timer, remainder);
}
} else if (time > 0) {
timer.timeUp = false;
}
}, interval);
}
};
Timer.prototype.stop = function() {
if (this.intervalId) {
window.clearInterval(this.intervalId);
delete this.intervalId;
}
};
var Remainder = function(time) {
this.time = time;
this.negative = this.time < 0;
this.N = this.negative && '-' || ' ';
this.n = this.negative && '-' || '';
this.I = Math.abs(time);
this.i = this.I % 1000;
this.S = (this.I - this.i) / 1000;
this.s = this.S % 60;
this.M = (this.S - this.s) / 60;
this.m = this.M % 60;
this.H = (this.M - this.m) / 60;
this.h = this.H % 24;
this.D = (this.H - this.h) / 24;
this.d = this.D % 7
this.W = (this.D - this.d) / 7;
this.w = this.W;
}
Remainder.prototype.format = function(pattern) {
var THIS = this;
var isPattern = true;
return pattern.replace(/''|'|n|N|w+|W+|d+|D+|h+|H+|m+|M+|s+|S+|i+|I+/g, function($0) {
if ("''" == $0) {
return "'";
} else if ("'" == $0) {
isPattern = !isPattern;
return '';
} else if (/n|N/.test($0)) {
return THIS[$0];
} else if (isPattern) {
var v = new String(THIS[$0.charAt(0)]);
var p = $0.length + 1 - v.length;
p = p > 1 ? new Array(p).join(0) : '';
return p + v;
} else {
return $0;
}
});
}
window.Timer = Timer;
})();
function $(id){return document.getElementById(id);};
function changeDest() {
var dest;
try {
var m = parseInt(eval($('type').value));
var n = parseFloat($('dest').value);
n = n * m;
if (!isNaN(n)) {
dest = new Date(new Date().getTime() + n);
}
} catch (e) {
dest = new Date($('dest').value);
}
if (!isNaN(dest)) {
myTimer.destTime = dest;
}
}
window.onload = function() {
window.myTimer = new Timer(null, 10, function(timer, remainder) {
var dest = timer.destTime;
var pattern = [];
pattern.push("'离 " + dest.toString() + "'");
pattern.push("'离 " + dest.toLocaleString() + "'");
pattern.push("还有：NW 周 d 天 h 时 m 分 s 秒 i 毫秒");
pattern.push("还有：ND 天 hh 时 mm 分 ss 秒");
pattern.push("还有：nHH:mm:ss.iii");
pattern.push("还有：nI 'ms'");
$('output').innerHTML = remainder.format(pattern.join('<br />'));
});
myTimer.run();
};
//-->
</script>
</head>
<body>
<form onsubmit="changeDest(); return false;">
<input type="submit" value="更改目标时间为" />
<input type="text" id="dest" value="0.1" />
<select id="type">
<option value="1">毫秒之后</option>
<option value="1000">秒之后</option>
<option value="1000*60" selected="selected">分钟之后</option>
<option value="1000*60*60">小时之后</option>
<option value="1000*60*60*24">天之后</option>
<option value="1000*60*60*24*7">周之后</option>
<option value="date string">(指定时间 yyyy/MM/dd hh:mm:ss)</option>
</select>
</form>
<input type="button" value="运行" onclick="myTimer.run();" />
<input type="button" value="停止" onclick="myTimer.stop();" />
<label for="autostop">
<input type="checkbox" id="autostop" onclick="myTimer.onTimeUp = this.checked && function() {this.stop();} || null;" />到时后自动停止
</label>
<h1 id="output"></h1>
</body>
</html>
希望可以一起学习加以改进适合在自己的应用中
下面带有附近---
还在整理加强版本中......
分享到：
写个东西也不好好的写！！不要误会我不是怀疑你的能力，是怀疑的习惯很人品！
相关推荐
JS倒计时
JavaScript倒计时是一种常见的时间显示方式，常用于网站上的活动预告、考试倒计时或重要事件提醒等。在这个实例中，我们结合了JavaScript、CSS和jQuery来创建一个动态且具有视觉效果的倒计时计时器。以下是相关知识...
1. JavaScript倒计时实现：通过使用JavaScript语言，实现了一个倒计时器，可以计算出距离结束时间的剩余时间，并实时显示倒计时。 2. 自定义结束时间：用户可以通过设置年、月、日三个参数，自定义结束时间，从而...
JavaScript倒计时是一种常见的网页动态效果，用于显示特定时间点前的剩余时间。在这个场景中，我们有一个名为"timer.html"的文件，很可能是包含一个简单的JavaScript倒计时实现的HTML页面。下面将详细讲解JavaScript...
JavaScript（简称JS）倒计时是一种常见的Web前端功能，用于实现各种计时需求，例如活动结束倒计时、考试开始倒计时等。在给定的"js倒计时源码"中，我们可以探讨以下几个关键知识点： 1. **JavaScript基础**： - ...
<title>JavaScript倒计时 <h1 id="countdown"></h1> <script src="js/countdown.js"> ``` 在`js`文件夹中的`countdown.js`文件应该包含上述的JavaScript代码。 这个基本的倒计时功能可以适应大多数需求，但...
JavaScript（简称JS）倒计时源码是一种常见的前端开发技术，用于实现网页上的时间计时功能，例如活动截止、考试开始等场景。本资源包含一个实现了天、小时、分钟和秒显示的倒计时功能的JS代码示例。下面将详细讲解JS...
在提供的压缩包文件中，"js倒计时"可能包含了一个完整的JS倒计时实现，你可以查看源代码学习更多细节，比如如何将倒计时数据显示在网页上，或者如何处理时区问题。通过深入理解这些代码，你将能更好地掌握JS实现倒...
首先，我们需要理解JavaScript倒计时的基本原理。倒计时通常是基于当前时间与目标时间之间的差值计算的。在JavaScript中，我们可以使用`Date`对象来获取当前时间，然后通过计算目标时间与当前时间的差值，设置定时器...
JavaScript倒计时是一种常见的网页动态效果，用于显示距离某个特定时间点还有多少天、小时、分钟和秒。在本文中，我们将深入探讨如何使用JavaScript实现一个功能完整的倒计时功能，包括从服务器获取结束时间以及实时...
### 知识点一：精确到秒的JavaScript倒计时实现 #### 1. HTML结构设计 在HTML中，需要设计一个表单`form`和一个文本输入框`input`，用以展示倒计时结果。例如： ```html 离2010年还有: ``` #### ...
至此，我们已经创建了一个具备可配置开始时间、结束时间、服务器时间同步和循环使用功能的JavaScript倒计时器。在实际项目中，你可能还需要考虑时区差异、用户交互以及更复杂的UI显示等细节。通过以上代码，你可以...
闲着没事 发个倒计时代码 可以精确到毫秒的
这个"带报警提示铃声的js倒计时代码"是一个利用JavaScript实现的特定功能，它能够帮助用户在倒计时结束时触发一个报警提示，通常用于活动即将开始或结束的提醒，或者是一些重要的时间节点通知。 首先，我们要理解...
JavaScript倒计时是一种常见的网页动态效果，用于展示特定时间点的到来，例如促销活动开始、考试结束等。在网页开发中，结合CSS可以使得倒计时更具有视觉吸引力。本篇文章将详细探讨如何使用JavaScript和CSS实现一个...
javascript实现倒计时
3. `countdown.js`：这是核心的JavaScript倒计时脚本，实现了具体的倒计时逻辑。它可能包含了获取当前时间、计算剩余时间、设置定时器以定期更新显示等函数。 在实际应用中，JavaScript倒计时的实现通常包括以下...
日常开发中，电商经常使用到抢购，不过当抢购的时候会用到倒计时
这就是一个基本的JavaScript倒计时实现。需要注意的是，这种实现方式没有处理闰秒，且假设一天始终有24小时，一年有365天。在实际应用中，可能需要更精确的处理方式，例如使用`moment.js`或`date-fns`等库来处理日期...
"纯js倒计时"是指利用JavaScript实现的一种计时功能，它能够显示从当前时间到设定日期之间的剩余时间，通常用于活动预告、节假日提醒等场景。这种倒计时的特点是不依赖于任何外部库或框架，只用JavaScript原生语法...