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

【问题标题】：This code doesn't work in notepad++ when I copy and paste if from jsfiddle?当我从 jsfiddle 复制和粘贴时，此代码在 notepad++ 中不起作用？
【发布时间】：2018-06-05 06:12:09
【问题描述】：

我正在查看此页面 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/我将代码复制并粘贴到notepad++中，但运行时代码不起作用。

【问题讨论】：

浏览器控制台会告诉你问题
你确定你添加了jQuery源码吗？
你是否在notepad++中安装了一个插件来运行javascript？
"我复制粘贴了代码，但是不行！" - 如果我蒙上眼睛，将第一次登月任务中的代码复制粘贴到我的 RaspberryPi 上，也可以这样说……

标签： javascript jquery html

【解决方案1】：

您复制/粘贴的代码不起作用的几个原因...

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

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

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

将以下内容粘贴到您的 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>

【讨论】：

@Andreas;啊！我的错误......在添加html文件相关代码之前提交了编辑......
@Andreas 最初的小提琴不包括 jQuery 作为外部资源，但在我的编辑中发布的 HTML 确实包括 jQuery 的 CDN 版本...
@Andreas 实际上，我确实是正确的；当然，OP 的 jQuery lib 排除是一个需要解决的问题......但是，您是绝对正确的，因为在执行倒计时时没有页面准备就绪检测......我已经修改了答案中的更改，更多。很好的收获。
谢谢你，这更有意义
但是如果我想跑超过 1 次怎么办？