0

这是代码。随机字体样式有效，但我无法让随机背景颜色正常工作。我看到不久前有一个帖子几乎完全一样，但我太新了，无法理解如何使用他们的答案来修复我的问题。以前的帖子

<html>

<head>
    <title>HTML and JavaScript</title>
        <link href="js-twentyfive.css" rel="stylesheet" type="text/css"></link>

<script>
var index = 0;
function stylize() 
{
    if (index > 20) index = 1;
    var s = "myStyle" + index;
    var e = document.getElementById("MessageText")
    e.className = s
    {
var bgindex = 0;
    bgindex++;
    if (bgindex >5) bgindex =1;
    var b ="myBackground" + bgindex;
    var c = document.getElementById("MessageCell")
    c.className = b
    }
}
function getRandomInt (min, max)
{
    return Math.floor(Math.random() *(max - min +1)) + min;
}
index = getRandomInt(1, 20);
bgindex = getRandomInt(1, 5);
</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 id="MessageCell" align="center" height="100" width="400">
                <div id="MessageText">
                    Hello World Wide Web!
                </div>
            </td>
        </tr>
    </table>
</body>

<html>

这是我的CSS：

.myBackground1{color:blue}
.myBackground2{color:red}
.myBackground3{color:purple}
.myBackground4{color:yellow}
.myBackground5{color:orange}

.myStyle1 {color:black; font-size:12}
.myStyle2 {color:red; font-family:Lucida Grande;font-size:14}
.myStyle3 {color:blue; font-family:serif;font-size:16}
.myStyle4 {color:green; font-family:times; font-size:18}
.myStyle5 {color:yellow; font-family:monospace; font-size:22}
.myStyle6 {color:orange; font-family:"Brush Script MT", cursive;font-size:12}
.myStyle7 {color:cyan; font-size:14}
.myStyle8 {color:purple; font-size:16}
.myStyle9 {color:pink; font-size:18}
.myStyle10 {color:lightred; font-size:22}
.myStyle11 {color:lightblue; font-size:12}
.myStyle12 {color:White Orchid; font-size:16}
.myStyle13 {color:deepskyblue4; font-family:Copperplate; font-size:14}
.myStyle14 {color:firebrick; font-size:18}
.myStyle15 {color:green4; font-size:12}
.myStyle16 {color:lightcoral; font-size:14}
.myStyle17 {color:black; font-size:16}
.myStyle18 {color:black; font-family: Papyrus, fantasy; font-size:18}
.myStyle19 {color:magenta; font-size:14}
.myStyle20 {color:black; font-size:16};
4

1 回答 1

0

如果我理解正确，您无法正确更改背景？您需要修复以下 CSS 样式：

.myBackground1{color:blue}
.myBackground2{color:red}

ETC...

和

.myBackground1{background-color:blue}
.myBackground2{background-color:red}

ETC...

并更改代码：

function stylize() 
{
    if (index > 20) index = 1;
    var s = "myStyle" + index;
    var e = document.getElementById("MessageText")
    e.className = s
    {
var bgindex = 0;
    bgindex++;
    if (bgindex >5) bgindex =1;
    var b ="myBackground" + bgindex;
    var c = document.getElementById("MessageCell")
    c.className = b
    }
}

和

function stylize() 
{
    index = getRandomInt(1, 20);
    var s = "myStyle" + index;
    var e = document.getElementById("MessageText")
    e.className = s


    bgindex = getRandomInt(1, 5);
    var b ="myBackground" + bgindex;
    var c = document.getElementById("MessageCell")
    c.className = b
    alert(b);
}

您的函数没有考虑来自 bgIndex 的 1-5 的随机值。它总是设置为 1，所以在修复 CSS 之后，你总是会有蓝色背景

于 2013-08-30T15:44:34.703 回答