Javascript特效实现——当前时间和倒计时效果的一个简单示例

这种效果的实现的关键是约会对象和setTimeout的使用。

有三个示例,html结构如下,CSS样式不添加。



当前时间:
高考倒计时:
Flash u00a0sale uff1a



javascript实现的实现


窗口。指针函数(){
VaR P1 = document.getelementbyid(P1),
P2 = document.getelementbyid(P2);
P3 = document.getelementbyid(小三);
showtime1();
showtime2();
showtime3();
}


1。当前时间显示的简单实现


功能showtime1(){
无功nowdate =新的日期(nowdate);/ /创建一个约会对象,获取当前时间
Var(公元= nowdate。返回完整年份), / /每年
月= nowdate.getmonth(+ 1),(获得当前的月份) / /得到,得到0-11,需要加1
(日期= nowdate。getdate),得到一个 /
(一nowdate。getday / /),把一周中的一天,(getday)是0-6
周= 星期日
H = nowdate.gethours(),
M = nowdate.getminutes(),
S = nowdate.getseconds(),
H = checktime(H,checktime) / /函数的格式,分钟,秒
M = checktime(M),
S = checktime(S);
P1 .innerHTML =年+++月份+日期+
setTimeout(showtime1,1000); / /重复函数本身的执行
}


的checktime功能如下:


功能checktime(我){
如果(i < 10){
i =0i;
}
还我;
}


因为平时的时间格式见00:00:01,并获得当前的小时,获得当前的分钟,和获得当前的秒是0到9的格式,而不是00到09,从9到10在转弯过程中,有一个单一的数字,它变成了一个两位数,并更改为0,当59秒改为0秒或59点至0或23。

例如,23:59:59应改为00:00:00下次。如果checktime功能不处理,它将改变0:0:0,所以格式不统一,也有在单词的数量突然增加。(后面两例无checktime功能时处理的分和秒!!!)

2。倒计时对高考的影响


功能showtime2(){
VAR数量=新(日期), / /获取当前时间
结果=新的日期(2017 / 6 / 6); / /定义时间的尽头
VaR进程剩余时间减= endtime.gettime(-带。时间)(), / /从时间的毫秒数结束
leftd = math.floor(进程剩余时间减/(1000 * 60 * 60 * 24)) / /,天数的计算
利思= math.floor(进程剩余时间减/(1000×60×60)% 24),计算小时数/ /
leftm = math.floor(进程剩余时间减/(1000×60)% 60),计算 / 数/分钟
左派= math.floor(进程剩余时间减 / 1000% 60); / /计算秒数
P2 .innerHTML = leftd +日+利思+:+ leftm +:+左;
setTimeout(showtime2,1000);
}


一些更重要的观点是:

(1)当定义结束的时间,结束时间=新的日期(2017 / 6 / 6)是一个参数通过新的约会对象,和新的(日期)直接获取当前时间。

GetTime()方法从1970年1月1日获取的毫秒数。

对天数计算小时,分钟,秒,毫秒数(剩余毫秒)的结束时间,除以1000得到的剩余秒数,再除以60来分钟剩余数量,然后除以60得到的剩余时间。分24把剩下的日子。剩余的秒进程剩余时间减 / 1000模式60得到的秒数,其余分钟进程剩余时间减/(1000×60)模块60得到的分钟数,其余模块进程剩余时间减小时/(1000×60×60)模式得到24小时。

三.限时购买倒计时效应


功能showtime3(){
VaR带=新的日期(),
结果=新的日期(2020 / 1 / 1,00:00:00 , / /套)结束的时间
进程剩余时间减= parseInt((endtime.gettime -nowtime.gettime()())/ 1000),
a math.floor(进程剩余时间减/(60×60×24)),
H = math.floor(进程剩余时间减/(60×60)% 24),
M = math.floor(进程剩余时间减 / 60% 60),
S = math.floor(进程剩余时间减为60);
P3 .innerHTML = D +一+ H +小时+ M +子的二;
setTimeout(showtime3,1000);
}


事实上,第二个例子是一样的。不同的是新的日期设置(2020 / 1 / 1,00:00:00 )。

下面是完整的代码






倒计时效果

功能checktime(我){
如果(i < 10){
i =0i;
}
还我;
}
窗口。指针函数(){

VaR P1 = document.getelementbyid(P1),
P2 = document.getelementbyid(P2);
showtime1();
showtime2();
showtime3();
}
功能showtime1(){
无功nowdate =新的日期();
Var(公元= nowdate。返回完整年份)/年。
月= nowdate.getmonth(+ 1), / /月
(日期= nowdate。getdate), / /天
周= 星期日
天nowdate.getday(), / / getday获取0-6
H = nowdate.gethours(),
H = checktime(H),
M = nowdate.getminutes(),
M = checktime(M),
S = nowdate.getseconds(),
S = checktime(S);
P1 .innerHTML =年+++月份+日期+
setTimeout(showtime1,1000);
}
功能showtime2(){
VaR带=新的日期(),
结果=新的日期(2017 / 6 / 6);
VaR进程剩余时间减= endtime.gettime -nowtime.gettime()(),
leftd = math.floor(进程剩余时间减/(1000 * 60 * 60 * 24)),
利思= math.floor(进程剩余时间减/(1000×60×60)% 24),
leftm = math.floor(进程剩余时间减/(1000×60)% 60),
左派= math.floor(进程剩余时间减 / 1000% 60);
P2 .innerHTML = leftd +日+利思+:+ leftm +:+左;
setTimeout(showtime2,1000);
}
功能showtime3(){
VaR带=新的日期(),
结果=新的日期(2020 / 1 / 1,00:00:00 ),
进程剩余时间减= parseInt((endtime.gettime -nowtime.gettime()())/ 1000),
a math.floor(进程剩余时间减/(60×60×24)),
H = math.floor(进程剩余时间减/(60×60)% 24),
M = math.floor(进程剩余时间减 / 60% 60),
S = math.floor(进程剩余时间减为60);
P3 .innerHTML = D +一+ H +小时+ M +子的二;
setTimeout(showtime3,1000);
}



当前时间:
高考倒计时:
Flash u00a0sale uff1a




实施上述Javascript特效--一个简单的例子,目前的时间倒计时的效果是,萧边分享了你的全部内容。我希望能给你一个参考,希望你能支持它。