让文本框颜色改变 vs
时间: 2023-09-23 21:09:50 浏览: 104
好的,我可以编写一个简单的JavaScript代码来实现文本框颜色随机变化的效果。以下是示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>文本框颜色随机变化</title>
<script type="text/javascript">
function changeColor() {
var colors = ["red", "blue", "green", "orange", "purple"]; // 颜色数组
var randomColor = colors[Math.floor(Math.random() * colors.length)]; // 随机颜色
document.getElementById("text-box").style.backgroundColor = randomColor; // 设置文本框颜色
}
</script>
</head>
<body>
<input type="text" id="text-box" onfocus="changeColor();" placeholder="输入文本...">
</body>
</html>
```
在这个例子中,我定义了一个 `changeColor()` 函数,该函数将在文本框获得焦点时触发,并从预定义的颜色数组中随机选择一个颜色。
当函数被调用时,它会找到 `id` 为 `text-box` 的文本框元素,并设置其背景颜色为随机颜色。
你可以将此代码复制到一个 HTML 文件中并在浏览器中打开以查看效果。
阅读全文