用JavaScript制作几个简易网页
时间: 2023-10-09 08:04:31 浏览: 96
JavaScript制作的几个简单网页
4星 · 用户满意度95%
好的,下面是三个简单的网页示例:
1. Hello World 页面
```html
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
```
2. 图片展示页面
```html
<!DOCTYPE html>
<html>
<head>
<title>图片展示</title>
</head>
<body>
<h1>图片展示</h1>
<img src="https://via.placeholder.com/150" alt="placeholder image" />
<img src="https://via.placeholder.com/200" alt="placeholder image" />
<img src="https://via.placeholder.com/250" alt="placeholder image" />
</body>
</html>
```
3. 简易计算器页面
```html
<!DOCTYPE html>
<html>
<head>
<title>简易计算器</title>
</head>
<body>
<h1>简易计算器</h1>
<label for="num1">数字1:</label>
<input type="number" id="num1" /><br />
<label for="num2">数字2:</label>
<input type="number" id="num2" /><br />
<button onclick="add()">加</button>
<button onclick="subtract()">减</button>
<button onclick="multiply()">乘</button>
<button onclick="divide()">除</button><br />
<p id="result"></p>
<script>
function add() {
const num1 = Number(document.getElementById("num1").value);
const num2 = Number(document.getElementById("num2").value);
document.getElementById("result").textContent = num1 + num2;
}
function subtract() {
const num1 = Number(document.getElementById("num1").value);
const num2 = Number(document.getElementById("num2").value);
document.getElementById("result").textContent = num1 - num2;
}
function multiply() {
const num1 = Number(document.getElementById("num1").value);
const num2 = Number(document.getElementById("num2").value);
document.getElementById("result").textContent = num1 * num2;
}
function divide() {
const num1 = Number(document.getElementById("num1").value);
const num2 = Number(document.getElementById("num2").value);
document.getElementById("result").textContent = num1 / num2;
}
</script>
</body>
</html>
```
这些示例中使用了HTML、CSS和JavaScript来创建网页元素和交互行为。你可以根据自己的需要进行修改和扩展。
阅读全文