js 生成divk加里面的文字,文字的颜色是与随机生成的背景色是相反的
时间: 2024-09-26 14:04:37 浏览: 24
在JavaScript中,你可以通过创建一个动态的`<div>`元素并设置其样式来实现这个效果。首先,你需要生成随机的背景颜色,然后找出与其互补的颜色作为文字颜色。以下是一个简单的示例:
```javascript
// 随机生成背景颜色 (这里使用RGB格式)
function getRandomColor() {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return 'rgb(' + r + ', ' + g + ', ' + b + ')';
}
// 创建一个div并设置背景色和文字颜色
function generateDivWithOppositeTextColor() {
// 生成背景色
var bgColor = getRandomColor();
// 计算文字颜色(这里是互补色,这里假设所有颜色基于RGB,红色的互补色是青绿色,蓝色的互补色是橙黄色)
var textColor;
if (bgColor.includes('red')) {
textColor = 'rgb(0, 255, 0)'; // 绿色
} else if (bgColor.includes('blue')) {
textColor = 'rgb(255, 165, 0)'; // 橙黄色
} else { // 其他颜色作为基础计算(例如RGB(0, 0, 255) => 黄色)
textColor = 'rgb(255 - r, 255 - g, 255 - b)';
}
// 创建div并添加到页面上
var div = document.createElement('div');
div.style.backgroundColor = bgColor;
div.style.color = textColor;
div.textContent = '这是动态生成的文字';
document.body.appendChild(div);
}
// 调用函数生成div
generateDivWithOppositeTextColor();
```
阅读全文