动态待办事项列表

这是一个非常经典的入门案例,展示了如何使用JavaScript来动态地添加、删除和修改网页内容。

JavaScript网页代码案例
（图片来源网络，侵删）

功能说明：

  • 在输入框中输入任务,点击“添加”按钮，任务会出现在下方列表中。
  • 每个任务前面有一个复选框,勾选后，任务文本会有删除线效果。
  • 每个任务后面有一个“删除”按钮，点击后可以从列表中移除该任务。

代码实现：

HTML 文件 (index.html)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">JavaScript 待办事项列表</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>我的待办事项</h1>
        <div class="input-area">
            <input type="text" id="taskInput" placeholder="请输入新任务...">
            <button id="addTaskBtn">添加</button>
        </div>
        <ul id="taskList">
            <!-- 任务列表将在这里动态生成 -->
        </ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS 文件 (style.css)

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #f4f7f6;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}
.container {
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 90%;
    max-width: 500px;
}
h1 {
    text-align: center;
    color: #333;
    margin-bottom: 1.5rem;
}
.input-area {
    display: flex;
    margin-bottom: 1.5rem;
}
#taskInput {
    flex-grow: 1;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    outline: none;
}
#taskInput:focus {
    border-color: #007bff;
}
#addTaskBtn {
    padding: 0.75rem 1.5rem;
    margin-left: 0.5rem;
    border: none;
    background-color: #007bff;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s;
}
#addTaskBtn:hover {
    background-color: #0056b3;
}
#taskList {
    list-style: none;
    padding: 0;
}
.task-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s;
}
.task-item:hover {
    background-color: #f9f9f9;
}
.task-item.completed .task-text {
    text-decoration: line-through;
    color: #888;
}
.task-checkbox {
    margin-right: 1rem;
}
.task-text {
    flex-grow: 1;
}
.delete-btn {
    background: #dc3545;
    color: white;
    border: none;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.3s;
}
.delete-btn:hover {
    background: #c82333;
}

JavaScript 文件 (script.js)

// 获取DOM元素
const taskInput = document.getElementById('taskInput');
const addTaskBtn = document.getElementById('addTaskBtn');
const taskList = document.getElementById('taskList');
// 从localStorage加载任务
let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
// 渲染任务列表
function renderTasks() {
    taskList.innerHTML = ''; // 清空当前列表
    tasks.forEach((task, index) => {
        const li = document.createElement('li');
        li.className = `task-item ${task.completed ? 'completed' : ''}`;
        li.innerHTML = `
            <input type="checkbox" class="task-checkbox" ${task.completed ? 'checked' : ''}>
            <span class="task-text">${task.text}</span>
            <button class="delete-btn">删除</button>
        `;
        // 添加复选框事件监听
        li.querySelector('.task-checkbox').addEventListener('change', () => {
            toggleTask(index);
        });
        // 添加删除按钮事件监听
        li.querySelector('.delete-btn').addEventListener('click', () => {
            deleteTask(index);
        });
        taskList.appendChild(li);
    });
}
// 添加新任务
function addTask() {
    const taskText = taskInput.value.trim();
    if (taskText === '') {
        alert('请输入任务内容！');
        return;
    }
    tasks.push({ text: taskText, completed: false });
    saveTasks();
    renderTasks();
    taskInput.value = ''; // 清空输入框
}
// 切换任务完成状态
function toggleTask(index) {
    tasks[index].completed = !tasks[index].completed;
    saveTasks();
    renderTasks();
}
// 删除任务
function deleteTask(index) {
    tasks.splice(index, 1);
    saveTasks();
    renderTasks();
}
// 保存任务到localStorage
function saveTasks() {
    localStorage.setItem('tasks', JSON.stringify(tasks));
}
// 事件监听
addTaskBtn.addEventListener('click', addTask);
// 允许按Enter键添加任务
taskInput.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
        addTask();
    }
});
// 初始渲染
renderTasks();

简易计算器

这个案例展示了如何处理用户输入、执行数学运算并更新页面。

JavaScript网页代码案例
（图片来源网络，侵删）

功能说明：

  • 支持基本的加减乘除运算。
  • 支持小数点运算。
  • 有清除按钮可以重置计算器。
  • 连续运算功能（3 + 5 * 2）。

