我在 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}
这似乎对我不起作用任何人都可以帮助。
最佳答案
删除 var index = getRandomInt(1, 20);
然后，将 index++; 替换为 var index = getRandomInt(1, 20);。
如果您想接受超过 7 种样式，请删除 if (index > 7) index = 1;。
在这种情况下，它每次都会选择一个随机数。在您的情况下，选择了一个随机数(主要是 if (index > 7) index = 1; 中的 1 个)并且您每次都递增它。
<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>关于html - JavaScript : Random Style Class Using Math. 随机()，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47741608/