vue金额滚动动画

效果预览

QQ20190124-0.gif

<template><div><div class="head" @click="this.numFun(0,5000)">点击金额变动</div><div>{{amount}}</div></div>
</<template><script>
export default {data () {return {amount: 0}
}
methods: {//金额变动动画numFun(startNum,maxNum) {var that = thislet numText = startNum;let golb; // 为了清除requestAnimationFramefunction numSlideFun(){ // 数字动画numText+=5; // 速度的计算可以为小数 。数字越大，滚动越快if(numText >= maxNum){numText = maxNum;cancelAnimationFrame(golb);}else {golb = requestAnimationFrame(numSlideFun);}that.amount=numText// console.log(numText)}numSlideFun(); // 调用数字动画}}
}

当然vue是一个成熟的孩纸了，也有了属于它的对应的插件vue-count-to：https://www.npmjs.com/package/vue-count-to
这个是相当还用的哦～～推荐推荐

js数字金额滚动动画(vue)相关推荐

js数字累加 · 递增动画 - 封装篇
js数字累加 · 递增动画 - 代码可封装代码如下: <!DOCTYPE html> <html> <head> <meta charset="U ...
数字增加滚动动画用原生js实现的多种方案
方案1 <h1 id="numBox"></h1> <script>function numRunFun(num, maxNum){var nu ...
js 数字金额大小写转换成中文大写
function Arabia_to_Chinese(Num) {for(i=Num.length-1;i>=0;i--){Num = Num.replace(",",&qu ...
JS数字金额转为大写金额
2019独角兽企业重金招聘Python工程师标准>>> /** 数字金额大写转换(可以处理整数,小数,负数) */ function smalltoBIG(n) { var frac ...
html盒子移动动画代码,js实现盒子滚动动画效果
Document *{ margin: 0; padding: 0; } .box1{ /* 必须加定位才可以动 */ position: absolute; left: 0; width: 50px ...
js 数字金额的转换（转）
/*数字千分符*/ function rendererZhMoney(v) { if(isNaN(v)){ return v; } v = (Math.round((v - 0) * 100)) / ...
JS 数字金额转繁体金额
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...
vue页面滚动动画——wow.js教程
WOW.js 是一款帮助你实现滚动页面时触发CSS 动画效果的插件. 缺陷:当页面向下滚动时,动画出现:当页面向上回滚时,动画不会回退.(即动画仅出现一次!) 官网地址 https://www.de ...
原生js实现大屏数字上下滚动效果，支持随机多位数字
一文看懂大屏数字滚动前言一.html 二.js生成展示的元素三.css实现样式四.加入动画和定时器前言在大屏项目中经常需要实现那种数字上下滚动的效果,普通的数字随机滚动在UI组件(例如Vi ...

js数字金额滚动动画(vue)

vue金额滚动动画

js数字金额滚动动画(vue)相关推荐

最新文章

热门文章