编写一个通过用户输入内容改变网页背景颜色的JavaScript程序。
时间: 2024-09-21 19:10:19 浏览: 36
你可以使用JavaScript结合HTML和CSS编写一个简单的动态背景颜色更改程序。下面是一个基本示例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style id="background-color-style">
body {
transition: background-color 0.5s ease;
}
</style>
</head>
<body>
<input type="text" id="color-input" placeholder="请输入颜色值 (如 #FF0000)">
<button onclick="changeBackgroundColor()">更改背景颜色</button>
<script>
function changeBackgroundColor() {
const colorInput = document.getElementById('color-input');
const selectedColor = colorInput.value;
// 验证输入是否为有效的颜色代码
if (/^#[A-Fa-f0-9]{6}$/i.test(selectedColor)) {
document.getElementById('background-color-style')?.getElementsByTagName('body')[0].style.backgroundColor = selectedColor;
} else {
alert("无效的颜色值,请输入正确的六位十六进制颜色代码");
}
}
</script>
</body>
</html>
```
这个程序中,用户可以在`<input>`字段中输入颜色代码,然后点击按钮触发`changeBackgroundColor`函数。该函数会获取输入的颜色值,并将其设置为body元素的背景色。如果输入不是有效的颜色代码,程序会显示警告提示。