个人中心
gpt4 book ai didi

javascript函数随机css样式

转载 作者：太空宇宙 更新时间：2023-11-04 15:53:37 25 4
gpt4 key购买 nike

正在为类做一些 javascript 练习，但遇到了两个问题。我似乎无法让第二个函数 randomViewer() 正常工作，因此它从 Message Cell2 的 CSS 页面中提取随机样式选择。

此外，我不断收到关于我调用单选按钮值的方式的错误消息，我也不知道我在那里做错了什么。

我知道可能有一个更优雅的解决方案来解决所有这些问题，但我需要的是有人能指出我正在犯的错误，以便我可以改正它们。 

<head>
    <title>Assignment 9 Solution</title>
    <link href="a9.css" rel="stylesheet" type="text/css"></link>
    <script>
        var cyclingIndex = 0;

        function cyclingViewer() {
            if (cyclingIndex > 20) cyclingIndex = 0;
            else cyclingIndex++;
            var mc = document.getElementById("MessageCell1");
            mc.className = "myStyle" + cyclingIndex;
            setTimeout("cyclingViewer()", 1000);
            return;
        }
        var randomIndex = 0;

        function randomViewer() {
            randomIndex = Math.floor(Math.random() * 20);
            randomIndex++;
            var mc = document.getElementById("MessageCell2");
            mc.className = "myStyle" + randomIndex;
            setTimeout("randomViewer()", 1000);
            return;
        }

        function selectViewer() {
            var mc = document.getElementByID("MessageCell3");
            mc.style.color = getRadioValue(document.styleForm.color);
            mc.style.fontFamily = getRadioValue(document.styleForm.family);
            mc.style.fontSize = getRadioValue(document.styleForm.sizes);
            mc.style.backgroundColor = getRadioValue(document.styleForm.background);
            return;
        }

        function getRadioValue(radioName) {
            for (i = 0; i < radioName.length; i++) {
                if (radioName[i].checked == true) return radioName[i].value;
            }
        }
    </script>
</head>

<body onload="cyclingViewer();" onload="randomViewer();">
    <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="MessageCell1" align="center" height="50" width="400" class="myStyle1">
                <div id="MessageText">Hello World Wide Web!</div>
            </td>
        </tr>
    </table>
    <hr/>
    <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="MessageCell2" align="center" height="50" width="400" class="myStyle1">
                <div id="MessageText">Hello World Wide Web!</div>
            </td>
        </tr>
    </table>
    <hr/>
    <form name="styleForm">
        <table align="center" border="0">
            <tr>
                <td>
                    <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="MessageCell3" align="center" height "50" width="400" class="myStyle1">
                                <div id="MessageText">Hello World Wide Web!</div>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <p>
                        <h4>SELECT FONT COLOR:</h4>
                        <font face="Courier New">
                            <input name="color" value="red" type="radio">red
                            <input name="color" value="black" type="radio">black
                            <input name="color" value="blue" type="radio">blue
                            <input name="color" value="green" type="radio">green
                            <input name="color" value="white" type="radio">white</font>
                    </p>
                </td>
            </tr>
            <tr>
                <td>
                    <p>
                        <h4>Select Font Family:</h4>
                        <font face="Courier New">
                            <input name="family" value="Arial" type="radio">Arial
                            <input name="family" value="Veranda" type="radio">Veranda
                            <input name="family" value="Courier" type="radio">Courier
                            <input name="family" value="Times" type="radio">Times
                            <input name="family" value="Helvetica" type="radio">Helvetica</font>
                    </p>
                </td>
            </tr>
            <tr>
                <td>
                    <p>
                        <h4>Select Font Size:</h4>
                        <font face="Courier New">
                            <input name="sizes" value="12" type="radio">12
                            <input name="sizes" value="18" type="radio">18
                            <input name="sizes" value="24" type="radio">24
                            <input name="sizes" value="30" type="radio">30</font>
                    </p>
                </td>
            </tr>
            <tr>
                <td>
                    <p>
                        <h4>Select Background Color:</h4>
                        <font face="Courier New">
                            <input name="background" value="red" type="radio">red
                            <input name="background" value="blue" type="radio">blue
                            <input name="background" value="green" type="radio">green
                            <input name="background" value="black" type="radio">black
                            <input name="background" value="white" type="radio">white</font>
                    </p>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" value="Change Style" onClick="selectViewer()">
                </td>
            </tr>
        </table>
    </form>
