A project featuring number counting-up animation implemented with PHP-generated random growth sequences and JS, with non-traditional linear growth.
- Use PHP to dynamically generate random step sequences for number growth
- Control animation rhythm through JS, with all numbers configurable to have a unified total duration to ensure synchronized completion
- Support custom key parameters, including target numbers, total animation duration, and number of growth split steps
- Download the project files and deploy
index.phpto an environment supporting PHP - Open the file and modify the 3 core parameters at the top:
$dayCount: Target number of days of stable operation$attackCount: Target number of intercepted attacks$userCount: Target number of registered users
- (Optional) Adjust parameters when calling the
generateAnimationNumbersfunction:- Second parameter: Number of split steps (e.g.,
50means splitting the growth process into 50 steps) - Third parameter: Total animation duration (unit: ms, e.g.,
2000means the animation lasts 2 seconds)
- Second parameter: Number of split steps (e.g.,
- Visit
index.phpto see the animation effect of numbers growing from 0 to the target values
| Parameter Name | Location | Description |
|---|---|---|
| Target Numbers | PHP code section | Need to modify the values of the three variables: $dayCount, $attackCount, $userCount |
| Animation Steps | generateAnimationNumbers function call |
Control the smoothness of number growth; more steps result in smoother animation |
| Total Duration | generateAnimationNumbers function call |
Control the overall speed of the animation, in milliseconds (ms) |
| Delay Start | setTimeout in JS code section |
The animation starts with an initial delay of 150ms; this value can be modified to adjust the start timing |
一个使用PHP生成随机增长序列+JS实现的动效,数字增长动画项目,非传统线性增长
- 使用PHP动态生成数字增长的随机步骤序列
- 通过JS控制动画节奏,所有数字可配置为统一总时长,确保同步结束
- 支持自定义关键参数,包括目标数字、动画总时长、增长拆分步数
- 下载项目文件,将
index.php部署到支持PHP的环境中 - 打开文件,修改顶部3个核心参数:
$dayCount:已稳定运行天数的目标数字$attackCount:已拦截攻击数的目标数字$userCount:已注册用户数的目标数字
- (可选)调整
generateAnimationNumbers函数调用时的参数:- 第二个参数:拆分的步数(如
50表示将增长过程拆分为50步) - 第三个参数:动画总时长(单位:ms,如
2000表示动画持续2秒)
- 第二个参数:拆分的步数(如
- 访问
index.php即可看到数字从0增长到目标值的动画效果
| 参数名称 | 位置 | 说明 |
|---|---|---|
| 目标数字 | PHP代码部分 | 需修改$dayCount、$attackCount、$userCount三个变量的值 |
| 动画步数 | generateAnimationNumbers函数调用 |
控制数字增长的细腻程度,步数越多动画越平滑 |
| 总时长 | generateAnimationNumbers函数调用 |
控制动画整体速度,单位为毫秒(ms) |
| 延迟启动 | JS代码部分中的setTimeout |
初始延迟150ms启动动画,可修改该数值调整启动时机 |