web操作题练习(六)

题目：

一、基本操作题（18 分）

HTML 表格合并与样式（6 分）
- 创建一个 3 行 3 列的表格，第一行的三个单元格合并为一个单元格，内容为 "表头"；第二行第一列与第三行第一列合并为一个单元格，内容为 "侧边栏"。
- 使用 CSS 为表格添加 1px 的红色实线边框，表格整体居中显示，单元格内边距为 15px。
CSS 定位与 z-index（6 分）
- 创建两个 <div> 元素，divA 宽度 200px、高度 200px、背景色为粉色（pink）；divB 宽度 150px、高度 150px、背景色为紫色（purple）。
- 使用绝对定位使 divB 覆盖在 divA 的右上角（部分重叠），并通过 z-index 确保 divB 显示在 divA 上方。
HTML 表单验证属性与 CSS 反馈（6 分）
- 创建一个表单，包含一个文本输入框（用于输入手机号，required 属性）和一个提交按钮。
- 为输入框添加 pattern 属性验证手机号格式（以 1 开头的 11 位数字），使用 CSS 为输入框添加焦点样式（边框为绿色实线），并为验证不通过时添加红色边框提示。

二、简单应用题（24 分）

JavaScript 动态修改样式与类名（12 分）
- 页面中有一个 <p> 元素，id 为 "text"，初始文本为 "默认样式"；两个按钮，分别为 "放大字体" 和 "切换颜色"。
- 点击 "放大字体" 按钮时，将 <p> 元素的字体大小在当前基础上增加 2px（初始为 16px）；点击 "切换颜色" 按钮时，为 <p> 元素切换类名（classA 对应蓝色文本，classB 对应红色文本）。
JavaScript 事件委托与数据存储（12 分）
- 创建一个无序列表 <ul>，id 为 "todoList"，初始包含两个列表项："学习 HTML""学习 CSS"。
- 实现点击列表项时，在控制台输出该列表项的文本内容（使用事件委托方式绑定事件）；添加一个 "添加任务" 按钮，点击时弹出输入框，将输入的内容作为新列表项添加到列表中，并使用 localStorage 保存列表数据（刷新页面后列表项不消失）。

三、综合应用题（18 分）

响应式网格布局与 AJAX 数据筛选（18 分）
- 使用 CSS Grid 布局创建响应式页面：桌面端（≥1024px）显示 4 列网格，平板端（768px-1023px）显示 2 列网格，手机端（<768px）显示 1 列网格，网格项间距为 20px。
- 通过 AJAX 从 https://jsonplaceholder.typicode.com/users 获取用户数据（包含 name、email、address.city），在网格项中展示每个用户的信息。
- 添加一个文本输入框作为筛选框，输入内容时实时筛选网格项，只显示 name 中包含输入内容的用户（不区分大小写）。

参考答案

一、基本操作题答案

HTML 表格合并与样式

html

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <style>
        table {
            border-collapse: collapse;
            margin: 0 auto;
        }
        td {
            border: 1px solid red;
            padding: 15px;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td colspan="3">表头</td>
        </tr>
        <tr>
            <td rowspan="2">侧边栏</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

CSS 定位与 z-index

html

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <style>
       .container {
            position: relative;
        }
        #divA {
            width: 200px;
            height: 200px;
            background-color: pink;
            position: absolute;
        }
        #divB {
            width: 150px;
            height: 150px;
            background-color: purple;
            position: absolute;
            top: 0;
            right: 0;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div class="container">
        <div id="divA"></div>
        <div id="divB"></div>
    </div>
</body>
</html>

HTML 表单验证属性与 CSS 反馈

html

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <style>
        input:focus {
            border: 2px solid green;
            outline: none;
        }
        input:invalid {
            border: 2px solid red;
        }
        input:valid {
            border: 2px solid #ccc;
        }
    </style>
</head>
<body>
    <form>
        <input type="text" required pattern="^1\d{10}$" placeholder="请输入手机号">
        <button type="submit">提交</button>
    </form>
</body>
</html>

二、简单应用题答案

JavaScript 动态修改样式与类名