</body>

和CSS样式表a9.css

myStyle1  {color:black; font-family:Arial; font-size:12; background-color:green}
myStyle2  {color:black; font-family:Arial; font-size:18; background-color:red}
myStyle3  {color:black; font-family:Arial; font-size:24; background-color:blue}
myStyle4  {color:black; font-family:Arial; font-size:30; background-color:white}
myStyle5  {color:red; font-family:Verdana; font-size:12; background-color:yellow}
myStyle6  {color:red; font-family:Verdana; font-size:18; background-color:green}
myStyle7  {color:red; font-family:Verdana; font-size:24; background-color:white}
myStyle8  {color:red; font-family:Verdana; font-size:30; background-color:blue}
myStyle9  {color:green; font-family:Courier; font-size:12; background-color:white}
myStyle10 {color:green; font-family:Courier; font-size:18; background-color: red}
myStyle11 {color:green; font-family:Courier; font-size:24; background-color:yellow}
myStyle12 {color:green; font-family:Courier; font-size:30; background-color: purple}
myStyle13 {color:blue; font-family:Times; font-size:12; background-color:yellow}
myStyle14 {color:blue; font-family:Times; font-size:18; background-color:white}
myStyle15 {color:blue; font-family:Times; font-size:24; background-color:red}
myStyle16 {color:blue; font-family:Times; font-size:30; background-color:green}
myStyle17 {color:white; font-family:Helvetica; font-size:12; background-color:black}
myStyle18 {color:white; font-family:Helvetica; font-size:18; background-color:green}
myStyle19 {color:white; font-family:Helvetica; font-size:24; background-color:red}
myStyle20 {color:white; font-family:Helvetica; font-size:30; background-color:blue}

最佳答案

你不能在一个元素中有多个 onLoad 属性，所以你应该先把事情分解一下。

    var cyclingIndex=0;
    var randomIndex=0;

    function initializeViewers(){
        setInterval(cyclingViewer,1000);
        setInterval(randomViewer,1000);
    }

    function cyclingViewer(){ ... (minus the setTimeout) }
    function randomViewer(){ ... (minus the setTimeout) }
    function selectViewer(){ ... }
    function getRadioValue(){ ... }

不过，有一种更好的方法来构建它。你看，这种方式依赖于全局变量，which are bad .

更安全一点的方式(最少的重新编码)是这样的:

function initialize() {
    var cyclingIndex, randomIndex, 
        cyclingViewer, randomViewer,
        selectViewer, getRadioValue;

    cyclingIndex=0;
    randomIndex=0;

    cyclingViewer = function() {
        ...
    };

    randomViewer = function() {
        ...
    };

    selectViewer = function() {
        ...
    };

    getRadioValue = function() {
        ...
    };

    getRadioValue = function() {
        ...
    };

    setInterval(cyclingViewer, 1000);
    setInterval(randomViewer, 1000);
}

通过将函数封装为初始化函数中的变量，可以让其他人的代码无法调用您的代码(在这个级别不重要，但可以避免以后搞砸，以防您想要声明一个同名的新函数。Functions declared inside initializeViewers() have access to the variables inside of it .

无论如何，应该就可以了。

关于javascript函数随机css样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10874658/

25 4 0
文章推荐： c++ - 将 QString 转换为 char* 以用于第 3 方库的内存清理问题，如何解决？
文章推荐： html - 使用类名在 css/less 中动态添加样式
文章推荐： c++ - 为 C++ 搜索好的调试器
文章推荐： html - 具有负 z-index 的元素上的单击事件
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com