JavaScript是一种脚本语言，广泛应用于网页开发，并且可以在各种操作系统和浏览器上运行。它具有简单易学的语法和丰富的功能库，使得开发人员可以轻松创建各种交互式的网页应用程序。在本博客中，我们将分享一些有趣的JavaScript编程实例，帮助您进一步熟悉和掌握这门语言。
实例一：计算器
计算器是使用JavaScript编程的一个经典示例。下面是一个简单的计算器实现：
<!DOCTYPE html>
<html>
<head>
<title>JavaScript计算器</title>
<script>
function calculate() {
var num1 = parseInt(document.getElementById('num1').value);
var num2 = parseInt(document.getElementById('num2').value);
var operator = document.getElementById('operator').value;
var result;
if (operator == '+') {
result = num1 + num2;
} else if (operator == '-') {
result = num1 - num2;
} else if (operator == '*') {
result = num1 * num2;
} else if (operator == '/') {
result = num1 / num2;
}
document.getElementById('result').value = result;
}
</script>
</head>
<body>
<h1>简单计算器</h1>
<input type="number" id="num1"> +
<input type="number" id="num2"> =
<input type="number" id="result" readonly>
<br>
<button onclick="calculate()">计算</button>
<select id="operator">
<option value="+">加</option>
<option value="-">减</option>
<option value="*">乘</option>
<option value="/">除</option>
</select>
</body>
</html>
此例子展示了一个HTML页面中的简单计算器，用户可以输入两个数字和选择运算符，然后通过点击"计算"按钮来获得结果。
实例二：图像切换器
下面是一个图像切换器的例子，每点击一次按钮，就会切换到下一张图片：
<!DOCTYPE html>
<html>
<head>
<title>JavaScript图像切换器</title>
<script>
var currentImage = 0;
var images = ["image1.jpg", "image2.jpg", "image3.jpg"];
function changeImage() {
var imageElement = document.getElementById('image');
currentImage = (currentImage + 1) % images.length;
imageElement.src = images[currentImage];
}
</script>
</head>
<body>
<h1>图像切换器</h1>
<img id="image" src="image1.jpg" width="300" height="200">
<br>
<button onclick="changeImage()">下一张</button>
</body>
</html>
此例子展示了一个简单的图像切换器，利用JavaScript和一个图片数组来实现。用户每点击一次按钮，就会在预定的图片之间进行切换。
实例三：待办事项列表
下面是一个创建待办事项列表的例子，用户可以添加，删除和标记完成事项：
<!DOCTYPE html>
<html>
<head>
<title>JavaScript待办事项列表</title>
<script>
var todoList = [];
function addTodo() {
var todo = document.getElementById('todo').value;
todoList.push(todo);
updateTodoList();
}
function deleteTodo(index) {
todoList.splice(index, 1);
updateTodoList();
}
function markComplete(index) {
todoList[index] = "<s>" + todoList[index] + "</s>";
updateTodoList();
}
function updateTodoList() {
var listElement = document.getElementById('todo-list');
listElement.innerHTML = "";
for (var i = 0; i < todoList.length; i++) {
listElement.innerHTML += "<li>" + todoList[i] + " <button onclick='deleteTodo(" + i + ")'>删除</button> <button onclick='markComplete(" + i + ")'>完成</button></li>";
}
}
</script>
</head>
<body>
<h1>待办事项列表</h1>
<input type="text" id="todo">
<button onclick="addTodo()">添加</button>
<ul id="todo-list"></ul>
</body>
</html>
此例子展示了一个简单的待办事项列表，用户可以在输入框中输入待办事项并点击"添加"按钮添加到列表中。用户还可以点击"删除"按钮删除事项，点击"完成"按钮标记事项为已完成。
希望这些实例能帮助您更好地理解和运用JavaScript编程。通过完成这些实例，您将能够熟练地使用JavaScript创建各种交互式和有趣的网页应用程序。祝您编程愉快！
本文来自极简博客，作者：墨色流年，转载请注明原文链接：JavaScript编程实例分享
