Question

我正在查看此页面中的代码javascript countdown timer pause resume，我查看了代码

var CountDown = (function ($) {
// Length ms 
var TimeOut = 10000;
// Interval ms
var TimeGap = 1000;

var CurrentTime = ( new Date() ).getTime();
var EndTime = ( new Date() ).getTime() + TimeOut;

var GuiTimer = $('#countdown');
var GuiPause = $('#pause');
var GuiResume = $('#resume').hide();

var Running = true;

var UpdateTimer = function() {
    // Run till timeout
    if( CurrentTime + TimeGap < EndTime ) {
        setTimeout( UpdateTimer, TimeGap );
    }
    // Countdown if running
    if( Running ) {
        CurrentTime += TimeGap;
        if( CurrentTime >= EndTime ) {
            GuiTimer.css('color','red');
        }
    }
    // Update Gui
    var Time = new Date();
    Time.setTime( EndTime - CurrentTime );
    var Minutes = Time.getMinutes();
    var Seconds = Time.getSeconds();

    GuiTimer.html( 
        (Minutes < 10 ? '0' : '') + Minutes 
        + ':' 
        + (Seconds < 10 ? '0' : '') + Seconds );
};

var Pause = function() {
    Running = false;
    GuiPause.hide();
    GuiResume.show();
};

var Resume = function() {
    Running = true;
    GuiPause.show();
    GuiResume.hide();
};

var Start = function( Timeout ) {
    TimeOut = Timeout;
    CurrentTime = ( new Date() ).getTime();
    EndTime = ( new Date() ).getTime() + TimeOut;
    UpdateTimer();
};

return {
    Pause: Pause,
    Resume: Resume,
    Start: Start
};
})(jQuery);

jQuery('#pause').on('click',CountDown.Pause);
jQuery('#resume').on('click',CountDown.Resume);

CountDown.Start(120000);

http://jsfiddle.net/rnQ2W/2/我将代码复制并粘贴到记事本++中，但是当我运行它时代码没有用。

Answer 1

您复制/粘贴的代码无法正常工作的几个原因......

确保您在html的body中有以下内容：

<div id="countdown">00:00</div>
<a href="#pause" id="pause">Pause</a> <a href="#resume" id="resume">Resume</a>

由于代码使用了jQuery，请确保将jQuery lib包含在html的head中

将以下内容粘贴到Notepad ++中并将其另存为html文件（例如countdown.html），然后在浏览器中将其打开...

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <title>Countdown</title>
    <script type='text/javascript'>
    jQuery(function() {
        var CountDown = (function ($) {
            // Length ms 
            var TimeOut = 10000;
            // Interval ms
            var TimeGap = 1000;

            var CurrentTime = ( new Date() ).getTime();
            var EndTime = ( new Date() ).getTime() + TimeOut;

            var GuiTimer = $('#countdown');
            var GuiPause = $('#pause');
            var GuiResume = $('#resume').hide();

            var Running = true;

            var UpdateTimer = function() {
                // Run till timeout
                if( CurrentTime + TimeGap < EndTime ) {
                    setTimeout( UpdateTimer, TimeGap );
                }
                // Countdown if running
                if( Running ) {
                    CurrentTime += TimeGap;
                    if( CurrentTime >= EndTime ) {
                        GuiTimer.css('color','red');
                    }
                }
                // Update Gui
                var Time = new Date();
                Time.setTime( EndTime - CurrentTime );
                var Minutes = Time.getMinutes();
                var Seconds = Time.getSeconds();

                GuiTimer.html( 
                    (Minutes < 10 ? '0' : '') + Minutes 
                    + ':' 
                    + (Seconds < 10 ? '0' : '') + Seconds );
            };

            var Pause = function() {
                Running = false;
                GuiPause.hide();
                GuiResume.show();
            };

            var Resume = function() {
                Running = true;
                GuiPause.show();
                GuiResume.hide();
            };

            var Start = function( Timeout ) {
                TimeOut = Timeout;
                CurrentTime = ( new Date() ).getTime();
                EndTime = ( new Date() ).getTime() + TimeOut;
                UpdateTimer();
            };

            return {
                Pause: Pause,
                Resume: Resume,
                Start: Start
            };
        })(jQuery);

        jQuery('#pause').on('click',CountDown.Pause);
        jQuery('#resume').on('click',CountDown.Resume);

        CountDown.Start(120000); 
    });
</script>


</head>

<body>
    <div id="countdown">00:00</div>
    <a href="#pause" id="pause">Pause</a> <a href="#resume" id="resume">Resume</a>
</body>

</html>

当我从jsfiddle复制并粘贴if时，此代码在notepad ++中不起作用？

1 个答案: