Question

所以我希望有一个非常简单的系统，它经常更新最多10个项目的列表。代码没有完成，但我遇到了问题。

的index.html

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <link href="style.css" rel="stylesheet" type="text/css">
    </head>

    <script>

        function addText(txt) {
            li_array = document.getElementsByTagName('li');

            new_line = document.createElement("li");
            node = document.createTextNode(txt);
            new_line.appendChild(node);

            latest_message = li_array[li_array.length - 1];

            latest_message.parentNode.insertBefore(new_line, latest_message.nextSibling);

            // DELETE 11TH MESSAGE
            if (li_array.length == 10) {
                setTimeout(removeOldestText(), 1000);
            }
        }

        function removeOldestText() {
            document.getElementsByTagName('li')[0].parentNode.removeChild(li_array[0]);
        }

        function sendText(txt) {
            addText(txt);
            document.getElementsByTagName('li')[document.getElementsByTagName('li').length - 1].style.fontSize = "3vh";
        }

    </script>

    <body>
        <div id="feed_div">
            <ul id="feed_ul">
                <li></li>
            </ul>
        </div>
    </body>
</html>

的style.css

@charset "utf-8";
/* CSS Document */

li {
    font-size: 0vh;
    -webkit-transition: opacity 1s, font-size 1s; /* Safari */
    transition: opacity 1s, font-size 1s;
}

当我调用addText（）函数时，它会添加新的li。但是有两个问题。

删除最旧元素的超时不起作用。如果有第11个元素，它会立即将其删除而不是等待一秒钟。
新添加的文字应该带有漂亮的动画。但是在添加之后，新的字体大小没有更新，这应该在sendText函数的最后一行完成。但是，当我在控制台中复制并粘贴最后一行时，它可以完美地工作。为什么Javascript没有排除此行？

非常感谢你的帮助！

Javascript没有改变新添加元素的样式

0 个答案: