倒计时 – LPC影子技术分享

Javascript的setInterval和clearInterval应用

hkshadow — Tue, 22 Jan 2013 06:17:43 +0000

时间间隔可以用 setInterval 命令来创建并用 clearInterval 命令来终止。setInterval 所用的参数有两种格式。在第一种格式中，你传递给 setInterval 的参数可以是一个函数名，一段时间上的间隔以及一些传递给前面函数的相关参数。当 setInterval 运行时它会依照规定的时间间隔依次将列出的参数传递给指定的函数，直到你调用 clearInterval 将其终止。相关的示范代码如下：

function updateStockPrices(whichStock) { 
    // Update code here 
    trace('Updating prices for '+whichStock); 
} 
stockInterval = setInterval(updateStockPrices, 1000, "Stratford Flash Products");

setInterval全面的介绍
setInterval动作的作用是在播放动画的时，每隔一定时间就调用函数，方法或对象。可以使用本动作更新来自数据库的变量或更新时间显示。setInterval动作的语法格式如下：

setInterval(function,interval[,arg1,arg2,……argn])
setInterval(object,methodName,interval[,arg1,arg2,…..argn])

第一种格式是标准动作面板中setInterval函数的默认语法，第二种格式是在专家模式动作中使用的方法。
其中的参数function是一个函数名或者一个对匿名函数的引用。object参数指定从Object对象派生的对象。methodName制定object参数中要调用的方法。interval制定对function或methodName调用两次之间的时间，单位是毫秒。后面的arg1等是可选的参数，用于制定传递给function或是methodName的参数。
setInterval它设置的时间间隔小于动画帧速（如每秒10帧，相当于100毫秒），则按照尽可能接近interval的时间间隔调用函数。而且必须使用updateAfterEvent动作来确保以足够的频率刷新屏幕。如果interval大于动画帧速，则只用在每次播放头进入某一帧是才调用，以减小每次刷新屏幕的影响。
下面的例子每隔1秒调用一次匿名函数。

setInterval(function(){trace(“每隔1秒钟我就会显示一次”)},1000);//这里的function(){}是没有函数名
的函数。成为匿名函数，后面的1000是时间间隔，单位是毫秒。
下面的例子为我们展示如何带参数运行。

function show1(){ 
    trace("每隔1秒我就会显示一次"); 
} 
function show2(str){ 
    trace(str); 
} 
setInterval(show1,1000);

setInterval(show2,2000,”每隔2秒我就会显示一次”);
上面已经将函数的setInterval方法介绍了。
下面我们将介绍对象的setInterval方法。
首先，写一个setInterval在动作中调用对象的方法的例子，该例子不需要传递参数。

myobj=new Object();//创建一个新的对象 
myobj.interval=function){ 
trace("每隔1秒我就会显示一次"); 
}//创建对象的方法。 
setInterval(myobj,"interval",1000);//设定时间间隔调用对象的方法。

接下来介绍如何传递参数。其实道理和函数的传递参数是一样的。

myobj=new Object(); 
myobj.interval-function(str){ 
    trace(str); 
} 
setInterval(myobj,"interval",2000," 每隔2秒我就会显示一次");

注意。要调用为对象定义的方法时，必须在专家模式中使用第二种语法格式。
这样子的话呢，我们来作一个动态显示时间的画面。可以用下面的代码实现。

setInterval(show,1000); 
function show(){ 
    time=new Date(); 
    hour=time.getHours(); 
    minu=time.getMinutes(); 
    sec=time.get.Seconds(); 
    datetime=hour ":" minu ":" sec; 
}
//这里的datetime是一个动态文本框的变量名字。

这样子呢，setInterval这个方法大家应该学的很好了。现在呢，我们学习clearInterval.
clearInterval动作的作用是清楚对setInterval函数的调用，它的语法格式如下clearInterval(intervalid);intervalid是调用setInterval函数后返回的对象。
下面举一个简单的例子。

function show(){ 
    trace("每隔一秒我就会显示一次"); 
} 
var sh; 
sh=setInterval(show,1000); 
clearInterval(sh);

JS Demo:

function auto(){ 
alert("到時間了") 
} 
var monitorInterval = null;  
function setAuto(time,isFrist){ 
    var intervalTime=time; 
        if(isFrist!="1"){ 
            if(intervalTime!="off"){ 
                monitorInterval= setInterval("auto()", intervalTime*1000); 
            }else{ 
            if(monitorInterval){    
                clearInterval(monitorInterval); 
                monitorInterval = null; 
            } 
        } 
    } 
}

Html Demo:

 
 
自動更新

另一片文章也讲到了setInterval和clearInterval。

js简单实现时间格式倒计时

Jquery倒计时插件Countdown timer jQuery Plugin

hkshadow — Wed, 09 Jan 2013 15:03:58 +0000

一个项目里用到了团购倒计时，本来想用递减的方式手写一个，但是想到兼容性问题，还是用封装好的Jquery插件吧。
今天在这里推荐的是“Countdown timer jQuery Plugin”，它是一个轻量级且灵活的倒计时插件，直接用实例说明吧。

首先包含主体的文件：

然后在模板页面加上以下JQUERY代码

在模板里增加一个ID。

例子CSS，可忽略。

p#time{
    color:#c21017;
    text-align: center;
}
p#time span{
    display:inline;
    color:#222222;
    font-size:0.8em;
}

配置里大概修改说明如下：

date: 'June 11, 2010', //Date to countdown to
 
updatetime: 1000, //Time to update timer (milliseconds)
 
//Replaces the following flags with date values
%{d} = day
%{h} = hour
%{m} = minutes
%{s} = seconds
 
//jquery.jcountdown1.3.js 主要修改在这里
htmlTemplate: "%{d} days %{h} hours %{m} mins %{s} sec"
 
//If countdown timer should go into minus values instead of 00:00:00:00 when countdown time has passed
minus: false
 
//Gets called each time the countdown timer updates
//Can access element with countdown timer on it, as well as the timer interval itself
onChange: function( event, timer ){}
 
//Gets called when countdown completes
onComplete: function( event ){} //Can access element with countdown timer on it
 
//Whether time should have a leading zero e.g 02 days 01 hours 09 seconds
leadingZero: falsecountdown1.3

JS时间处理部分代码一并带出：

var date = new Date();

//时间格式替换修改
var str = '2008-10-09 21:35:28';//PHP中对应的UNIX时间戳为1223559328
var new_str = str.replace(/:/g,'-');
new_str = new_str.replace(/ /g,'-');
var arr = new_str.split("-");
var datum = new Date(Date.UTC(arr[0],arr[1]-1,arr[2],arr[3]-8,arr[4],arr[5]));

//转换为英文时间格式
var dt = new Date();
var m=new Array("","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Spt","Oct","Nov","Dec");
var w=new Array("Monday","Tuseday","Wednesday","Thursday","Friday","Saturday","Sunday");
var d=new Array("st","nd","rd","th");
mn=date.getMonth();
wn=date.getDay();
dn=date.getDate();

var dns;
if(((dn%10)<1) ||((dn%10)>3)){
	dns=d[3];
}else{
	dns=d[(dn%10)-1];
	if((dn==11)||(dn==12)){
	dns=d[3];
	}
}
document.write("
"+m[mn]+" "+dn+dns+" " +w[wn-1]+" "+dt.getFullYear()+"");

js简单实现时间格式倒计时

hkshadow — Tue, 13 Mar 2012 03:48:23 +0000

在网上找了很多相关的例子，总觉得还是要根据需求来写不一样的代码，就如我只是想要实现一个时间格式的倒计时，就不需要什么插件了，简短的一段代码即可实现。

看代码了：

html页面代码：

..
：
..
：
..

最后的效果是
1：24：50

js倒计时跳转

admin — Thu, 24 Feb 2011 06:38:19 +0000



恭喜您,投标成功.
3秒后跳转....
立即跳转.

JS倒计时代码整理

admin — Wed, 23 Feb 2011 07:07:21 +0000

第一种：精确到秒的javascript倒计时代码

HTML代码:



离2012年还有:

第二种：某某运动会
HTML代码：

第三种：小时倒计时
HTML代码:

第四种：最简倒计时
代码:

第五种：最简倒计时二

HTML代码:



距某某开幕式还有 [] 天

第六种：Javascript倒计时器 – 采用系统时间自校验

这次利用系统时间自校验倒计时, 无需手工调校使得倒计时更为精确, 代码及详细注释如下:

00:01:11:00