如何在HTML页面中引入外部JS文件
本文介绍在HTML页面中调用外部JavaScript文件的两种常见方式。首先演示将JS代码保存为本地文件（如a.js），并通过script标签的src属性引用；其次说明如何直接引用网络上的JS资源。通过对比内联脚本与外部引用的代码结构，帮助开发者理解正确的引入语法及路径配置。
引入外部JS文件的基本方法
在实际开发中，我们经常需要将JavaScript代码分离到独立的文件中以便管理和复用。那么，具体该如何在HTML页面中正确调用这些外部的JS文件呢？
我们可以参考一个随机抽取示例来理解这一过程。在一个标准的HTML页面结构中，通常包含head和body部分，其中head用于定义元数据和脚本引用，body用于展示内容。
<html>
<head>
<title>random number</title>
<script type="text/javascript">
//随机抽取人名 </script>
</head>
<body>
<form>
<input type="button" style='font-size:40px' value="Start" onclick="start()">
<input type="button" style='font-size:40px' value="Stop" onclick="stop();">
</form>
<br>
<font color="blue" style='font-size:150px' id="num"></font>
<br>
</body>
</html> 为了将逻辑与结构分离，我们可以把具体的JavaScript代码单独存放。例如，在当前项目的文件夹下创建一个名为a.js的文件，并将相关的脚本逻辑写入其中。
修改后的HTML页面结构如下所示。关键在于在head部分使用script标签，并通过src属性指定外部JS文件的路径，从而替代原本写在页面内的内联脚本。
<html>
<head>
<title>random number</title>
<script type="text/javascript" src="a.js">
</script>
</head>
<body>
<form>
<input type="button" style='font-size:40px' value="Start" onclick="start()">
<input type="button" style='font-size:40px' value="Stop" onclick="stop();">
</form>
<br>
<font color="blue" style='font-size:150px' id="num"></font>
<br>
</body>
</html> 以下是外部文件a.js中可能包含的代码示例。它定义了变量、数组以及用于控制随机显示和停止的函数逻辑。
var errorString = "Please input a positive integer.";
var arr = ["A", "B", "C", "D"];
function count() {
max = arr.length; //max， 全局变量
document.getElementById("num").innerHTML = arr[parseInt(max * Math.random())];
}
function start()
{
timeId = setInterval("count();", 100);
}
function stop() {
clearInterval(timeId);
} 完成上述配置后，页面即可正常加载并执行外部JS文件中的功能。这种结构使得HTML专注于页面布局，而JS专注于业务逻辑。
引用网络上的JS文件
此外，除了本地文件，我们还可以将JS文件部署到Web服务器上，并通过完整的URL地址进行引用。这种方式适用于共享公共脚本库或CDN资源。
<html>
<head>
<title>random number</title>
<script type="text/javascript" src="http://localhost:8080/test/js/random1.js"></script>
</head>
<body>
<form>
<input type="button" style='font-size:40px' value="Start" onclick="start()">
<input type="button" style='font-size:40px' value="Stop" onclick="stop();">
</form>
<br>
<font color="blue" style='font-size:150px' id="num"></font>
<br>
</body>
</html>以上介绍了在HTML中引入外部JavaScript文件的基本方法，包括本地引用和远程引用两种场景。希望这些示例能对您的开发工作有所帮助。如有任何疑问，欢迎留言交流，我们将及时回复。感谢您的支持。
JavaScript将图片转换为Base64编码的两种途径
2026-11-05 16:43:05
怎么在 Vue 或 React 项目中正确集成 animate.js
2026-11-05 10:23:38
JS注册事件：addEventListener基础语法与参数详解
2026-11-05 08:44:56
JSP和JS的区别：运行环境与服务端/客户端职责解析
2026-11-04 23:34:36
pdf.js 官方下载地址：GitHub Release 获取预编译包
2026-11-04 23:07:27