当前位置：首页 > 编程资源 > 编程问答 >内容正文

编程问答

数字变化滚动到指定数字的文字特效

发布时间：2025/6/17 编程问答 43 豆豆

生活随笔收集整理的这篇文章主要介绍了数字变化滚动到指定数字的文字特效小编觉得挺不错的,现在分享给大家,帮大家做个参考.

<!DOCTYPE html> <html>

<head> <meta charset="UTF-8"> <title>数字自动增加</title> </head>

</html> //引入jquery //数字自增到某一值动画参数（目标元素,自定义配置） function NumAutoPlusAnimation(targetEle, options) {
/*可以自己改造下传入的参数，按照自己的需求和喜好封装该函数*/ //不传配置就把它绑定在相应html元素的data-xxxx属性上吧 options = options || {};
var $this = document.getElementById(targetEle), time = options.time || $this.data('time'), //总时间--毫秒为单位 finalNum = options.num || 0, //要显示的真实数值 regulator = options.regulator || 100, //调速器，改变regulator的数值可以调节数字改变的速度 frontBackDifference = Number(options.frontBackDifference), //数值变化前后的差值 step = frontBackDifference / (time / regulator), /*每30ms增加的数值--*/ count = Number($("#time").html()), //计数器 initial = 0;
var timer = setInterval(function() {
count = count + step;
if (count >= finalNum) { clearInterval(timer); count = finalNum; } //t未发生改变的话就直接返回 //避免调用text函数，提高DOM性能 var t = Math.floor(count); if (t == initial) return;
initial = t;
$this.innerHTML = initial; }, 30); } //第一次初始化，相当于第一次请求的数据 var num = 200 NumAutoPlusAnimation("time", { time: 4000, num: num, regulator: 50, frontBackDifference: num, }); //每个6秒向后台请求数据的变化 setInterval(function() { var num1 = $("#time").html(); //请求数据的上一次的值 var num2 = Number($("#time").html()) + 40; //请求回来的数据 var num3 = num2 - num1; //两次数值差，也就是增加的数值 console.log(num3) NumAutoPlusAnimation("time", { time: 4000, num: num2, regulator: 50, frontBackDifference: num3, }) }, 6000);

转载于:https://www.cnblogs.com/l-y-z/p/9604314.html

总结

以上是生活随笔为你收集整理的数字变化滚动到指定数字的文字特效的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。