代码实现：

HTML 文件 (calculator.html)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">简易计算器</title>
    <link rel="stylesheet" href="calculator.css">
</head>
<body>
    <div class="calculator">
        <div class="display">
            <input type="text" id="display" readonly>
        </div>
        <div class="buttons">
            <button class="btn-clear">C</button>
            <button class="btn-operator">/</button>
            <button class="btn-operator">*</button>
            <button class="btn-operator">-</button>
            <button class="btn-number">7</button>
            <button class="btn-number">8</button>
            <button class="btn-number">9</button>
            <button class="btn-operator">+</button>
            <button class="btn-number">4</button>
            <button class="btn-number">5</button>
            <button class="btn-number">6</button>
            <button class="btn-equals" rowspan="2">=</button>
            <button class="btn-number">1</button>
            <button class="btn-number">2</button>
            <button class="btn-number">3</button>
            <button class="btn-zero">0</button>
            <button class="btn-number">.</button>
        </div>
    </div>
    <script src="calculator.js"></script>
</body>
</html>

CSS 文件 (calculator.css)

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #333;
    margin: 0;
    font-family: Arial, sans-serif;
}
.calculator {
    background-color: #444;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    padding: 20px;
}
.display {
    margin-bottom: 15px;
}
#display {
    width: 100%;
    height: 60px;
    font-size: 2.5em;
    text-align: right;
    padding: 0 15px;
    border: none;
    border-radius: 5px;
    background-color: #222;
    color: #fff;
    box-sizing: border-box;
}
.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
}
.btn-number, .btn-operator, .btn-clear, .btn-equals, .btn-zero {
    height: 50px;
    font-size: 1.5em;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.btn-number {
    background-color: #666;
    color: white;
}
.btn-number:hover {
    background-color: #777;
}
.btn-operator {
    background-color: #ff9500;
    color: white;
}
.btn-operator:hover {
    background-color: #ffb143;
}
.btn-equals {
    background-color: #2196F3;
    color: white;
    grid-row: span 2;
}
.btn-equals:hover {
    background-color: #0b7dda;
}
.btn-clear {
    background-color: #f44336;
    color: white;
}
.btn-clear:hover {
    background-color: #d32f2f;
}
.btn-zero {
    grid-column: span 2;
}

JavaScript 文件 (calculator.js)

const display = document.getElementById('display');
const buttons = document.querySelectorAll('.buttons button');
let currentInput = '0';
let previousInput = '';
let operation = null;
let shouldResetScreen = false;
// 更新显示屏
function updateDisplay() {
    display.value = currentInput;
}
// 处理数字输入
function appendNumber(number) {
    if (currentInput === '0' || shouldResetScreen) {
        currentInput = number;
        shouldResetScreen = false;
    } else {
        currentInput += number;
    }
    updateDisplay();
}
// 处理小数点
function appendDecimal() {
    if (shouldResetScreen) {
        currentInput = '0.';
        shouldResetScreen = false;
    } else if (!currentInput.includes('.')) {
        currentInput += '.';
    }
    updateDisplay();
}
// 选择操作符
function chooseOperation(op) {
    if (operation !== null) {
        calculate();
    }
    previousInput = currentInput;
    operation = op;
    shouldResetScreen = true;
}
// 执行计算
function calculate() {
    let computation;
    const prev = parseFloat(previousInput);
    const current = parseFloat(currentInput);
    if (isNaN(prev) || isNaN(current)) return;
    switch (operation) {
        case '+':
            computation = prev + current;
            break;
        case '-':
            computation = prev - current;
            break;
        case '*':
            computation = prev * current;
            break;
        case '/':
            if (current === 0) {
                alert('不能除以零！');
                clear();
                return;
            }
            computation = prev / current;
            break;
        default:
            return;
    }
    currentInput = computation.toString();
    operation = null;
    previousInput = '';
    shouldResetScreen = true;
    updateDisplay();
}
// 清除计算器
function clear() {
    currentInput = '0';
    previousInput = '';
    operation = null;
    shouldResetScreen = false;
    updateDisplay();
}
// 添加事件监听器
buttons.forEach(button => {
    button.addEventListener('click', () => {
        const value = button.textContent;
        if (button.classList.contains('btn-number')) {
            appendNumber(value);
        } else if (button.classList.contains('btn-zero')) {
            appendNumber(value);
        } else if (button.classList.contains('btn-operator')) {
            chooseOperation(value);
        } else if (button.classList.contains('btn-equals')) {
            calculate();
        } else if (button.classList.contains('btn-clear')) {
            clear();
        } else if (button.classList.contains('btn-number') && value === '.') {
            appendDecimal();
        }
    });
});
// 初始化显示
updateDisplay();

图片轮播/幻灯片

这个案例展示了如何使用JavaScript来创建一个自动播放或手动控制的图片轮播效果。

JavaScript网页代码案例
（图片来源网络，侵删）

功能说明：

  • 自动播放图片,每隔几秒切换一张。
  • 提供左右箭头按钮,可以手动切换图片。
  • 提供底部指示器,显示当前是第几张图片，并可以点击跳转。

代码实现：

HTML 文件 (slideshow.html)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">图片轮播</title>
    <link rel="stylesheet" href="slideshow.css">
</head>
<body>
    <div class="slideshow-container">
        <div class="slides fade">
            <img src="https://picsum.photos/seed/slide1/800/400.jpg" style="width:100%">
        </div>
        <div class="slides fade">
            <img src="https://picsum.photos/seed/slide2/800/400.jpg" style="width:100%">
        </div>
        <div class="slides fade">
            <img src="https://picsum.photos/seed/slide3/800/400.jpg" style="width:100%">
        </div>
        <!-- 左右箭头 -->
        <a class="prev">&#10094;</a>
        <a class="next">&#10095;</a>
        <!-- 指示器 -->
        <div class="dots-container">
            <span class="dot active"></span>
            <span class="dot"></span>
            <span class="dot"></span>
        </div>
    </div>
    <script src="slideshow.js"></script>
</body>
</html>

CSS 文件 (slideshow.css)

* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}
/* 轮播容器 */
.slideshow-container {
  max-width: 800px;
  position: relative;
  margin: auto;
}
/* 隐藏图片 */
.fade {
  display: none;
}
/* 显示第一张图片 */
.active-slide {
  display: block;
}
/* 箭头按钮 */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}
/* 指示器样式 */
.dots-container {
  text-align: center;
  padding: 20px;
}
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 5px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.active-dot, .dot:hover {
  background-color: #717171;
}

