JavaScript练习题：制作一个简单的网页颜色选择器

最新推荐文章于 2024-08-21 14:09:37 发布

CostBuild

最新推荐文章于 2024-08-21 14:09:37 发布

阅读量259

点赞数 3

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/CostBuild/article/details/140994919

版权

第一部分：考点与作答区

考点：

事件处理：使用onchange事件处理函数响应用户操作。
变量和数据类型：使用变量存储和操作颜色数据。

作答区： 请创建一个简单的网页颜色选择器，包含以下功能：

一个颜色选择框。
一个显示当前颜色的文本框。
当用户选择颜色时，显示当前选择的颜色。

第二部分：解题思路与答案

解题思路：

使用HTML创建颜色选择框和显示颜色的文本框。
使用JavaScript为颜色选择框添加onchange事件处理函数。
在事件处理函数中获取用户选择的颜色，并显示在文本框中。

答案：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>颜色选择器</title>
    <script>
        function displayColor() {
            var color = document.getElementById('color').value;
            document.getElementById('selected-color').innerHTML = color;
        }
    </script>
</head>
<body>
    <input type="color" id="color" onchange="displayColor()">
    <p>当前颜色: <span id="selected-color">选择颜色</span></p>
</body>
</html>

第三部分：扩展考点与扩展作答区

扩展考点：

动态内容更新：使用JavaScript动态更新网页内容。
响应式设计：使用CSS媒体查询确保颜色选择器在不同设备上都有良好的显示效果。

扩展作答区：

使用JavaScript动态创建一个颜色列表，并允许用户从中选择颜色。
使用CSS媒体查询为颜色选择器添加样式，使其适应不同设备屏幕尺寸。

第四部分：扩展解答思路与答案

扩展解答思路：

在JavaScript中创建一个颜色数组，并动态创建颜色列表。
添加事件处理函数，以便用户点击颜色时更新显示的颜色。
使用CSS媒体查询根据设备宽度调整颜色选择器的布局。

扩展答案：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>颜色选择器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        .color-picker {
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 10px;
            background-color: #fff;
        }
        .color-picker ul {
            list-style-type: none;
            padding: 0;
        }
        .color-picker li {
            display: inline;
            margin-right: 10px;
        }
        .color-picker li a {
            color: #333;
            text-decoration: none;
        }
        .color-picker li a:hover {
            text-decoration: underline;
        }
        @media (max-width: 600px) {
            .color-picker ul {
                padding: 10px;
            }
        }
    </style>
    <script>
        var colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
        function displayColor() {
            var selectedColor = colors[document.getElementById('color').selectedIndex];
            document.getElementById('selected-color').innerHTML = selectedColor;
        }
    </script>
www.njjn8.com
www.syshrcw.com
www.lsldrcw.com
www.lssyrc.com
www.lfbzrcw.com
</head>
<body>
    <div class="color-picker">
        <select id="color" onchange="displayColor()">
            <option value="">选择颜色</option>
            <option value="#ff0000">红色</option>
            <option value="#00ff00">绿色</option>
            <option value="#0000ff">蓝色</option>
            <option value="#ffff00">黄色</option>
            <option value="#ff00ff">紫色</option>
            <option value="#00ffff">青色</option>
        </select>
        <p>当前颜色: <span id="selected-color">选择颜色</span></p>
    </div>
</body>
</html>

在这个扩展答案中，我们通过JavaScript动态创建了一个颜色列表，并允许用户从中选择颜色。同时，我们使用CSS媒体查询为颜色选择器添加了样式，并调整了布局以适应不同设备屏幕尺寸。这个练习题的扩展部分适合那些已经掌握了HTML和JavaScript基础，并希望学习如何创建更完善和用户友好的交互式网页的开发者。

CostBuild

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
JavaScript练习题：制作一个简单的网页颜色选择器

在这个扩展答案中，我们通过JavaScript动态创建了一个颜色列表，并允许用户从中选择颜色。同时，我们使用CSS媒体查询为颜色选择器添加了样式，并调整了布局以适应不同设备屏幕尺寸。这个练习题的扩展部分适合那些已经掌握了HTML和JavaScript基础，并希望学习如何创建更完善和用户友好的交互式网页的开发者。
复制链接

扫一扫