JS- 数字自增动画

如题

 <span>¥ <AnimatedMoney>{number || '0.00'}</AnimatedMoney></span>

import React, { Component } from 'react';
import PropTypes from 'prop-types';export default class AnimatedMoney extends Component {timeContainer = '';index = 0;static propTypes = {dot: PropTypes.number, // 小数点位数animated: PropTypes.bool, // 是否有动画time: PropTypes.number, // 间隔时间micrometer: PropTypes.bool, // 是否有千分符children: PropTypes.number.isRequired};static defaultProps = {dot: 2,time: 20,micrometer: true,animated: true};constructor(props) {super(props);this.state = {displayValue: 0};}componentDidMount() {this.init();}init = () => {const { animated, micrometer, children } = this.props;const numberVal = this.toNumber(children);// 判断是否出现动画if (!animated || numberVal === 0) {let finalVal = children;if (!micrometer) {finalVal = this.deleteThousandSymbol(children);}this.setState({displayValue: finalVal});return;}const valArr = this.getRandomArr(numberVal);this.toSetInterval(valArr);}// 转成数字toNumber = (value) => {const { displayValue } = this.state;let val = value;if (val === undefined || val === null) {return 0;}if (typeof val === 'string') {if (this.isHaveThousandSymbol(value)) {val = this.deleteThousandSymbol(val);}return Number(val);} else if (typeof val === 'number') {return val;}return displayValue;}toStrging = (value) => {const { dot, micrometer } = this.props;return value.toLocaleString('en-US', { minimumFractionDigits: dot, maximumFractionDigits: dot, useGrouping: micrometer });}// 是否有千分符isHaveThousandSymbol = (val) => {return val.toString().includes(',');}// 删除千分符deleteThousandSymbol = (val) => {return (val.toString().replace(/,/g, ''));}// 生成滚动数组getRandomArr = (finalNumber) => {const valArr = [];let initVal = 0;const step = finalNumber / 25;for (let i = 0; i < 25; i += 1) {initVal = step * i;initVal = this.toStrging(initVal);valArr.push(initVal);}valArr.push(this.toStrging(finalNumber));return valArr;}// 设置定时器toSetInterval = (valArr) => {const { time } = this.props;this.timeContainer = setInterval(() => {this.setInnerData(valArr[this.index]);this.index += 1;if (this.index >= valArr.length) {clearTimeout(this.timeContainer);this.timeContainer = null;}}, time);}setInnerData = (val) => {this.setState({displayValue: val});}render() {const { displayValue } = this.state;return (<span>{displayValue}</span>);}
}

JS- 数字自增动画相关推荐

js数字累加 · 递增动画 - 封装篇
js数字累加 · 递增动画 - 代码可封装代码如下: <!DOCTYPE html> <html> <head> <meta charset="U ...
js数字金额滚动动画(vue)
vue金额滚动动画效果预览 QQ20190124-0.gif <template><div><div class="head" @click=&qu ...
jquery 数字滚动特效数字自增特效数字位数动态适应
最近做了个大项目,需要在首页动画显示实时统计数据,虽然百度了不少jquery特效,但有的需要积分,有的功能不全面,下面我将源码分享出来. html <!DOCTYPE html> < ...
js进阶 13-6 jquery动画效果相关常用函数有哪些
js进阶 13-6 jquery动画效果相关常用函数有哪些一.总结一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...
js课程 5-14 js如何实现控制动画角色走动
js课程 5-14 js如何实现控制动画角色走动一.总结一句话总结:首先是onkeydown事件,然后是改变元素的left和top属性 1.常用键盘事件有哪些? • onkeydown和 onke ...
android扑克发牌动画,JS实现纸牌发牌动画
本文实例为大家分享了JS实现纸牌发牌动画的具体代码,供大家参考,具体内容如下先看演示游戏构建准备 1.准备52张纸牌 2.一张桌布 3.编辑工具为 Visual Code 技术概要 1.对象操作 ...
一篇文章教会你创建vue项目和使用vue.js实现数据增删改查
简介:一篇文章教会你创建vue项目和使用vue.js实现数据增删改查 [一.项目背景] 在管理员的一些后台页面里,数据列表中都会对这些数据进行增删改查的操作,例如管理员添加商品.修改商品价格.删除商品 ...
js操作indexedDB增删改查示例
js操作indexedDB增删改查示例 if ('indexedDB' in window) {// 如果数据库不存在则创建,如果存在但是version更大,会自动升级不会复制原来的版本var req ...
Vue.js 相关知识（动画）
1. 简介 Vue 在插入.更新或移除 DOM 时,提供多种不同方式的过渡效果,并提供 transition 组件来实现动画效果(用 transition 组件将需执行过渡效果的元素包裹) 语法:&l ...
js数字最多保留两位小数_8085微处理器中最多两个8位数字
js数字最多保留两位小数 Problem statement: 问题陈述: To find maximum of two 8bit numberusing 8085 microprocessor. 使 ...

JS- 数字自增动画

JS- 数字自增动画相关推荐

最新文章

热门文章