Question

我想使用不同间隔的javascript在asp.net页面中显示几个计时器，但是所有计时器都以最后设置的间隔运行，我该怎么做？

这是我使用的代码：

        <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

    <!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 runat="server">
      <title>Untitled Page</title>
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
     <script type="text/javascript">  

    function _timer(callback)
            {
       var time = 4500;   
        var mode = 1;   
      var status = 0;
      var timer_id;   
      var sor;
        // this will start the timer ex. start the timer with 1 second interval timer.start(1000) 
       this.start = function(interval)
       {

            interval = (typeof(interval) !== 'undefined') ? interval : 1000;

           if(status == 0)
           {
               status = 1;

               timer_id = setInterval(function()
               {
                   switch(mode)
                    {
                        default:
                        if(time)
                        {
                            time--;
                            generateTime();
                            if(typeof(callback) === 'function') callback(time);
                        }
                        break;

                        case 1:
                        if(time < 86400)
                        {
                            time++;
                            generateTime();
                            if(typeof(callback) === 'function') callback(time);
                        }
                        break;
                    }
                }, interval);
            }
        }  
        //  Same as the name, this will stop or pause the timer ex. timer.stop()
        this.stop =  function()
        {
            if(status == 1)
            {
                status = 0;
                clearInterval(timer_id);
            }
        }

        // Reset the timer to zero or reset it to your own custom time ex. reset to zero second timer.reset(0)
        this.reset =  function(sec)
        {
          //  sec = (typeof(sec) !== 'undefined') ? sec : 0;
          //  time = sec;
            generateTime(time);
        }

        // Change the mode of the timer, count-up (1) or countdown (0)
        this.mode = function(tmode)
        {
            mode = tmode;
        }

        // This methode return the current value of the timer
        this.getTime = function()
        {
                return time;
        }

        // This methode return the current mode of the timer count-up (1) or countdown (0)
        this.getMode = function()
        {
            return mode;
        }

        // This methode return the status of the timer running (1) or stoped (1)
        this.getStatus
        {
            return status;
        }

        // This methode will render the time variable to hour:minute:second format
        function generateTime()
        {


            var second = time ;
           //var minute = Math.floor(time / 60) % 60;
           // var hour = Math.floor(time / 3600) % 60;

            second = (second < 10) ? '0'+second : second;
           // minute = (minute < 10) ? '0'+minute : minute;
           // hour = (hour < 10) ? '0'+hour : hour;

            $('div.timer span.second').html(second);
           $('div.timer1 span.second').html(second);
           // $('div.timer span.minute').html(minute);
           // $('div.timer span.hour').html(hour);
        }

    } 
    // example use
    var timer;

    $(document).ready(function(e) 
    {
        timer = new _timer
        (
            function(time)
            {

            }
        );
       timer.reset(110);

    }); 

    var timer1;

    $(document).ready(function(e) 
    {
        timer1 = new _timer
        (
            function(time)
            {

            }
        );
       timer1.reset(110);

    }); 

    </script>  
    </head>
    <body>
        <form id="form1" runat="server">
        <div>

            <asp:Panel ID="Panel1" runat="server" >

                <div class="timer">
                <span class="second">1111</span>
            </div>
            <div>
             <script type="text/javascript">

            window.onload = function () { timer.start(806); };
        </script>

            </div>

                </asp:Panel>

                <asp:Panel ID="Panel2" runat="server" >

                   <div class="timer1">
                <span class="second">2222</span>
            </div>
            <div>

              <script type="text/javascript">

            window.onload = function () { timer1.start(20); };
        </script>
                 </div>  
                </asp:Panel>
            <asp:Literal ID="Literal1" runat="server"></asp:Literal></div>


        </form>
    </body>
    </html>

在这段代码中，我用不同的间隔调用了2次计时器，但它只运行了最后一个间隔值。

Answer 1

除非我遗漏了某些东西，否则看起来只是因为你在两个计时器中设置了两个值：

$('div.timer span.second').html(second);
$('div.timer1 span.second').html(second);

而是将选择器传递给构造函数，如下所示：

function _timer(selector, callback) {

然后将您的视觉更新更改为：

$(selector + ' span.second').html(second);

新的计时器如下：

timer = new _timer
    (
        ".timer",
        function(time)
        {
...

和

timer1 = new _timer
    (
        ".timer1",
        function(time)
        {
...

编辑：我回去了＆amp;看起来......只有一个计时器实际运行的原因是因为你正在使用window.onload设置start个调用，所以第二个只是替换第一个。在不完全更改代码的情况下，解决此特定问题的最简单方法是使用jQuery附加load事件（因为jQuery允许添加多个事件处理程序）：

$(window).load(function () { timer.start(806); });

和

$(window).load(function () { timer1.start(20); });

在javascript中显示几个计时器

1 个答案: