-1

我有一个很小的 ​​php 文件，上面只有一个 div 和一个倒计时 javascript。这是代码：

        <b><div id="COUNTER"></div></b>
        <SCRIPT type="text/javascript">
        var TargetCOUNTER = document.getElementById('COUNTER');
        //HIER DIE SEKUNDEN EINTRAGEN HERR REUTER !!
        var SecondsCOUNTER = 5654;
        //------------------------------------------
        var TargetTimeCOUNTER = new Date();
        var TimeBeginnCOUNTER = TargetTimeCOUNTER.getTime();
        var TimeEndCOUNTER = TimeBeginnCOUNTER + (SecondsCOUNTER*1000);
        TargetTimeCOUNTER.setTime(TimeEndCOUNTER);

        var DayCOUNTER = TargetTimeCOUNTER.getDate();
        var MonthCOUNTER = TargetTimeCOUNTER.getMonth() + 1;
        var YearCOUNTER = TargetTimeCOUNTER.getYear();
        if(YearCOUNTER < 999) YearCOUNTER += 1900;
        var hCOUNTER = TargetTimeCOUNTER.getHours();
        var mCOUNTER = TargetTimeCOUNTER.getMinutes();
        var sCOUNTER = TargetTimeCOUNTER.getSeconds();

        var fdayCOUNTER  = ((DayCOUNTER < 10) ? "0" : "");
        var fmonthCOUNTER  = ((MonthCOUNTER < 10) ? ".0" : ".");
        var fhCOUNTER  = ((hCOUNTER < 10) ? "0" : "");
        var fmCOUNTER  = ((mCOUNTER < 10) ? ":0" : ":");
        var fsCOUNTER  = ((sCOUNTER < 10) ? ":0" : ":");

        var EndDateCOUNTER = fdayCOUNTER + DayCOUNTER + fmonthCOUNTER + MonthCOUNTER  + "." + YearCOUNTER;
        var EndTimeCOUNTER = fhCOUNTER+hCOUNTER+fmCOUNTER+mCOUNTER+fsCOUNTER+sCOUNTER;

        CountDownCOUNTER();
        function CountDownCOUNTER() {
            var CurrentDateCOUNTER = new Date();
            var CurrentTimeCOUNTER = CurrentDateCOUNTER.getTime()
            var OpenTimeCOUNTER = Math.floor((TargetTimeCOUNTER-     CurrentTimeCOUNTER)/1000);

            var sCOUNTER = OpenTimeCOUNTER % 60;
            var mCOUNTER = ((OpenTimeCOUNTER-sCOUNTER)/60) % 60;
            var hCOUNTER = ((OpenTimeCOUNTER-sCOUNTER-mCOUNTER*60)/(60*60));
            var fhCOUNTER  = ((hCOUNTER < 10) ? "0" : "");
            var fmCOUNTER  = ((mCOUNTER < 10) ? ":0" : ":");
            var fsCOUNTER  = ((sCOUNTER < 10) ? ":0" : ":");

            var TimeCOUNTER = fhCOUNTER+hCOUNTER+fmCOUNTER+mCOUNTER+fsCOUNTER+sCOUNTER;
            var OutputStringCOUNTER=TimeCOUNTER;

            if(OpenTimeCOUNTER<=0) { // Event wenn der Countdown abgelaufen ist
                OutputStringCOUNTER="<a href='../hackerz/fight.php' style='text-decoration: none; color: #00ff00'>Aktualisieren</a>";
            }

            TargetCOUNTER.innerHTML=OutputStringCOUNTER; // Ausgabe des Strings in der Betreffenden Zelle
            document.title=(OutputStringCOUNTER.substring(0,2)=="<a")?"!!!READY!!!":OutputStringCOUNTER;
            window.setTimeout("CountDownCOUNTER()",1000);
        }
    </SCRIPT>

它工作得很好。你可以在这里查看：http: //dev.willstequatschen.de/hw/sites/hackerz/counter.php

但我想用不同的计数器显示 2 行，当我复制并粘贴代码两次时，第二个计数器不显示。这是为什么？

4

4 回答 4

2

将所有代码包装在一个接受计数器容器 id 的函数中：

function setCounter(id) {
    var TargetCOUNTER = document.getElementById(id);
    // rest of your code here
}

分别为每个计数器调用此函数：

setCounter('COUNTER1');
setCounter('COUNTER2');

见演示http://jsfiddle.net/dfsq/CdeGs/

于 2012-10-26T12:16:53.157 回答
0

如果您只是复制并粘贴代码，则两个副本都可以使用<div id="COUNTER"></div>（这意味着只有一个计数器）。

您需要将代码更改为具有 2 个计数器 div，并让您的CountDownCOUNTER函数将其作为参数或使其同时更新。

于 2012-10-26T12:14:19.160 回答
0

很可能您需要将副本的 ID 从“COUNTER”更改为其他唯一的 ID。您需要在原始标签以及 JS 的“GetElementbyID”顶部更改它。

事实上，根据代码的外观，最好只对“COUNTER”到“ALTCOUNTER”或其他不同的整个第二个副本进行全局搜索和替换，以防止与变量和函数名称发生冲突。

于 2012-10-26T12:14:22.947 回答
0

您的代码并非真正面向对象或编写时考虑到可重用性，因此您只能以这种方式使用单个实例。

推荐的方法是以更抽象和组件式的方式重写您的代码，例如“插件”。

也许你应该放弃你的代码并使用一些现成的解决方案。

您可以做的肮脏方法是将计数器加载到单个 iframe 中 - 它可以解决范围冲突问题，但我真的不推荐它。

于 2012-10-26T12:17:19.783 回答