JavaScript 文件 (slideshow.js)

let slideIndex = 1;
const slides = document.getElementsByClassName("slides");
const dots = document.getElementsByClassName("dot");
// 显示指定的幻灯片
function showSlides(n) {
  if (n > slides.length) { slideIndex = 1; }
  if (n < 1) { slideIndex = slides.length; }
  // 隐藏所有幻灯片
  for (let i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  // 移除所有指示点的激活状态
  for (let i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active-dot", "");
  }
  // 显示当前幻灯片和激活对应指示点
  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " active-dot";
}
// 切换到下一张或上一张
function plusSlides(n) {
  showSlides(slideIndex += n);
}
// 切换到指定幻灯片
function currentSlide(n) {
  showSlides(slideIndex = n);
}
// 自动播放
function autoPlay() {
    plusSlides(1);
    setTimeout(autoPlay, 3000); // 每3秒切换一次
}
// 初始化显示第一张幻灯片
showSlides(slideIndex);
// 绑定箭头按钮事件
document.querySelector(".prev").addEventListener("click", () => plusSlides(-1));
document.querySelector(".next").addEventListener("click", () => plusSlides(1));
// 绑定指示点点击事件
for (let i = 0; i < dots.length; i++) {
    dots[i].addEventListener("click", () => currentSlide(i + 1));
}
// 启动自动播放
// autoPlay(); // 如果需要自动播放，请取消这行注释

如何运行这些案例？

  1. 为每个案例创建一个文件夹。
  2. 在文件夹中创建相应的 .html, .css, 和 .js 文件。
  3. 将上面的代码分别复制到对应的文件中。
  4. 用浏览器打开 .html 文件即可看到效果。

这些案例涵盖了DOM操作、事件处理、状态管理和简单的算法逻辑，是学习和实践JavaScript的绝佳起点。