JS开发小应用：实现钱包余额数字跳动效果 - Web前端
作者：98wpeu发布时间：2026-08-31分类：网页前端技术浏览：7
导读： 介绍一个用原生javascript实现的小应用：实现钱包余额数字跳动效果。这种效果平时项目中也经常会用到，可能大家会在前端框架里使用更多了点，今天我们脱离框架，用原生的去实现。先...
介绍一个用原生javascript实现的小应用：实现钱包余额数字跳动效果。这种效果平时项目中也经常会用到，可能大家会在前端框架里使用更多了点，今天我们脱离框架，用原生的去实现。先看下效果图：
实现思路
1、当默认进来的时候，可以设置一个数字，通常是：0.00，或者你也可以设计成其他
2、然后过1秒或者几秒数字变成最终的余额。
实现方法
首先我们得写一个插件，由于时间原因，这里就不啰嗦，直接发出来。
/**
* 实现数字滚动的效果的类
*/
class Digitscroll {
constructor(options) {
//获取容器的DOM，没有则抛出错误
this.contAIner = document.querySelector(options.container);
if (!this.container) {
throw error("no container");
}
this.container.style.overflow = "hidden";
this.container.style.display = "flex";
//可视容器高度 也是滚动间隔距离,容器要设置高度，否则默认30px
this.rollheight = parseInt(getComputedStyle(this.container).height) || 30;
this.container.style.height = this.rollHeight + "px";
}
roll(num) {
// 将传入的要滚动的数字拆分后初始化每一位数字的容器
this.initDiGitEle(num);
const numEles = this.container.querySelectorAll(".single-num");
// 遍历生成每一位数字的滚动队列，如滚动到7，则生成内容为0，1，2，3，4，5，6，7的7个div，用于滚动动画
[...numEles].forEach((numEle, index) => {
const curNum = 0;
let targetNum = Number(this.numberArr[index]);
if (curNum >= targetNum) {
targetNum = targetNum + 10;
}
let cirNum = curNum;
// 文档碎片，拼凑好后一次性插入节点中
const fragment = document.createDocumentFragment();
// 生成从0到目标数字对应的div
while (targetNum >= cirNum) {
const ele = document.createElement("div");
ele.innerHTML = cirNum % 10;
cirNum++;
fragment.appendChild(ele);
}
numEle.innerhtml = "";
numEle.appendChild(fragment);
//重置位置
numEle.style.CSStext +=
"-WEBkit-transition-duration:0s;-webkit-transform:translateY(0)";
setTimeout(() => {
numEle.style.cssText += `-webkit-transition-duration:1s;-webkit-transFORM:translateY(${
-(targetNum - curNum) * this.rollHeight
}px);`;
}, 50);
});
}
// 初始化容器
initDigitEle(num) {
// 数字拆分位数
const numArr = num.toString().split("");
// 文档碎片，拼凑好后一次性插入节点中
const fragment = document.createDocumentFragment();
numArr.foreach((item) => {
const el = document.createElement("div");
// 数字是要滚动的，非数字如.是不滚动的
if (/[0-9]/.test(item)) {
el.className = "single-num";
el.style.height = this.rollHeight + "px";
el.style.lineHeight = this.rollHeight + "px";
} else {
el.innerHTML = item;
el.className = "no-move";
el.style.verticalAlign = "bottom";
}
// el.style.float='left';
fragment.APPendChild(el);
}, []);
this.container.innerHTML = "";
this.container.appendChild(fragment);
// 存储滚动的数字
this.numberArr = numArr.filter((item) => /[0-9]/.test(item));
}
}这个是我们定义的一个类，里面包含了需要的一些函数方法。
接下来我们需要调用他们。
// 应用上面定义的函数
const digitInstance = new DigitScroll({container:"#digit-scroll"});
digitInstance.roll(88.88);
settimeout(() => {
digitInstance.roll(3578.48);
}, 5000);最后大家可以去定义下样式，写点CSS啥的。最后分享下完整的代码：
<!DOCtype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-eqUIv="X-UA-Compatible" content="ie=Edge">
<meta name="vIEwport" content="width=device-width, initial-scale=1.0">
<title>JS开发小应用：实现钱包余额数字跳动效果 | Web前端之家www.jiangweishan.com</title>
<style>
.wrApper{
display: flex;
}
#digit-scroll{
display: flex;
justify-content: center;
color: #f50;
}
</style>
</head>
<body>
<div class="wrapper">您的钱包余额（元）：<div id="digit-scroll"></div></div>
<script>
/**
* 实现数字滚动的效果的类
*/
class DigitScroll {
constructor(options) {
//获取容器的dom，没有则抛出错误
this.container = document.queryselector(options.container);
if (!this.container) {
throw Error("no container");
}
this.container.style.overflow = "hidden";
this.container.style.display = "flex";
//可视容器高度 也是滚动间隔距离,容器要设置高度，否则默认30px
this.rollHeight = parseint(getcomputedStyle(this.container).height) || 30;
this.container.style.height = this.rollHeight + "px";
}
roll(num) {
// 将传入的要滚动的数字拆分后初始化每一位数字的容器
this.initDigitEle(num);
const numEles = this.container.querySelectorAll(".single-num");
// 遍历生成每一位数字的滚动队列，如滚动到7，则生成内容为0，1，2，3，4，5，6，7的7个div，用于滚动动画
[...numEles].foReach((numEle, index) => {
const curNum = 0;
let targetNum = Number(this.numberArr[index]);
if (curNum >= targetNum) {
targetNum = targetNum + 10;
}
let cirNum = curNum;
// 文档碎片，拼凑好后一次性插入节点中
const fragment = document.createDocumentFragment();
// 生成从0到目标数字对应的div
while (targetNum >= cirNum) {
const ele = document.createElement("div");
ele.innerHTML = cirNum % 10;
cirNum++;
fragment.appendChild(ele);
}
numEle.innerHTML = "";
numEle.appendChild(fragment);
//重置位置
numEle.style.cssText +=
"-webkit-transition-duration:0s;-webkit-transform:translateY(0)";
settimeout(() => {
numEle.style.cssText += `-webkit-transition-duration:1s;-webkit-transForm:translateY(${
-(targetNum - curNum) * this.rollHeight
}px);`;
}, 50);
});
}
// 初始化容器
initDigitEle(num) {
// 数字拆分位数
const numArr = num.tostring().split("");
// 文档碎片，拼凑好后一次性插入节点中
const fragment = document.createDocumentFragment();
numArr.forEach((item) => {
const el = document.createElement("div");
// 数字是要滚动的，非数字如.是不滚动的
if (/[0-9]/.test(item)) {
el.className = "single-num";
el.style.height = this.rollHeight + "px";
el.style.lineHeight = this.rollHeight + "px";
} else {
el.innerHTML = item;
el.className = "no-move";
el.style.verticalAlign = "bottom";
}
// el.style.float='left';
fragment.appendChild(el);
}, []);
this.container.innerHTML = "";
this.container.appendChild(fragment);
// 存储滚动的数字
this.numberArr = numArr.filter((item) => /[0-9]/.test(item));
}
}
// 应用上面定义的函数
const digitInstance = new DigitScroll({container:"#digit-scroll"});
digitInstance.roll(88.88);
setTimeout(() => {
digitInstance.roll(3578.48);
}, 5000);
</script>
</body>
</html>
相关推荐
- 谷歌浏览器Google Chrome新版本给我们带来了哪些新体验？ - Web前端
- 如何在 Windows PC 上安装 Linux - Web前端
- 码了六年代码，我为什么选择转岗做产品经理？ - Web前端
- 微软将 Windows 终端设为默认的 Windows 11 命令行选项 - Web前端
- 学习CSS：使用 PostCSS 启用即将推出的 CSS 功能 - Web前端
- 您应该采用微前端架构的 5 个理由 - Web前端
- CSS3 2D转换：分享常用的5种【translate()、rotate()、scale()、skew()、matrix()】实现方式 - Web前端
- IOS响应式设计：如何去定位UI设计和前端布局 - Web前端
- 正则表达式每日一学：探讨边界\b和\B的基本知识和应用法则 - Web前端
- JavaScript开发TIPS：了解下useRef和useState - Web前端
- 网页前端技术排行
-
- 1[Web前端]用javascript实现默认图片替代未显示的图片 - Web前端
- 2分析Iconfont-阿里巴巴矢量常用图标库 - Web前端
- 3jQuery实例教程:制作网页中可折叠的面板 - Web前端
- 4基于jquery的滚动条滚动固定div(附演示下载) - Web前端
- 5【第六章】Foundation之按钮和下拉功能 - Web前端
- 6jQuery编写widget的一些技巧分享 - Web前端
- 7分享精心挑选的12款优秀jQuery Ajax分页插件和教程 - Web前端
- 8jQuery实现鼠标移到元素上动态提示消息框效果 - Web前端
- 9在Mac/PC上远程调试iPhone/iPad上的网页 - Web前端
- 最近发表
-
- WordPress随机显示特色图片插件：Random Post Thumbnails
- KeePass实现Chrome浏览器自动填充密码方法一
- LNMP一键包nginx 301强制跳转到https教程
- KeePass实现Chrome浏览器自动填充密码方法二
- #建站# 免费的VPS管理软件Xshell8/Xftp8中文版下载
- 使用Xshell 8连接VPS教程_电脑登录vps的方法
- WordPress评论界面添加烟花????效果
- 不同浏览器书签同步方案：坚果云+Floccus_详细使用教程
- iOS端KeePassXC客户端APP：Strongbox Password Safe
- 给WordPress评论中的Gravatar头像图片添加ALT属性