51工具盒子
介绍一个用原生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>
