<!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是一个示例地址，你需要根据自己的后端实际情况进行修改。