当前位置：首页 > news >正文

可视化页面数据累加

news 来源：原创 2024/9/23 13:30:44

效果图：

数据累加

实现此功能需要用到定时器

目标：按照我们的意愿，对标签内的数字123456进行累加或者累减

<span id="num">123456</span><span>/元</span>

实现：

先获取存放数字的元素
let num = document.getElementById('num');
再返回此元素内的文本
let numchange = num.innerText;
设置定时器，每过0.4秒，数字加1
setInterval(function() {
				numchange++;
				num.innerText = numchange;
			}, 400);

完整代码，复制直接运行：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <body>
       <span id="num">123456</span><span>/元</span>
       <script>
           let num = document.getElementById('num');
           let numchange = num.innerText;
           setInterval(function() {
               numchange++;
               num.innerText = numchange;
           }, 400);
       </script>
   </body>
</html>