如何在js中显示表中的倒数计时器

时间:2014-03-04 18:16:51

标签: javascript php

<!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>Countdown Timer</title>

</head>

<body>
<?php
$con = mysql_connect("localhost","root","");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}

mysql_select_db("bidding", $con);

$result = mysql_query("SELECT * FROM bids WHERE id = 1");

$numrow = mysql_num_rows($result);

if ($numrow == 0)
{
die('No record found.');
}

$row = mysql_fetch_row($result);
echo "Description: " . $row[1] . "<br />";
$closedate = date_format(date_create($row[2]), 'm/d/Y H:i:s');
echo "Closing Date: " . $closedate;
?>
<p>Time Left:
<script>
function calcage(secs, num1, num2) {
 s = ((Math.floor(secs/num1))%num2).toString();
 if (LeadingZero && s.length < 2)
 s = "0" + s;
 return "<b>" + s + "</b>";
  }

  function CountBack(secs) {
   if (secs < 0) {
  document.getElementById("cntdwn").innerHTML = FinishMessage;

  return;
   }
DisplayStr = DisplayFormat.replace(/%%D%%/g, calcage(secs,86400,100000));
DisplayStr = DisplayStr.replace(/%%H%%/g, calcage(secs,3600,24));
DisplayStr = DisplayStr.replace(/%%M%%/g, calcage(secs,60,60));
DisplayStr = DisplayStr.replace(/%%S%%/g, calcage(secs,1,60));

document.getElementById("cntdwn").innerHTML = DisplayStr;
 if (CountActive)
setTimeout("CountBack(" + (secs+CountStepper) + ")", SetTimeOutPeriod);
}

function putspan(backcolor, forecolor) {
document.write("<span id='cntdwn' style='background-color:" + backcolor + 
            "; color:" + forecolor + "'></span>");
}

if (typeof(BackColor)=="undefined")
BackColor = "green";
if (typeof(ForeColor)=="undefined")
ForeColor= "white";
if (typeof(TargetDate)=="undefined")
TargetDate = "<?php echo $closedate ?>";
if (typeof(DisplayFormat)=="undefined")
DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
if (typeof(CountActive)=="undefined")
CountActive = true;
if (typeof(FinishMessage)=="undefined")
FinishMessage = "Bidding closed!";
if (typeof(CountStepper)!="number")
CountStepper = -1;
if (typeof(LeadingZero)=="undefined")
 LeadingZero = true;


CountStepper = Math.ceil(CountStepper);
if (CountStepper == 0)
CountActive = false;
var SetTimeOutPeriod = (Math.abs(CountStepper)-1)*1000 + 990;
 putspan(BackColor, ForeColor);
 var dthen = new Date(TargetDate);
 var dnow = new Date();
 if(CountStepper>0)
 ddiff = new Date(dnow-dthen);
else
ddiff = new Date(dthen-dnow);
gsecs = Math.floor(ddiff.valueOf()/1000);
 CountBack(gsecs);

</script>
</p>

</body>
</html>

这实际上是正常的,但我希望我的倒计时出现在表格中;第一行应该有days hour minute second,第二行应该有ovel.plz中的值,这有助于我克服这个问题

1 个答案:

答案 0 :(得分:0)

您是否正确地从您使用的网站上复制了所有代码作为示例。

返回此站点以查看示例HTML和JS。

http://www.hashemian.com/tools/javascript-countdown.htm