Question

我正在研究计时器。目前我有它，以便脚本卡在html中运行它。我想将js分成单独的文件。这是我到目前为止所做的。

HTML

 <body>
    <div id="countdown"></div>
    <div id="notifier"></div>
    <script type="text/javascript">
        function startTimer() {
            userInput = document.getElementById('userTime').value;
            if (userInput.length == 0) {
                alert("Please enter a value");
            } else {
                var numericExpression = /^[0-9]+$/;
                if (!userInput.match(numericExpression)) {
                    alert("Please enter a number")
                } else {

                    function display(notifier, str) {
                        document.getElementById(notifier).innerHTML = str;
                    }

                    function toMinuteAndSecond(x) {
                        return Math.floor(x / 60) + ":" + x % 60;
                    }

                    function setTimer(remain, actions) {
                        (function countdown() {
                            display("countdown", toMinuteAndSecond(remain));
                            actions[remain] && actions[remain]();
                            (remain -= 1) >= 0 && setTimeout(arguments.callee, 1000);
                        })();
                    }

                    setTimer(userInput, {
                        10: function() {
                            display("notifier", "Just 10 seconds to go");
                        },
                        5: function() {
                            display("notifier", "5 seconds left");
                        },
                        0: function() {
                            alert("Time is up. Please Sumbit Vote.");
                        }
                    });
                }
            }
        }
    </script>Set Time Limit:
    <input type="text" id="userTime" />
    <input type="button" value="Start" onclick="startTimer()" />
</body>

这是一个小提琴 http://jsfiddle.net/grahamwalsh/0h9t65bs/

Answer 1

使用名为file.js的javascript代码制作文件然后在脚本代码中执行以下操作，

<script type="text/javascript" src="file.js" ></script>

这将使javascript文件被加载。

Answer 2

创建一个名为script.js的新文件或您喜欢的任何名称。确保它与您的html文件位于同一目录中。

接下来，将您的in-html脚本复制到script.js中，并将<script type="text/javascript">更改为<script type="text/javascript" src="script.js">

编辑：结果代码：

＆＃13;

function startTimer() {
  userInput = document.getElementById('userTime').value;
  if(userInput.length == 0) {
    alert("Please enter a value");
  } else {
    var numericExpression = /^[0-9]+$/;
    if(!userInput.match(numericExpression)) {
      alert("Please enter a number")
    } else {

      function display( notifier, str ) {
        document.getElementById(notifier).innerHTML = str;
      }

      function toMinuteAndSecond( x ) {
        return Math.floor(x/60) + ":" + x%60;
      }

      function setTimer( remain, actions ) {
        (function countdown() {
           display("countdown", toMinuteAndSecond(remain));         
           actions[remain] && actions[remain]();
           (remain -= 1) >= 0 && setTimeout(arguments.callee, 1000);
        })();
      }

      setTimer(userInput, {
        10: function () { display("notifier", "Just 10 seconds to go"); },
        5: function () { display("notifier", "5 seconds left");        },
        0: function () { alert( "Time is up. Please Submit Vote.");       }
      }); 
      
    }  
  }
}

＆＃13;

<body>
  <div id="countdown"></div>
  <div id="notifier"></div>
  <script type="text/javascript" src="script.js"></script>
  Set Time Limit: <input type="text" id="userTime" />
  <input type="button" value="Start" onclick="startTimer()" />
</body>

＆＃13;

如何删除脚本并创建单独的js文件

2 个答案: