1

私はこのサッカーカウントアップスクリプトを持っています

// Class: Timer
var Timer = function (callback) {
    // Property: Frequency of elapse event of the timer in milliseconds
    this.Interval = 1000;

    // Property: Whether the timer is enable or not
    this.Enable = new Boolean(false);

    // Event: Timer tick
    this.Tick = callback;

    // Member variable: Hold interval id of the timer
    var timerId = 0;

    // Member variable: Hold instance of this class
    var thisObject;

    // Function: Start the timer
    this.Start = function () {
        this.Enable = new Boolean(true);

        thisObject = this;
        if (thisObject.Enable) {
            thisObject.timerId = setInterval(
            function () {
                thisObject.Tick();
            }, thisObject.Interval);
        }
    };

    // Function: Stops the timer
    this.Stop = function () {
        thisObject.Enable = new Boolean(false);
        clearInterval(thisObject.timerId);
    };

};

// Namespace: Match rules and timings
var Match = {

    Timers: {
        FirstHalf: new Timer(TimerTick),
        HalfTime: new Timer(TimerTick),
        SecondHalf: new Timer(TimerTick),
        TickCount: -1
    },

    Strings: {
        FirstHalf: 'First Half',
        HalfTime: 'Half Time',
        SecondHalf: 'Second Half',
        FullTime: 'Finished'
    },

    DisplayTime: function (t) {
        var m = parseInt(t / 60);
        var s = t % 60;
        return (m < 10 ? '0' + m : m) + ":" + (s < 10 ? '0' + s : s);
    }
};

// Function: Tick Event Handler (callback function)
function TimerTick(timer) {

    // Document elements used.
    var TimerP = document.getElementById('time');
    var DisplayP = document.getElementById('display'); 

    // During First Half
    if (Match.Timers.FirstHalf.Enable == true) {
        if (Match.Timers.TickCount == -1) { Match.Timers.TickCount = 0 }
        if (Match.Timers.TickCount == 2700) {
            Match.Timers.FirstHalf.Stop();
            Match.Timers.TickCount = -1;
            Match.Timers.HalfTime.Start();
        } else {
            TimerP.innerHTML = Match.DisplayTime(Match.Timers.TickCount);
            DisplayP.innerHTML = Match.Strings.FirstHalf;
            Match.Timers.TickCount++;
        }
    }

    // During Half Time
    else if (Match.Timers.HalfTime.Enable == true) {
        if (Match.Timers.TickCount == -1) { Match.Timers.TickCount = 0 }
        if (Match.Timers.TickCount == 900) {
            Match.Timers.HalfTime.Stop();
            Match.Timers.TickCount = -1;
            Match.Timers.SecondHalf.Start();
        } else {
            TimerP.innerHTML = '45:00';
            DisplayP.innerHTML = Match.Strings.HalfTime + ' (' + Match.DisplayTime(900 - Match.Timers.TickCount) + ')';
            Match.Timers.TickCount++;
        }
    }

    // During Second Half
    else if (Match.Timers.SecondHalf.Enable == true) {
        if (Match.Timers.TickCount == -1) { Match.Timers.TickCount = 2700 }
        if (Match.Timers.TickCount == 5400) {
            TimerP.innerHTML = '90:00';
            DisplayP.innerHTML = Match.Strings.FullTime;
            Match.Timers.SecondHalf.Stop();
            Match.Timers.TickCount = -1;
        } else {
            TimerP.innerHTML = Match.DisplayTime(Match.Timers.TickCount);
            DisplayP.innerHTML = Match.Strings.SecondHalf;
            Match.Timers.TickCount++;
        }
    }
}

function KickOff() {
    var btn = document.getElementById('btnKickOff');
    btn.setAttribute('style','display: none;');
    Match.Timers.FirstHalf.Start();
}

またはここでチェックしてくださいhttp://pastebin.com/CkmPQ9ZV

そして、スクリプト用の次の HTML コードがあります。

<!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">
        <title>Simple Football Match Timer</title>
        <script src="timer.js" type="text/javascript"></script>
    </head>

    <body>
        <form id="pageForm" runat="server">
            <div>    
                <p id="display">Waiting for kick off.</p>
                <p id="time">00:00</p>
                <input id="btnKickOff" type="button" value="Kick Off!" onclick="KickOff();" />
            </div>
        </form>
    </body>
</html>

このスクリプトは、[キックオフ] をクリックするとカウントを開始します。その後、0 から 45 分までカウントし、HalfTime とカウントダウンを表示します。 "

その素晴らしいスクリプトですが、私の問題は、ページが更新されるたびにこのスクリプトが再び開始されないようにしたいことです。これを自分の Web サイトに投稿したいので、ユーザーが自分の Web サイトを開いたときに、試合の時間を確認できます。それは試合の開始時に..そして最後まで続く

PS: 私は Javascript が苦手です.. このスクリプトの作成を手伝ってもらいました :)

4

2 に答える 2

2

誰もがあなたのサイトに来たときに同じもの、つまり同じ試合時間を表示したい場合は、このような JavaScript を使用することはできません。JavaScript はユーザーのコンピューターで実行されるため、タイマーを開始すると、それが表示されるのはあなただけです。

これは、JavaScript がアクセスして一致まであとどれくらいかを調べることができる開始時刻をサーバーに保存しない限り、実行が困難です。個人的には、MySQL でデータベース テーブルを作成し、すべての試合とその開始時間をそこに保存します。その後、PHP でアクセスし、httprequest を呼び出して JavaScript に取得できます。ただし、おそらくこれを行う簡単な方法があります。

于 2012-05-26T08:13:57.863 に答える
0

おそらく、開始する特定のUNIX時間を設定してから、「timerId」変数ではなくそれを参照するようにすることができます。

于 2012-05-26T07:58:10.467 に答える