JS执行顺序从上到下实例
时间: 2023-08-12 14:33:30 浏览: 45
假设我们有以下的 HTML 和 JavaScript 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>JS执行顺序从上到下实例</title>
<script src="script.js"></script>
</head>
<body>
<h1>JS执行顺序从上到下实例</h1>
<p>下面是一个简单的计算器:</p>
<label for="num1">第一个数字:</label>
<input type="number" id="num1"><br><br>
<label for="num2">第二个数字:</label>
<input type="number" id="num2"><br><br>
<button onclick="add()">相加</button>
<button onclick="subtract()">相减</button>
<button onclick="multiply()">相乘</button>
<button onclick="divide()">相除</button>
<p id="result"></p>
</body>
</html>
```
```javascript
// script.js
function add() {
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
var result = Number(num1) + Number(num2);
document.getElementById("result").innerHTML = "结果:" + result;
}
function subtract() {
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
var result = Number(num1) - Number(num2);
document.getElementById("result").innerHTML = "结果:" + result;
}
function multiply() {
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
var result = Number(num1) * Number(num2);
document.getElementById("result").innerHTML = "结果:" + result;
}
function divide() {
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
var result = Number(num1) / Number(num2);
document.getElementById("result").innerHTML = "结果:" + result;
}
```
在这个例子中,JavaScript 代码是通过 `<script>` 标签引入的,并且放在了 HTML 文档的 `<head>` 标签中。然而,由于这些 JavaScript 代码并不需要在文档加载完成之前执行,我们可以将 `<script>` 标签移到 HTML 文档的底部,以确保 JavaScript 代码的执行顺序是从上到下的。