算上脚本

时间:2012-05-26 07:31:43

标签: javascript

我有这个足球计数脚本

// 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>

当我点击Kick off时,这个脚本开始计数..它显示0到45分钟后显示HalfTime和倒计时15分钟后15分钟完成它再次从45开始计数到90,当它达到90时显示“已完成”

它很好的脚本,但我的问题是,我希望这个脚本不要在每次页面刷新后再次启动我想在我的网站上发布,所以当用户打开我的网站时,他们将能够看到比赛的时间..我会在比赛开始时点击它......然后一直持续到最后

PS:我不擅长Javascript ..我在创建这个脚本方面得到了帮助:))

2 个答案:

答案 0 :(得分:2)

如果您希望每个人在访问您的网站时看到相同的内容,即相同的匹配时间,则不能使用这样的JavaScript。 JavaScript在用户的计算机上运行,​​因此当您启动计时器时,只有您会看到它。

除非您在服务器上存储JavaScript可以访问的开始时间以找出匹配的距离,否则这很难做到。就个人而言,我将使用MySQL创建一个数据库表,并将所有匹配项及其开始时间存储在其中。然后,您可以使用PHP访问它,然后调用httprequest将其转换为JavaScript。但是,这可能是更简单的方法。

答案 1 :(得分:0)

你可以设置一个特定的unix时间来启动它,然后让它引用而不是“timerId”变量。