本文用一个简单的例子示范一下怎样用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>
保存后用浏览器打开就能看到动画网页。