Javascript定时更新DOM例子,简单得一看就会

本文用一个简单的例子示范一下怎样用Javascript来定时更新网页里的DOM。DOM全程是Document Object Model,也就是HTML网页上的元素。使用Javascript能让原本静态的HTML动起来。

效果如下:

Counter Demo

以下例子代码全部在一个HTML文件里,可以命名为updatedom_demo.html,内容如下:

<!DOCTYPE html>
<html>
<body>
    <div class="container">
        <div class="inner">
            <h1 style="color:blue;">Counter Demo</h1>
            <h3 style="color:orange;" id="data2"></h3>
            <h3 style="color:green;" id="data"></h3>
        </div>
    </div>

    <script>
        const data = document.getElementById("data");
        const data2 = document.getElementById("data2");

        var i = 0;
        function update() {
            data.textContent = i;
            data2.textContent = ".".repeat((i % 3) + 1);
            i++;
        }

        update();
        window.setInterval(update, 1000)
    </script>
</body>
</html>

保存后用浏览器打开就能看到动画网页。

本文链接

Leave a Comment

Your email address will not be published.