如何从我的javascript代码中制作两个倒计时器?

时间:2017-02-25 17:43:01

标签: javascript countdowntimer

我在我的网站上设置了自定义计时器。我想做两个计时器。我尝试复制整个代码并将其粘贴在下面,但它没有做任何事情,尝试了其他方法,但没有产生我想要的结果。

我已经开始学习Javascript和php。

这是我的代码

     <div id="container">
        <a name="top" id="top"></a>
        <div id="header">           
            <div id="logo">
                <div class="wrapper">
                    <a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a><br />           


                </div>
            </div>
            <div id="panel">
                <div class="upper">
                    <div class="wrapper">                       
                        {$welcomeblock}
                    <!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
                <!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
            </div>
        </div>
        <div id="content">
            <div class="wrapper">
                {$pm_notice}
                {$bannedwarning}
                {$bbclosedwarning}
                {$unreadreports}
                {$pending_joinrequests}
                {$awaitingusers} <!-- BAM -->{$bam_announcements}<!-- /BAM -->

<!-----------------------Match Countdown -------------------------->

                <center>
                    <!-- Banner Here -->
                    <a href="http://notcricinfo.com/forums/PSL.php"><img src="http://notcricinfo.com/forums/images/banner.png"></a>
                    <br/>
    <script language="JavaScript">
TargetDate = Date.UTC(2017, 01, 26, 16, 00, 0, 0, 0); // GMT time - Date.UTC(year, month, day, hours, minutes, seconds, millisec) <---------Target Date
BackColor = "White";
ForeColor = "Green";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds ";
FinishMessage = "Match Underway";
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 style='background-color:" + backcolor + 
                "; color:" + forecolor + "; font-size:35px; face:verdana'>"+

                                                                                                    "Islamabad Vs Karachi" //<---------Teams

                +" starts in: </span><span id='cntdwn' style='background-color:" + backcolor + 
                "; color:" + forecolor + "; font-size:35px; face:verdana'></span>");
}

if (typeof(BackColor)=="undefined")
  BackColor = "white";
if (typeof(ForeColor)=="undefined")
  ForeColor= "black";
if (typeof(TargetDate)=="undefined")
  TargetDate = "12/31/2020 5:00 AM";
if (typeof(DisplayFormat)=="undefined")
  DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
if (typeof(CountActive)=="undefined")
  CountActive = true;
if (typeof(FinishMessage)=="undefined")
  FinishMessage = "";
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().getTime();
if(CountStepper>0)
  ddiff = new Date(dnow-dthen);
else
  ddiff = new Date(dthen-dnow);
gsecs = Math.floor(ddiff.valueOf()/1000);
CountBack(gsecs);
</script>

                </center>
                <navigation>
                <br />

1 个答案:

答案 0 :(得分:0)

您需要在自定义类中构建代码,并且可以创建所需的所有实例。