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