Question

我正在努力让细胞随着样式一起变色。我不知道什么是最好的。要么把它放在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)];
}

或许我对这段代码感兴趣。

Answer 1

这是一个使用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/

我希望这会有所帮助，有趣的学习！

Answer 2

使用JavaScript设置所有 CSS值。

el.style.fontSize = ...
el.style.color = ...
el.style.backgroundColor = ...
el.style.fontFamily = ...

没有需要可以再编写多个CSS类。

function getRandColor() {
  var hex = "01234567890ABCDEF",
    res = "#";
  for (var i = 0; i < 6; i += 1) {
    res += hex[Math.floor(Math.random() * hex.length)];
  }
  return res;
}

function getRandNumber(s, e) {
  return Math.floor(Math.random() * (e - s + 1)) + s;
}

function getRandFontFamily() {
  var fontFamilies = ["Impact", "Georgia", "Tahoma", "Verdana", "Impact", "Marlet"]; // Add more
  return fontFamilies[Math.floor(Math.random() * fontFamilies.length)];
}

function stylize() {
  var text = document.getElementById("text");
  var interval = setInterval(function() {
      text.style.fontFamily = getRandFontFamily();
      text.style.color = getRandColor();
      text.style.fontSize = getRandNumber(15, 35) + "px"; // Font sizes between 15px and 35px
      text.style.backgroundColor = getRandColor();
    },
    1500);
}

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="text">
        Hello World Wide Web!
      </div>
    </td>
  </tr>
</table>

<强>备注

在<body>

的末尾运行JavaScript

<body>
...
<script>
...
</script>
</body>

<head>中的

或喜欢

<head>
<script>
 ...
 document.addEventListener("DOMContentLoaded", function() {
     stylize()
 });
</script>
</head>

随机更改CSS样式

2 个答案: