1

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 回呼び出しましたが、最後の間隔値で実行しただけです。

4

1 に答える 1

0

何かが欠けていない限り、両方のタイマーで 2 つの値を次のように設定していることが原因のようです。

$('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)
        {
...

編集：戻って見ました...実際に実行されているタイマーが1つだけの理由はwindow.onload、呼び出しのセットアップに使用しているためですstart.2番目のタイマーは最初のタイマーを単に置き換えています. コードを完全に変更することなく、この特定の問題を修正する最も簡単な解決策は、jQuery を使用してloadイベントをアタッチすることです (jQuery では複数のイベント ハンドラーをすぐに追加できるため)。

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

と

$(window).load(function () { timer1.start(20); });
于 2013-07-31T00:20:00.840 に答える