我是JavaScript新手。 我使用HTML，CSS和JavaScript编写了一个计算器，但在HTML部分中做了JavaScript部分。 如何使用外部JS文件来实现这一点？
代码如下:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="Taschenrechner.css">
<title>Taschenrechner</title>
</head>
<body>
<form class="calculator" name="calc">
<input class="value" type="text" name="txt" readonly="">
<span class="num clear" onClick="document.calc.txt.value =''">c</span>
<span class="num" onClick="document.calc.txt.value +='/'">/</span>
<span class="num" onClick="document.calc.txt.value +='*'">*</span>
<span class="num" onClick="document.calc.txt.value +='7'">7</span>
<span class="num" onClick="document.calc.txt.value +='8'">8</span>
<span class="num" onClick="document.calc.txt.value +='9'">9</span>
<span class="num" onClick="document.calc.txt.value +='-'">-</span>
<span class="num" onClick="document.calc.txt.value +='4'">4</span>
<span class="num" onClick="document.calc.txt.value +='5'">5</span>
<span class="num" onClick="document.calc.txt.value +='6'">6</span>
<span class="num plus" onClick="document.calc.txt.value +='+'">+</span>
<span class="num" onClick="document.calc.txt.value +='3'">3</span>
<span class="num" onClick="document.calc.txt.value +='2'">2</span>
<span class="num" onClick="document.calc.txt.value +='1'">1</span>
<span class="num" onClick="document.calc.txt.value +='0'">0</span>
<span class="num" onClick="document.calc.txt.value +='00'">00</span>
<span class="num" onClick="document.calc.txt.value +='.'">.</span>
<span class="num equal" onClick="document.calc.txt.value =eval(calc.txt.value)">=</span>
</form>
</body>
</html>
如您所见，JavaScript部分位于HTML文档中。
CSS:
/*@import url('https://fonts.googleapis.com/css?family=Poppins: 300,400,500,600,700,800,900&display=swap'); */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #091921;
}
.calculator {
position: relative;
display: grid;
}
.calculator .value {
grid-column: span 4;
height: 100px;
text-align: right;
border: none;
outline: none;
padding: 10px;
font-size: 18px;
}
.calculator span{
display: grid;
width: 60px;
height: 60px;
color: #fff;
background: #0c2835;
place-items: center;
border: 1px solid rgba(0, 0, 0, .1)
}
.calculator span:active {
background: #74ff3b;
color: #111;
}
.calculator span.clear{
grid-column: span 2;
width: 120px;
background: #ff3077;
}
.calculator span.plus{
grid-row: span 2;
height: 120px;
}
.calculator span.equal{
background: #03b1ff;
}
所以现在我想要一个外部JavaScript文件，它的作用与HTML JavaScript部分相同。
谢谢你的回答！
创建一个使用扩展名。js调用的空文件，然后使用scriptsrc=“filename.js”>调用该脚本。 如果您的脚本需要等待主体加载，那么将脚本放在的末尾。 如果它是一个使编码更容易的脚本，例如jQuery，那么将该脚本放在中的任何位置。 示例:
<html>
<head>
<script src='https://code.jquery.com/jquery-3.5.1.min.js'></script>
</head>
<body>
<canvas></canvas>
<script src="canvasGame.js"></script>
</body>
</html>
