首页用js实现数字递增变化并在浏览器上显示出来

用js实现数字递增变化并在浏览器上显示出来

时间: 2024-02-13 09:02:45 浏览: 23

可以使用 JavaScript 和 HTML 的结合来实现数字递增变化并在浏览器上显示出来。以下是一个实现数字递增变化并在浏览器上显示出来的示例代码： HTML： ```html <!DOCTYPE html> <html> <head> <title>数字递增变化示例</title> </head> <body> <h1 id="counter">0</h1> <button onclick="startCounter()">开始</button> <button onclick="stopCounter()">停止</button> </body> </html> ``` JavaScript： ```javascript let num = 0; let targetNum = 100; let increment = 1; let intervalId; function startCounter() { intervalId = setInterval(() => { num += increment; if (num >= targetNum) { stopCounter(); } document.getElementById("counter").innerHTML = num; }, 1000); } function stopCounter() { clearInterval(intervalId); } ``` 这段代码将会在 HTML 页面中显示一个初始值为 0 的标题，以及两个按钮，分别用于开始和停止数字递增的功能。当点击“开始”按钮时，程序会以每秒钟增加 increment 的值的方式对 num 变量进行递增，并将递增后的值显示在 HTML 页面的标题中，直到 num 的值达到 targetNum。在达到目标值后，程序会停止 setInterval() 函数的执行。当点击“停止”按钮时，程序会停止 setInterval() 函数的执行。你可以根据自己的需要修改 increment、targetNum 和 setInterval() 函数的时间间隔来实现不同的数字递增效果。同时可以通过 CSS 来美化数字展示的样式。