html

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <style>
       .classA {
            color: blue;
        }
       .classB {
            color: red;
        }
    </style>
</head>
<body>
    <p id="text" style="font-size: 16px;">默认样式</p>
    <button id="enlargeBtn">放大字体</button>
    <button id="toggleBtn">切换颜色</button>

    <script>
        const text = document.getElementById('text');
        const enlargeBtn = document.getElementById('enlargeBtn');
        const toggleBtn = document.getElementById('toggleBtn');

        // 放大字体
        enlargeBtn.addEventListener('click', () => {
            const currentSize = parseInt(window.getComputedStyle(text).fontSize);
            text.style.fontSize = `${currentSize + 2}px`;
        });

        // 切换颜色类名
        toggleBtn.addEventListener('click', () => {
            text.classList.toggle('classA');
            text.classList.toggle('classB');
        });
    </script>
</body>
</html>

JavaScript 事件委托与数据存储

html

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <ul id="todoList"></ul>
    <button id="addBtn">添加任务</button>

    <script>
        const todoList = document.getElementById('todoList');
        const addBtn = document.getElementById('addBtn');

        // 从localStorage加载数据
        function loadTasks() {
            const tasks = JSON.parse(localStorage.getItem('tasks') || '["学习 HTML", "学习 CSS"]');
            tasks.forEach(task => addTaskToDOM(task));
        }

        // 添加任务到DOM
        function addTaskToDOM(task) {
            const li = document.createElement('li');
            li.textContent = task;
            todoList.appendChild(li);
        }

        // 保存任务到localStorage
        function saveTasks(tasks) {
            localStorage.setItem('tasks', JSON.stringify(tasks));
        }

        // 事件委托：点击列表项输出内容
        todoList.addEventListener('click', (e) => {
            if (e.target.tagName === 'LI') {
                console.log(e.target.textContent);
            }
        });

        // 添加新任务
        addBtn.addEventListener('click', () => {
            const task = prompt('请输入任务：');
            if (task) {
                addTaskToDOM(task);
                const tasks = JSON.parse(localStorage.getItem('tasks') || '[]');
                tasks.push(task);
                saveTasks(tasks);
            }
        });

        // 初始化加载
        loadTasks();
    </script>
</body>
</html>

三、综合应用题答案

html

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
       .grid-container {
            display: grid;
            gap: 20px;
            padding: 20px;
        }

        @media (min-width: 1024px) {
           .grid-container {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        @media (min-width: 768px) and (max-width: 1023px) {
           .grid-container {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 767px) {
           .grid-container {
                grid-template-columns: 1fr;
            }
        }

       .user-card {
            border: 1px solid #ddd;
            padding: 15px;
            border-radius: 5px;
        }

        #filterInput {
            margin: 20px;
            padding: 8px;
            width: 300px;
        }
    </style>
</head>
<body>
    <input type="text" id="filterInput" placeholder="输入姓名筛选...">
    <div class="grid-container" id="userGrid"></div>

    <script>
        let users = [];
        const userGrid = document.getElementById('userGrid');
        const filterInput = document.getElementById('filterInput');

        // 获取用户数据
        async function fetchUsers() {
            try {
                const res = await fetch('https://jsonplaceholder.typicode.com/users');
                users = await res.json();
                renderUsers(users);
            } catch (err) {
                console.error('获取数据失败：', err);
            }
        }

        // 渲染用户卡片
        function renderUsers(filteredUsers) {
            userGrid.innerHTML = '';
            filteredUsers.forEach(user => {
                const card = document.createElement('div');
                card.className = 'user-card';
                card.innerHTML = `
                    <h3>${user.name}</h3>
                    <p>邮箱：${user.email}</p>
                    <p>城市：${user.address.city}</p>
                `;
                userGrid.appendChild(card);
            });
        }

        // 筛选用户
        filterInput.addEventListener('input', (e) => {
            const keyword = e.target.value.toLowerCase();
            const filtered = users.filter(user => 
                user.name.toLowerCase().includes(keyword)
            );
            renderUsers(filtered);
        });

        // 初始化
        fetchUsers();
    </script>
</body>
</html>