我试图让单元格随着样式改变颜色。我不知道什么是最好的。要么将其放在 CSS 样式表中，要么直接放在 html 中。我对此有点困惑，如果有人能提供帮助那就太好了。感谢所有做出贡献的人。
HTML 代码:
<html>
<head>
<title>HTML and JavaScript</title>
<link href="Capstone 10_2.css" rel="stylesheet" type="text/css"></link>
<script>
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function stylize()
{
var index = getRandomInt(1, 20);
var s = "myStyle" + index;
var e = document.getElementById("MessageText");
e.className = s;
setTimeout("stylize()", 1500);
return;
}
</script>
</head>
<body onLoad="stylize()">
<table align="center" border="1" bordercolor="black">
<tr>
<td align="center">
<font size="3"><b>STYLE CLASS VIEWER</b></font>
</td>
</tr>
<tr>
<td align="center" height="100" width="400">
<div id="MessageText" class="myStyle1">
Hello World Wide Web!
<div>
</td>
</tr>
</table>
</body>
</html>
CSS 代码:
.myStyle1 {font-family:Impact; color:black; font-size:10; backgroundcolor: black}
.myStyle2 {font-family:Georgia; color:black; font-size:18; backgroundcolor: black}
.myStyl31 {font-family:Tahoma; color:red; font-size:24; backgroundcolor: black}
.myStyle4 {font-family:Verdana; color:black; font-size:48; backgroundcolor: black}
.myStyle5 {font-family:Impact; color:red; font-size:30; backgroundcolor: black}
.myStyle6 {font-family:Marlett; color:green; font-size:35; backgroundcolor: black}
.myStyle7 {font-family:Arial; color:blue; font-size:40; backgroundcolor: black}
.myStyle8 {font-family:Courier Sans MS Bold; color:blue; font-size:30; backgroundcolor: black}
.myStyle9 {font-family:Impact; color:blue; font-size:35; backgroundcolor: black}
.myStyle10 {font-family:Arial Italic; color:blue; font-size:10; backgroundcolor: black}
.myStyle11 {font-family:Times New Roman; color:blue; font-size:50; backgroundcolor: black}
.myStyle12 {font-family:Tahoma; color:blue; font-size:38; backgroundcolor: black}
.myStyle13 {font-family:Verdana; color:green; font-size:30; backgroundcolor: black}
.myStyle14 {font-family:Marlett; color:blue; font-size:20; backgroundcolor: black}
.myStyle15 {font-family:Impact; color:blue; font-size:24; backgroundcolor: black}
.myStyle16 {font-family:Georgia; color:blue; font-size:24; backgroundcolor: black}
.myStyle17 {font-family:Impact; color:blue; font-size:35; backgroundcolor: black}
.myStyle18 {font-family:Georgia; color:red; font-size:12; backgroundcolor: black}
.myStyle19 {font-family:Arial; color:green; font-size:20; backgroundcolor: black}
.myStyle20 {font-family:Tahoma; color:blue; font-size:55; backgroundcolor: black}
不知道是否用这个:
var cells = document.getElementsByTagName('MessageText'),
colors = ['000000','FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF','C0C0C0'];
for(var i = 0; i < cells.length; i++) {
cells[i].style.backgroundColor = '#' + colors[Math.floor(Math.random() * colors.length)];
}
或者也许我对这段代码还很陌生。
最佳答案
这是一个使用 HTML 和 CSS 的小演示，允许单元格背景颜色和文本样式在页面加载时随机更改。
CSS 将保持不变。我对 HTML 所做的唯一真正的添加是在 TD 元素上添加 id 并正确关闭 div 标签。
HTML 代码:
<body>
<table align="center" border="1" bordercolor="black">
<tr>
<td align="center">
<font size="3"><b>STYLE CLASS VIEWER</b></font>
</td>
</tr>
<tr>
<td id="MessageCell" align="center" height="100" width="400">
<div id="MessageText" class="myStyle1">
Hello World Wide Web!
</div>
</td>
</tr>
</table>
</body>
JavaScript:
var messageCell = document.getElementById('MessageCell');
var messageText = document.getElementById('MessageText');
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function setRandomColor() {
messageCell.setAttribute("style","background-color: " + getRandomColor() + ";");
}
function setRandomClass() {
var randomStyleNumber = getRandomInt(1, 20);
messageText.setAttribute("class", 'myStyle' + randomStyleNumber);
}
function stylize() {
setRandomClass();
setRandomColor();
}
stylize();
这是一个 JSFiddle 示例:
https://jsfiddle.net/4t6etg7c/1/
希望这对您有所帮助，祝您学习愉快!
关于javascript - 随机改变CSS样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47742461/