Question

我使用jQuery和javascript创建了一个计时器。我在页面中附加了计时器。每个计时器都有启动，停止和复位按钮。问题是，当我点击第二，第三，第四..........等定时器时，只有第一个定时器工作。没有其他计时器对我有用。下面是我的代码。任何人都可以帮助我。

    <html>
    <head>
        <script type="text/javascript" src="jquery.js"></script>
    </head>
    <body>
        <script>
            window.onload=function(){document.getElementById('time').innerHTML = "00" + ":" +"00" + ":" + "00";}
        </script>

        <div class="timers" id="act">
            <div id="time"></div>
            <div class="timer_controls">
                <input class="btnStart" id="start" type="button" value="Start" onclick="timer()" />
                <input class="btnreset" id="reset" type="button" value="Reset" onclick="reset()" />
                <input class="btnStop" id="stop" type="button" value="Stop" onclick="stopper()" />
            </div>
        </div>

        <input id="appends" type="button" value="append" />
        <div class="container"></div>

        <style type="text/css">
            #time{
                font-size:50pt;
            }
            .container{
                float:left;
                width:100%;
                height:1000px;
            }
        </style>

        <script type="text/javascript">
            i = 0;
            var w;

            function timer() {
                if (i > 3599) {
                    var H = Math.floor(i / 3600);
                }
                else {
                    var H = 0;
                }

                var M = i - (H * 3600)

                if (M > 59) {
                    M = Math.floor(M / 60)
                }
                else {
                    M = 0
                }

                var S = i - (M * 60)
                if (S > 3599) {
                    S = Math.floor(M / 3600)
                }

                if (H < 10) {
                    H = "0" + H;
                }
                if (M < 10) {
                    M = "0" + M;
                }
                if (S < 10) {
                    S = "0" + S;
                }

                document.getElementById('time').innerHTML = H + ":" + M + ":" + S;
                w=setTimeout('timer()', 1000);
                i++;
            }

            function stopper(){
                clearTimeout(w);
            }

            function reset() {
                i=0;
                document.getElementById('time').innerHTML = "00" + ":" +"00" + ":" + "00";
                clearTimeout(w);
            }

            $("#appends").click(function() {
                var index = $('.timers').length;
                clearTimeout(w);
                var timing=$('.timers').html();
                $('.container').append('<div class="timers" id="act_'+(index+1)+'">'+timing+'<input          class="btnStart" id="start'+(index+1)+'" type="button" value="Start" onclick="timer()" />'+'</div>');
            });
        </script>

        </body>
    </html>

Answer 1

页面上每个HTML元素只能有一个唯一ID。每次添加新计时器时，它们都有类似的ID。您是否需要更改脚本的某些逻辑

使用jQuery追加计时器

1 个答案: