js+css实现颜色选择器

2023-12-30 05:08:19
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>颜色选择器</title>
    <style>
        .color-box {
            width: 50px;
            height: 50px;
            border: 1px solid #000;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="color-box"></div>
    <input type="text" id="color-value" placeholder="选中的颜色值" readonly>
    <button onclick="submitColor()">提交</button>
    <script>
        var colorBox = document.querySelector('.color-box');
        var colorValue = document.querySelector('#color-value');

        colorBox.addEventListener('click', function() {
            var color = prompt('请选择颜色：');
            if (color) {
                colorBox.style.backgroundColor = color;
                colorValue.value = color;
            }
        });

        function submitColor() {
            var color = colorValue.value;

            fetch('/submit-color', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ color: color })
            })
            .then(response => {
                if (response.ok) {
                    console.log('颜色已提交');
                } else {
                    console.error('颜色提交失败');
                }
            })
            .catch(error => {
                console.error('请求出错:', error);
            });
        }
    </script>
</body>
</html>

在这个示例中，我们创建了一个简单的颜色选择器页面。

首先，在<head>标签中，我们设置了网页的字符编码为UTF-8，以确保中文字符正常显示。

接下来，在<body>标签中，我们创建了一个颜色框(color-box)和一个文本输入框(color-value)，用于显示选中的颜色值。

通过CSS样式，我们设置了颜色框的样式，包括宽度、高度和边框等。

通过JavaScript，我们使用querySelector方法获取了颜色框和颜色值输入框的引用，并为颜色框添加了点击事件监听器。当点击颜色框时，会弹出一个提示框，让用户输入颜色值。如果用户输入了颜色值，就将颜色框的背景颜色设置为用户输入的颜色，并将颜色值显示在文本输入框中。

另外，我们还添加了一个提交按钮，并为其绑定了onclick事件处理函数submitColor。

当用户点击提交按钮时，submitColor函数会获取颜色值输入框中的值，并使用Fetch API将选中的颜色值发送到后端接口/submit-color。在发送请求时，我们将颜色值包装在一个JSON对象中，并设置请求头的Content-Type为application/json。

在后端接收到颜色值后，你可以根据自己的需要进行相应的处理。

请注意，这个示例中的后端接口地址/submit-color是一个示例地址，你需要根据自己的后端实际情况进行修改。

文章来源:https://blog.csdn.net/weixin_39934453/article/details/135289829
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。