Countdown.js
(function() {
/*var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
*/
var CountDown=function(options){
var that=this;
var today=Date.now();
that.options={
template:'<span class="label">距结束：</span><span class="number" id="countdown_day_{{id}}">{{day}}</span>天<span class="number" id="countdown_hour_{{id}}">{{hour}}</span>时<span class="number" id="countdown_minutes_{{id}}">{{minutes}}</span>分<span class="number" id="countdown_seconds_{{id}}">{{seconds}}</span>秒',
id:"countdown",//对象ID
currTime:today,//服务器当前时间
beginTime:today+24*60*60*1000, //倒计时开始时间
ext:today,//Id后缀
timeoutId:0,//定时器ID
callback:function(){//需要回调的函数
console.warn("当前没有传入的回调！");
}
};
for(var i in options){
that.options[i]=options[i];
}
that.options.ext=that.options.id+that.options.ext+Math.round(100*Math.random(10));
var id=that.options.ext;
console.log("id=="+id);
that.options.template=that.options.template.replace(/(\{\{)\s*(\w)\s*(\}\})/g,"$1$2$3").replace(/\{\{id\}\}/g,id);
var countObj=$(that.options.id);
if(countObj){
hideVisi(countObj);
countObj.innerHTML=that.options.template;
that.getCountDownAreaTemplate();
}
that.init();
};
function $(id){
return document.getElementById(id);
}
function showVisi(obj){
if(obj.style.visibility!="visible"){
obj.style.visibility="visible";
}
}
function hideVisi(obj){
if(obj.style.visibility!="hidden"){
obj.style.visibility="hidden";
}
}
CountDown.prototype={
init:function(){
var that=this;
var currTime=that.options.currTime;
var beginTime=that.options.beginTime;
var intervalTime=beginTime-currTime;//间隔时间
if(intervalTime<0){
console.error("传入的倒计时开始时间比当前时间小！请检查！");
return;
}
//that.render(intervalTime);
that.options.timeoutId=setTimeout(function(){
that.countdown(intervalTime);
},1000);
},
getCountDownAreaTemplate:function(){
var that=this;
var ext=that.options.ext;
var dayObj=$("countdown_day_"+ext);
if(dayObj){
hideVisi(dayObj);
that.options.dayTemplate=dayObj.innerHTML;
}
var hourObj=$("countdown_hour_"+ext);
if(hourObj){
hideVisi(hourObj);
that.options.hourTemplate=hourObj.innerHTML;
}
var minutesObj=$("countdown_minutes_"+ext);
if(minutesObj){
hideVisi(minutesObj);
that.options.minutesTemplate=minutesObj.innerHTML;
}
var secondsObj=$("countdown_seconds_"+ext);
if(secondsObj){
hideVisi(secondsObj);
that.options.secondsTemplate=secondsObj.innerHTML;
}
},
countdown:function(intervalTime){
var that=this;
var t=intervalTime;
t=t-1000;
that.render(t);
if(t<=0){
console.log("%c 倒计已经结束！","color: #fff; background: #f40; font-size: 24px;");
if(that.options.callback){
that.options.callback();//执行回调
}
clearTimeout(that.options.timeoutId);//清除定时器
return;
}
that.options.timeoutId=setTimeout(function(){
that.countdown(t);
},1000);
},
render:function(intervalTime){//渲染模版
var that=this;
var t=intervalTime;
var template=that.options.template;
var ext=that.options.ext;
var day=parseInt(t/(1000*60*60*24),10);
var hour=parseInt((t-(day*1000*60*60*24))/(1000*60*60),10);
var minutes=parseInt((t-(day*1000*60*60*24)-(hour*1000*60*60))/(1000*60),10);
var seconds=parseInt((t-(day*1000*60*60*24)-(hour*1000*60*60)-(minutes*1000*60))/1000,10);
if(template.indexOf("{{day}}")!=-1){
if(day<10){
day="0"+day;
}
if(hour<10){
hour="0"+hour;
}
if(minutes<10){
minutes="0"+minutes;
}
if(seconds<10){
seconds="0"+seconds;
}
//template=template.replace(/({{)\s*(\w)\s*(}})/g,"$1$2$3").replace("{{day}}",day).replace("{{hour}}",hour).replace("{{minutes}}",minutes).replace("{{seconds}}",seconds);
that.showCountDown({day:day,hour:hour,minutes:minutes,seconds:seconds});
}else{
if(template.indexOf("{{hour}}")!=-1){
// var hour=parseInt(t/(1000*60*60),10);
// var minutes=parseInt((t-(hour*1000*60*60))/(1000*60),10);
// var seconds=parseInt((t-(hour*1000*60*60)-(minutes*1000*60))/1000,10);
if(hour<10){
hour="0"+hour;
}
if(minutes<10){
minutes="0"+minutes;
}
if(seconds<10){
seconds="0"+seconds;
}
//template=template.replace(/({{)\s*(\w)\s*(}})/g,"$1$2$3").replace("{{hour}}",hour).replace("{{minutes}}",minutes).replace("{{seconds}}",seconds);
that.showCountDown({hour:hour,minutes:minutes,seconds:seconds});
}else{
if(template.indexOf("{{minutes}}")!=-1){
// var minutes=parseInt(t/(1000*60),10);
// var seconds=parseInt((t-(hour*1000*60*60)-(minutes*1000*60))/1000,10);
if(minutes<10){
minutes="0"+minutes;
}
if(seconds<10){
seconds="0"+seconds;
}
//template=template.replace(/({{)\s*(\w)\s*(}})/g,"$1$2$3").replace("{{minutes}}",minutes).replace("{{seconds}}",seconds);
that.showCountDown({minutes:minutes,seconds:seconds});
}else{
if(template.indexOf("{{seconds}}")!=-1){
// var seconds=parseInt((t-(hour*1000*60*60)-(minutes*1000*60))/1000,10);
if(seconds<10){
seconds="0"+seconds;
}
//template=template.replace(/({{)\s*(\w)\s*(}})/g,"$1$2$3").replace("{{seconds}}",seconds);
that.showCountDown({seconds:seconds});
}
}
}
}
var countObj=$(that.options.id);
if(countObj){
showVisi(countObj);
}
// var countObj=$(that.options.id);
// if(countObj){
// countObj.innerHTML=template;
// }
},
showCountDown:function(options){//ext ID后缀 options 选项
var that=this;
var ext=that.options.ext;
var dayObj=$("countdown_day_"+ext);
if(dayObj){
dayObj.innerHTML=that.options.dayTemplate.replace("{{day}}",options.day);
showVisi(dayObj);
}
var hourObj=$("countdown_hour_"+ext);
if(hourObj){
hourObj.innerHTML=that.options.hourTemplate.replace("{{hour}}",options.hour);
showVisi(hourObj);
}
var minutesObj=$("countdown_minutes_"+ext);
if(minutesObj){
minutesObj.innerHTML=that.options.minutesTemplate.replace("{{minutes}}",options.minutes);
showVisi(minutesObj);
}
var secondsObj=$("countdown_seconds_"+ext);
if(secondsObj){
secondsObj.innerHTML=that.options.secondsTemplate.replace("{{seconds}}",options.seconds);
showVisi(secondsObj);
}
}
};
window.CountDown=CountDown;
}());
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<META name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<META content="no-cache" http-equiv="pragma">
<META content="no-cache" http-equiv="cache-control">
<META content="0" http-equiv="expires">
<title>倒计时js</title>
<style>
.countdown .number {
font-size: 16px;
font-weight: 600;
padding: 8px 5px;
text-align: center;
color: #FFF;
background: #67625E;
margin: 0 5px;
border-radius: 5px;
}
pre{
padding: 16px;
overflow: auto;
font-size: 85%;
line-height: 1.45;
background-color: #F7F7F7;
border-radius: 3px;
}
</style>
<script src="countdown.js"></script>
</head>
<body>
<section>
<h2>默认倒计时：</h2>
<div id="countdown" class="countdown">
</div>
<h6>代码格式：</h6>
<pre>
new CountDown();
</pre>
<script>
new CountDown();
</script>
</section>
<section>
<h2>自定义模版倒计时：</h2>
<div id="countdown2" class="countdown">
</div>
<h6>代码格式：</h6>
<pre>
new CountDown({"template":'<span class="label">自定义倒计时模版：</span><span class="number" id="countdown_hour_{{id}}">{{hour}}</span>小时<span class="number" id="countdown_minutes_{{id}}">{{minutes}}</span>分<span class="number" id="countdown_seconds_{{id}}">{{seconds}}</span>秒'});
注意：日，时，分，秒的容器ID前缀和数据填充部分“{{xxx}}”不能修改！其它可以任意定义
{{id}}代表日，时，分，秒的容器ID后缀 由当前倒计时实例的时间戳生成
{{day}}:代表天
{{hour}}:代表时
{{minutes}}:代表分
{{seconds}}:代表秒
</pre>
<script>
//new CountDown({"id":"countdown2","template":'<span class="label">自定义倒计时模版：</span><span class="number" id="countdown_hour_{{id}}">{{hour}}</span>小时<span class="number" id="countdown_minutes_{{id}}">{{minutes}}</span>分<span class="number" id="countdown_seconds_{{id}}">{{seconds}}</span>秒'});
var today=new Date().getTime();
new CountDown({"id":"countdown2","currTime":today,"beginTime":today+3*24*60*60*1000,"template":'<span class="label">自定义倒计时模版：</span><span class="number" id="countdown_day_{{id}}">{{day}}</span>天'});
</script>
</section>
<section>
<h2>传入系统时间倒计时：</h2>
<div id="countdown3" class="countdown">
</div>
<h6>代码格式：</h6>
<pre>
var today=new Date().getTime();
new CountDown({"id":"countdown3","currTime":today,"beginTime":today+3*24*60*60*1000});
currTime:代表系统的当前时间 单位为毫秒
beginTime:代表系统传回的倒计时开始时间 单位为毫秒
</pre>
<script>
var today=new Date().getTime();
new CountDown({"id":"countdown3","currTime":today,"beginTime":today+3*24*60*60*1000});
</script>
</section>
<section>
<h2>有传入回调的倒计时：</h2>
<div id="countdown4" class="countdown">
</div>
<h6>代码格式：</h6>
<pre>
var today=new Date().getTime();
new CountDown({"id":"countdown4","currTime":today,"beginTime":today+10*1000,callback:function(){
alert("倒计时已经完成！");
}});
callback:可传入任何你需要在页面上处理的操作！
</pre>
<script>
var today=new Date().getTime();
new CountDown({"id":"countdown4","currTime":today,"beginTime":today+10*1000,callback:function(){
alert("倒计时已经完成！");
}});
</script>
</section>
</body>
</html>
github:
https://github.com/wangyong31893189/countDwon
相关推荐
一个简单的倒计时插件通常包含以下几个部分： 1. **参数配置**：允许开发者设置目标日期、倒计时格式（天、小时、分钟、秒）以及样式等。 2. **计算逻辑**：根据当前时间和目标日期计算差值，并转化为指定单位。 3....
5. `jcountdown`：可能是一个目录，包含了插件的特定部分，例如自定义的倒计时模板或者其他扩展功能。 6. `jquery`：这是jQuery库本身，是实现倒计时功能的基础。 为了使用这个插件，我们需要在HTML文件中引入...
这个插件旨在为网页提供灵活的倒计时功能，包括但不限于手机短信验证码的60秒或120秒倒计时，以及固定日期时间的倒计时。 首先，让我们深入了解一下倒计时插件的基本原理。倒计时通常基于JavaScript的Date对象来...
"PPT倒计时插件+如何在PPT2007内加载宏"是一个专为此目的设计的工具，由作者沈兵于2009年12月17日发布。这个加载宏能够方便用户在Microsoft PowerPoint 2007中实现动态的倒计时显示，从而提高演示的互动性和专业性。...
它为开发者提供了一种简单的方法，可以在网站上创建吸引用户注意力的计时功能，比如活动倒计时、产品发布预告等。以下是关于这个插件的详细知识点： 1. **jQuery**: jQuery 是一个轻量级的JavaScript库，它简化了...
【描述】"h5倒计时模板.zip.zip" 的描述简洁，直接点明了这是一个与H5相关的倒计时模板的压缩包，但没有提供具体的功能细节或应用场景。这可能意味着用户需要解压文件后查看内部内容来了解模板的具体功能和使用方法...
这个“PT倒计时器精美模板”显然是一个专门设计的软件或者模板集合，用于方便用户在PPT演示中添加具有专业视觉效果的倒计时功能。 首先，我们需要理解什么是PowerPoint（PPT）。PPT是Microsoft Office套件中的一个...
2. **计时器插件**：有些第三方插件或宏可以嵌入PPT，实时更新剩余时间，这在需要精确倒计时的场合非常有用。用户可以根据设定的结束时间自动显示剩余的小时、分钟和秒数。 3. **自定义形状和图形**：使用...
标题“AE工程文件-倒计时”暗示了这个压缩包包含一个已经设置好的倒计时模板，可以方便用户快速导入并进行个性化修改。通常，倒计时动画在电影、电视节目、活动或网络直播等开始前播放，用来吸引观众注意力，营造...
5. **结束处理**：当倒计时到达零时，插件可能会触发一个特定事件，或者自动添加特定的CSS类，以指示倒计时已结束。 这个jQuery插件的实现可能还包括一些额外的功能，如： - **国际化支持**：适应不同的日期和时间...
jQuery倒计时插件是一种基于JavaScript库jQuery的实用工具，用于在网页上实现动态的、实时更新的时间显示。这类插件通常被用于事件预告、限时促销、考试倒计时等场景，为用户提供一种直观的方式感知特定时间点的到来...
在这个特定的案例中，我们关注的是一个“微信小程序-倒计时组件”。这个组件专门设计用于在微信小程序中实现时间倒计时功能，对于开发各种类型的应用场景非常有用。 首先，倒计时组件的核心功能是将服务器返回的...
网站上线倒计时模板是网页设计中一个常见且实用的元素，它通常用于预告新网站即将启动的时间，吸引用户关注并提前产生期待。本模板以瞭望灯塔为背景，结合了艺术与实用，旨在为即将上线的网站增添独特的视觉效果和...
通过简单的配置，你可以自定义倒计时的结束时间，插件会自动计算并显示剩余的时间。 ### 2. 安装与引入 首先，确保你的项目中已经包含了jQuery库。然后，将jQuery.downCount.js文件从压缩包中提取到项目的...
"网站建设中模板-jquery倒计时"这个主题就涵盖了这两个方面。首先，我们来深入理解一下模板设计和jQuery倒计时的概念。 模板设计是网页开发中的一个常用技术，它允许开发者创建可重复使用的页面布局和设计元素。...
在倒计时模板中，Bootstrap的网格系统和组件可能被用来组织页面结构，确保在不同屏幕尺寸下都能保持良好的可读性和可用性。Bootstrap的预设样式也能保证设计的一致性和专业性。 HTML5作为最新的超文本标记语言标准...
另一个文件名为"网站施工倒计时HTML模板是一款经典复古风格的HTML网站上线倒计时模板下载。"，根据文件名推测，这可能是实际的HTML模板文件。这个文件可能包含HTML、CSS（Cascading Style Sheets）和JavaScript代码...
这个压缩包文件“简单明朗的倒计时单页css模板下载_简单倒计时.rar”包含了一套完整的HTML倒计时页面的资源。这个模板基于HTML、CSS和JavaScript技术，适用于创建简洁、清晰的倒计时页面，比如用于网站上线预告、...
1. **设计原则**：一个有效的倒计时模板应具有清晰的视觉焦点，易于理解的时间显示，并与主题（如业绩冲刺）保持一致。色彩搭配和布局应简洁明了，避免过于复杂的设计分散观众注意力。 2. **动态效果**：时间倒计时...