JavaScript：使用Math.Random（）的随机样式类

时间：2017-12-10 17:41:29

标签： html css random

我在Basic HTML / Javascript类中，我无法弄清楚如何“修改以下JavaScript，以便每次调用它时随机选择一个样式类。”以下代码有效，但不是随机的。任何的意见都将会有帮助。提前谢谢！

<html>

<head>
<title>HTML and JavaScript</title>
<link href="capstone.css" rel="stylesheet" type="text/css"></link>
<script>
function getRandomInt (min, max) 
{
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
var index = getRandomInt(1, 20);

function stylize()
{
  index++;
  if (index > 7) index =1;
  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:100}
.myStyle2 {font-family:Georgia; color:black; font-size:18}
.myStyl31 {font-family:Tahoma; color:black; font-size:24}
.myStyle4 {font-family:Verdana; color:black; font-size:48}
.myStyle5 {font-family:Impact; color:red; font-size:30}
.myStyle6 {font-family:Marlett; color:green; font-size:65}
.myStyle7 {font-family:Arial; color:blue; font-size:46}
.myStyle8 {font-family:Courier Sans MS Bold; color:blue; font-size:60}
.myStyle9 {font-family:Impact; color:blue; font-size:35}
.myStyle10 {font-family:Arial Italic; color:blue; font-size:10}
.myStyle11 {font-family:Times New Roman; color:blue; font-size:50}
.myStyle12 {font-family:Tahoma; color:blue; font-size:38}
.myStyle13 {font-family:Verdana; color:white; font-size:30}
.myStyle14 {font-family:Marlett; color:blue; font-size:70}
.myStyle15 {font-family:Impact; color:blue; font-size:24}
.myStyle16 {font-family:Georgia; color:blue; font-size:24}
.myStyle17 {font-family:Impact; color:blue; font-size:35}
.myStyle18 {font-family:Georgia; color:black; font-size:12;}
.myStyle19 {font-family:Arial; color:blue; font-size:20;}
.myStyle20 {font-family:Tahoma; color:blue; font-size:55}

这对我来说似乎无济于事。

2 个答案:

答案 0 :(得分：1)

删除var index = getRandomInt(1, 20);

然后，将index++;替换为var index = getRandomInt(1, 20);。

如果您想接受超过7种样式，请删除if (index > 7) index = 1;。

在这种情况下，它每次都会选择一个随机数。在您的情况下，选择了一个随机数（大多数是if (index > 7) index = 1;中的一个），并且每次都会增加它。

＆＃13;
＆＃13; 
<html>

<head>
<title>HTML and JavaScript</title>
<link href="capstone.css" rel="stylesheet" type="text/css"></link>
<style>
 .myStyle1 {font-family:Impact; color:black; font-size:100} .myStyle2 {font-family:Georgia; color:black; font-size:18} .myStyl31
{font-family:Tahoma; color:black; font-size:24} .myStyle4 {font-family:Verdana; color:black; font-size:48} .myStyle5 {font-family:Impact;
color:red; font-size:30} .myStyle6 {font-family:Marlett; color:green; font-size:65} .myStyle7 {font-family:Arial; color:blue;
font-size:46} .myStyle8 {font-family:Courier Sans MS Bold; color:blue; font-size:60} .myStyle9 {font-family:Impact; color:blue;
font-size:35} .myStyle10 {font-family:Arial Italic; color:blue; font-size:10} .myStyle11 {font-family:Times New Roman; color:blue;
font-size:50} .myStyle12 {font-family:Tahoma; color:blue; font-size:38} .myStyle13 {font-family:Verdana; color:white; font-size:30}
.myStyle14 {font-family:Marlett; color:blue; font-size:70} .myStyle15 {font-family:Impact; color:blue; font-size:24} .myStyle16
{font-family:Georgia; color:blue; font-size:24} .myStyle17 {font-family:Impact; color:blue; font-size:35} .myStyle18 {font-family:Georgia;
color:black; font-size:12;} .myStyle19 {font-family:Arial; color:blue; font-size:20;} .myStyle20 {font-family:Tahoma; color:blue;
font-size:55}
</style>
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

<强>备注

您可以缩短代码，如下所示

var text = document.getElementById("text");

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function stylize() {
  var interval = setInterval(function() {
    var rand = getRandomInt(1, 20);
    text.setAttribute("class", "myStyle" + rand);
  }, 1500);
}

stylize();
.myStyle1 {
  font-family: Impact;
  color: black;
  font-size: 100
}

.myStyle2 {
  font-family: Georgia;
  color: black;
  font-size: 18
}

.myStye3 {
  font-family: Tahoma;
  color: black;
  font-size: 24
}

.myStyle4 {
  font-family: Verdana;
  color: black;
  font-size: 48
}

.myStyle5 {
  font-family: Impact;
  color: red;
  font-size: 30
}

.myStyle6 {
  font-family: Marlett;
  color: green;
  font-size: 65
}

.myStyle7 {
  font-family: Arial;
  color: blue;
  font-size: 46
}

.myStyle8 {
  font-family: Courier Sans MS Bold;
  color: blue;
  font-size: 60
}

.myStyle9 {
  font-family: Impact;
  color: blue;
  font-size: 35
}

.myStyle10 {
  font-family: Arial Italic;
  color: blue;
  font-size: 10
}

.myStyle11 {
  font-family: Times New Roman;
  color: blue;
  font-size: 50
}

.myStyle12 {
  font-family: Tahoma;
  color: blue;
  font-size: 38
}

.myStyle13 {
  font-family: Verdana;
  color: white;
  font-size: 30
}

.myStyle14 {
  font-family: Marlett;
  color: blue;
  font-size: 70
}

.myStyle15 {
  font-family: Impact;
  color: blue;
  font-size: 24
}

.myStyle16 {
  font-family: Georgia;
  color: blue;
  font-size: 24
}

.myStyle17 {
  font-family: Impact;
  color: blue;
  font-size: 35
}

.myStyle18 {
  font-family: Georgia;
  color: black;
  font-size: 12;
}

.myStyle19 {
  font-family: Arial;
  color: blue;
  font-size: 20;
}

.myStyle20 {
  font-family: Tahoma;
  color: blue;
  font-size: 55
}
<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" class="myStyle1">
        Hello World Wide Web!
      </div>
    </td>
  </tr>
</table>

相关问题
最新问题