javascript - 如何创建从零计数到 HTML 中包含的元素的 Javascript PURE 动画?
问题描述
我正在尝试创建一个从零计数到将通过 PHP 提供的数字的脚本,例如我的 HTML 是
<h1 class = "myClass"> 500 </h1>
<h1 class = "myClass"> 424 </h1>
<h1 class = "myClass"> 424 </h1>
我想检索包含特定类的元素的值,并从零开始计数。
但我希望它在 Javascript 中完成,我看过一些 Jquery 插件但我想在 javascript 中做同样的事情,就像这个例子:https ://codepen.io/shivasurya/pen/FatiB
细节,对于小值和较大的值,计数同时结束会很有趣。
我已经尝试过类似的东西:
function ng_count_number_animation (element) {
let select = window.document.querySelectorAll (element);
let start = 0;
let i;
for (i = 0; i <select.length; i ++) {
for (let y = 0; y <= Number (select [i] .innerHTML); y ++) {
select [i] .innerHTML = y;
}
}
}
ng_count_number_animation (". ng_count_number");
但它从来没有用过,我也使用了 Javascript setinterval 来间隔计数,但它也不起作用,所有类的结果总是为零。
解决方案
您可以使用 requestAnimationFrame() 来尽可能频繁地执行一个函数。我的代码不是最有效的,但我认为它应该很容易理解:
//retrieve all counters from body
let counters = document.getElementsByClassName('myClass');
//retrieve all counter value
let vals = Array.from(counters).map(x => Number(x.innerHTML));
//convert counters element collection to an array
counters = Array.from(counters);
//loop through all counters
counters.forEach(el => {
//set counter to 0
el.innerHTML = '0';
//set 'internal' counter to 0 -> obviously this isn't super efficient
//could be faster if you used an array instead
el.counter = 0;
});
//execute this function as often as possible using requestAnimationFrame()
let update = () => {
//loop through all counters
counters.forEach((el, i) => {
//add one to 'internal counter'
el.counter += 1;
//update counter display value min(max, currentVal + 1)
el.innerHTML = Math.min(vals[i], el.counter);
});
requestAnimationFrame(update);
}
update();
<h1 class = "myClass"> 500 </h1>
<h1 class = "myClass"> 424 </h1>
<h1 class = "myClass"> 424 </h1>
推荐阅读
- typescript - TS2339:“对象”类型上不存在属性“名称”
- python - 尝试逐步迭代python中的2个文件
- c - 为什么我可以修改这个 const char* 数组?
- java - 使用 PhotoView 放大后无法达到图像的原始大小
- java - 复制屏幕以在眼镜中使用。安卓
- java - OpenFeign 自定义错误解码器未捕获 ConnectionException
- python - 对 IO 绑定但独立的进程使用多处理或异步?
- laravel-mix - 如何在 Laravel Mix 上对 SASS/SCSS 进行 lint
- c++ - 在 ffmpeg 编码过程中更新参数正在运行
- node.js - 配置 Cypress 的 Electron 浏览器来处理下载