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

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

html css random

Html JavaScript：使用Math.Random（）的随机样式类,html,css,random,Html,Css,Random,我在一个基本的HTML/Javascript类中，我不知道如何“修改下面的Javascript，使其在每次调用时随机选择一个样式类。”下面的代码可以工作，但不是随机的。任何建议都会有帮助。提前谢谢你 <html> <head> <title>HTML and JavaScript</title> <link href="capstone.css" rel="stylesheet" type="text/css"></link&g

我在一个基本的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>

这似乎对我不起作用，任何人都可以帮忙。

删除

var index=getRandomInt（1,20）
然后，替换index++与var指数=getRandomInt（1,20）
如果要接受7种以上的样式，请删除if（index>7）index=1
在这种情况下，它每次选择一个随机数。在您的例子中，选择了一个随机数（如果（index>7）index=1；
，则主要是中的1），并且您每次都将其递增


HTML和JavaScript
.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；
颜色：红色；字体大小：30}。myStyle6{font-family:Marlett；颜色：绿色；字体大小：65}。myStyle7{font-family:Arial；颜色：蓝色；
字体大小：46}。myStyle8{字体系列：Courier Sans MS Bold；颜色：蓝色；字体大小：60}。myStyle9{字体系列：Impact；颜色：蓝色；
字体大小：35}。myStyle10{字体系列：Arial Italic；颜色：蓝色；字体大小：10}。myStyle11{字体系列：Times New Roman；颜色：蓝色；
字体大小：50}.myStyle12{字体系列：Tahoma；颜色：蓝色；字体大小：38}.myStyle13{字体系列：Verdana；颜色：白色；字体大小：30}
.myStyle14{font-family:Marlett；颜色：蓝色；字体大小：70}.myStyle15{font-family:Impact；颜色：蓝色；字体大小：24}.myStyle16
{font-family:Georgia；颜色：蓝色；字体大小：24}.myStyle17{font-family:Impact；颜色：蓝色；字体大小：35}.myStyle18{font-family:Georgia；
颜色：黑色；字体大小：12；}.myStyle19{font-family:Arial；颜色：蓝色；字体大小：20；}.myStyle20{font-family:Tahoma；颜色：蓝色；
字体大小：55}
函数getRandomInt（最小值、最大值）{
返回Math.floor（Math.random（）*（max-min+1））+min；
}
函数样式化（）{
var指数=getRandomInt（1,20）；
var s=“myStyle”+索引；
var e=document.getElementById（“MessageText”）；
e、 className=s；
setTimeout（“样式化（）”，1500）；
回来
}
样式类查看器
万维网你好！
备注
您可以缩短代码，如下所示

var text=document.getElementById（“text”）；
函数getRandomInt（最小值、最大值）{
返回Math.floor（Math.random（）*（max-min+1））+min；
}
函数样式化（）{
var interval=setInterval（函数（）{
var rand=getRandomInt（1,20）；
setAttribute（“类”、“myStyle”+rand）；
}, 1500);
}
风格化（）
.myStyle1{
字体系列：影响；
颜色：黑色；
字号：100
}
.myStyle2{
字体系列：格鲁吉亚；
颜色：黑色；
字号：18
}
.神秘3{
字体系列：Tahoma；
颜色：黑色；
字号：24
}
.myStyle4{
字体系列：Verdana；
颜色：黑色；
字号：48
}
.我的风格5{
字体系列：影响；
颜色：红色；
字号：30
}
.myStyle6{
字体系列：Marlett；
颜色：绿色；
字号：65
}
.myStyle7{
字体系列：Arial；
颜色：蓝色；
字号：46
}
.我的风格8{
字体系列：Courier Sans MS Bold；
颜色：蓝色；
字号：60
}
.myStyle9{
字体系列：影响；
颜色：蓝色；
字号：35
}
.我的风格10{
字体系列：Arial斜体；
颜色：蓝色；
字号：10
}
.我的风格11{
字体系列：时代新罗马；
颜色：蓝色；
字号：50
}
.我的风格12{
字体系列：Tahoma；
颜色：蓝色；
字号：38
}
.我的风格13{
字体系列：Verdana；
颜色：白色；
字号：30
}
.我的风格14{
字体系列：Marlett；
颜色：蓝色；
字号：70
}
.我的风格15{
字体系列：影响；
颜色：蓝色；
字号：24
}
.我的风格16{
字体系列：格鲁吉亚；
颜色：蓝色；
字号：24
}
.我的风格17{
字体系列：影响；
颜色：蓝色；
字号：35
}
.我的风格18{
字体系列：格鲁吉亚；
颜色：黑色；
字号:12 ;；
}
.我的风格19{
字体系列：Arial；
颜色：蓝色；
字号:20 ;；
}
.我的风格20{
字体系列：Tahoma；
颜色：蓝色；
字号：55
}

样式类查看器
万维网你好！
我试过了，但由于某些原因仍然不起作用。我会使用这个，但我必须使用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}