您的位置：首页 > Web前端 > JavaScript

JS 实现的定时倒计时

2017-10-18 00:00 176 查看 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<mce:script type="text/javascript" src="jquery.js" mce_src="jquery.js"></mce:script>
<mce:script type="text/javascript"><!--
function timesup(){
alert("结束");
}

function clock(options){
if(!options){
options = '()';
}

if(options.beginTime == null || options.beginTime == '' || options.beginTime == 'undefined'){
if(options.callback){
eval(options.callback);
}
return null;
}

var obj = $("#"+options.id);
var $days = $("#"+options.days);
var $hours = $("#"+options.hours);
var $mins = $("#"+options.mins);
var $secs = $("#"+options.secs);

$days.html("00");
$hours.html("00");
$mins.html("00");
$secs.html("00");

var DifferenceHour = -1
var DifferenceMinute = -1
var DifferenceSecond = -1
var Tday = new Date(options.beginTime);
var time = new Date()
var daysms = 24 * 60 * 60 * 1000
var hoursms = 60 * 60 * 1000
var Secondms = 60 * 1000
var microsecond = 1000
var convertHour = DifferenceHour
var convertMinute = DifferenceMinute
var convertSecond = DifferenceSecond;
var Diffms = Tday.getTime() - time.getTime();

if(Diffms>0){
DifferenceHour = Math.floor(Diffms / daysms)
Diffms -= DifferenceHour * daysms
DifferenceMinute = Math.floor(Diffms / hoursms)
Diffms -= DifferenceMinute * hoursms
DifferenceSecond = Math.floor(Diffms / Secondms)
Diffms -= DifferenceSecond * Secondms
var dSecs = Math.floor(Diffms / microsecond)
if(convertHour != DifferenceHour){
DifferenceHour = (DifferenceHour>9?"":"0")+DifferenceHour;
$days.html(DifferenceHour+" ");
}
if(convertMinute != DifferenceMinute){
DifferenceMinute = (DifferenceMinute>9?"":"0")+DifferenceMinute;
$hours.html(DifferenceMinute+" ");
}
if(convertSecond != DifferenceSecond){
DifferenceSecond = (DifferenceSecond>9?"":"0")+DifferenceSecond;
$mins.html(DifferenceSecond+" ");
}
$secs.html((dSecs>9?"":"0")+dSecs);
// document.formnow.Tnow.value= DifferenceHour DifferenceMinute + DifferenceSecond + dSecs
setTimeout(function(){clock(options)},1000)
}else{
eval(options.callback);
}
}

$(function(){
clock({
id:"countdown",
days:"dd",
hours:"hh",
mins:"mmm",
secs:"ss",
beginTime:'2011/06/27 16:35',
callback: 'timesup()'
});
clock({
days:"tiemD",
hours:"tiemH",
mins:"tiemM",
secs:"tiemS",
beginTime:'2011/06/24 17:45',
callback: 'timesup()'
});
})
// --></mce:script>
</head>

<body>
<table id="countdown" width="500" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="36" align="center" id="yy"> </td>
<td width="29" align="center">年</td>
<td width="41" align="center" id="mm"> </td>
<td width="26" align="center">月</td>
<td width="52" align="center" id="dd"> </td>
<td width="33" align="center">日</td>
<td width="60" align="center" id="hh"> </td>
<td width="27" align="center">时</td>
<td width="39" align="center" id="mmm"> </td>
<td width="41" align="center">分</td>
<td width="56" align="center" id="ss"> </td>
<td width="34" align="center">秒</td>
</tr>
</table>
<br/>
<table width="697" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="90" align="center"> </td>
<td width="472" align="center"><span id="tiemD"></span>天<span id="tiemH"></span>小时<span id="tiemM"></span>分<span id="tiemS"></span>秒</td>
<td width="127" align="center"> </td>
</tr>
<tr>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
</table>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航