js+css实现颜色选择器

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>

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

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

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

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

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

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

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

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

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

你可能感兴趣的:(html,js,javascript,css,开发语言)