JavaScript编程实战：通过案例掌握实用技能

JavaScript是一种广泛用于网页开发的脚本语言，它能够让网页实现动态效果和用户交互。在本篇文章中，我们将通过一系列案例来深入探讨JavaScript的实用技能，帮助读者更好地掌握这门技术。

1. 案例一：计算器

计算器是一个经典的编程练习，它可以帮助我们理解JavaScript的基本语法和逻辑。在这个案例中，我们将创建一个简单的计算器，能够执行加、减、乘、除四种运算。

// 获取输入框和按钮
const num1 = document.getElementById('num1');
const num2 = document.getElementById('num2');
const btn = document.getElementById('calculate');
const result = document.getElementById('result');

// 计算结果
function calculate(a, b) {
  return a + b;
}

// 绑定按钮事件
btn.addEventListener('click', function() {
  const num1 = parseFloat(document.getElementById('num1').value);
  const num2 = parseFloat(document.getElementById('num2').value);
  const res = calculate(num1, num2);
  result.innerHTML = `结果：${res}`;
});

2. 案例二：待办事项列表

待办事项列表是一个实用的网页功能，它可以帮助用户管理自己的任务。在这个案例中，我们将使用JavaScript实现一个简单的待办事项列表，用户可以添加、删除和标记已完成任务。

// 获取输入框和按钮
const input = document.getElementById('input');
const addBtn = document.getElementById('add');
const list = document.getElementById('list');

// 添加待办事项
function addTodo(text) {
  const li = document.createElement('li');
  li.innerHTML = `
    <span>${text}</span>
    <button onclick="removeTodo(this)">删除</button>
    <button onclick="markAsDone(this)">完成</button>
  `;
  list.appendChild(li);
}

// 删除待办事项
function removeTodo(btn) {
  btn.parentElement.remove();
}

// 标记为已完成
function markAsDone(btn) {
  btn.parentElement.classList.add('done');
}

// 绑定添加按钮事件
addBtn.addEventListener('click', function() {
  const text = input.value.trim();
  if (text) {
    addTodo(text);
    input.value = '';
  }
});

3. 案例三：图片轮播

图片轮播是一个常见的网页组件，它能够展示多张图片，并自动切换以吸引用户注意力。在这个案例中，我们将使用JavaScript实现一个简单的图片轮播。

// 获取图片和按钮
const img = document.getElementById('img');
const prevBtn = document.getElementById('prev');
const nextBtn = document.getElementById('next');

// 图片数据
const images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
let currentIndex = 0;

// 更新图片
function updateImg() {
  img.src = `${images[currentIndex]}`;
}

// 绑定按钮事件
prevBtn.addEventListener('click', function() {
  currentIndex = (currentIndex - 1 + images.length) % images.length;
  updateImg();
});

nextBtn.addEventListener('click', function() {
  currentIndex = (currentIndex + 1) % images.length;
  updateImg();
});

// 初始化图片
updateImg();

通过以上三个案例，读者可以掌握JavaScript的基本语法、事件处理、DOM操作等实用技能。在实际开发中，这些技能将帮助您构建功能丰富、交互性强的网页应用。

希望本篇文章能够帮助您更好地理解和应用JavaScript编程，欢迎继续学习和实践！