收藏
便签
笔记
消息
创作
登录
应无所住,而生其心
博主信息
排名
1
文章
860
粉丝
112
评论
163
文章类别
最新文章
最新评价
net core webapi post传递参数
庸人 : 确实坑哈，我也是下班好了好几次，发现后台传递对象是可以的，但...
百度编辑器自定义模板
庸人 : 我建议换个编辑器，因为现在百度富文本已经停止维护了，用tinymec...
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术
原

vue实现数字翻牌器，数字滚动显示，数字动画显示

11497人阅读 2023/3/11 13:01 总访问：5182828 评论：0 收藏：0 手机
分类: 前端

效果如下：

封装组件

  1. <template>
  2.     <div class="number-grow-warp">
  3.         <span ref="numberGrow" :data-time="time" class="number-grow" :data-value="valnumber"></span>
  4.     </div>
  5. </template>
  7. <script>
  8. export default {
  9.     // 组件名字
  10.     name: 'NumberGrow',
  11.     props: {
  12.         time: {
  13.             type: Number,
  14.             default: 50
  15.         },
  16.         valnumber: {
  17.             type: Number,
  18.             default: 520
  19.         },
  20.     },
  21.     watch: {
  22.         // watch第一次绑定值的时候不会执行监听，修改数据才会触发函数。数字变化的时候就出现翻牌动画
  23.         valnumber(newVal, oldVal) {
  24.             // console.log(newVal)
  25.             // console.log(oldVal)
  27.             // 计算差值。不同的差值可以让间隔时间不一致
  28.             let shortValue = (newVal-oldVal)
  30.             let jumpTime = 145
  31.             // 如果改变的数字大于30了，我们就把总时间控制到750毫秒。那么每步走的时间就是720/步数
  32.             if(shortValue>30)
  33.             {
  34.                 jumpTime = 750/shortValue
  35.             }
  36.             // 如果改变的数字在20到30范围内，我们就把总时间控制到750毫秒
  37.             else if(shortValue>=20&&shortValue<=30)
  38.             {
  39.                 jumpTime = 700/shortValue
  40.             }
  41.             // 如果改变的数字在10到20范围内，我们就把总时间控制到600毫秒
  42.             else if(shortValue>=10&&shortValue<20)
  43.             {
  44.                 jumpTime = 600/shortValue
  45.             }
  46.             else if(shortValue>=5&&shortValue<10)
  47.             {
  48.                 jumpTime = 500/shortValue
  49.             }
  50.             else
  51.             {
  52.                 jumpTime=145
  53.             }
  55.             this.numberGrow(this.$refs.numberGrow,oldVal,jumpTime)
  56.         }
  57.     },
  58.     methods: {
  59.         numberGrow(ele,oldVal,jumpTime) {
  60.             let _this = this
  61.             // let step = (_this.valnumber * 10) / (_this.time * 1000)
  62.             // // 步长可能是小数，需要处理一下，至少不能是小数，不然效果比较差
  63.             // if (step < 1) {
  64.             //     alert("步长小于1了")
  65.             //     step = 1
  66.             // }
  67.             //步长就设置成1吧
  68.             let step= 1
  69.             // let current = 0
  70.             // let start = 0
  71.             // 不应该从0开始应该从上一次的值开始
  72.             let current = oldVal
  73.             let start = oldVal
  75.             let t = setInterval(function () {
  76.                 start += step
  77.                 if (start > _this.valnumber) {
  78.                     clearInterval(t)
  79.                     start = _this.valnumber
  80.                     t = null
  81.                 }
  82.                 if (current === start) {
  83.                     return
  84.                 }
  85.                 //console.log(start)
  86.                 current = start
  87.                 ele.innerHTML = current
  88.                 // 格式化一下计数法，三位加一个逗号分隔
  89.                 // ele.innerHTML = current.toString().replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, '$1,')
  90.             }, jumpTime)
  91.         }
  92.     },
  93.     mounted() {
  94.        // this.numberGrow(this.$refs.numberGrow) 
  95.        this.$refs.numberGrow.innerHTML = this.valnumber
  96.     }
  97. }
  98. </script>
  99. <style>
  100. .number-grow-warp {
  101.     transform: translateZ(0);
  102. }
  104. .number-grow {
  105.     font-family: Arial-BoldMT;
  106.     font-size: 30px;
  107.     color: #ffaf00;
  108.     letter-spacing: 2.67px;
  109.     margin: 110px 0 20px;
  110.     display: block;
  111.     line-height: 64px;
  112. }
  113. </style>

上面那个没有实现数字变小的动画，需要写一下判断，每次递减就行了

  1. <template>
  2.     <div class="number-grow-warp">
  3.         <span ref="numberGrow" :data-time="time" class="number-grow" :data-value="valnumber"></span>
  4.     </div>
  5. </template>
  7. <script>
  8. export default {
  9.     // 组件名字
  10.     name: 'NumberGrow',
  11.     props: {
  12.         time: {
  13.             type: Number,
  14.             default: 50
  15.         },
  16.         valnumber: {
  17.             type: Number,
  18.             default: 720000
  19.         },
  20.     },
  21.     watch: {
  22.         // watch第一次绑定值的时候不会执行监听，修改数据才会触发函数。数字变化的时候就出现翻盘动画
  23.         valnumber(newVal, oldVal) {
  24.             // console.log(newVal)
  25.             // console.log(oldVal)
  27.             // 计算差值。不同的差值可以让间隔时间不一致
  28.             let shortValue = (newVal - oldVal)
  30.             // 默认是加法
  31.             let changeType = "add"
  33.             if (shortValue < 0) {
  34.                 shortValue = -(shortValue)
  35.                 // 如果变化是负数就变成减法
  36.                 changeType = "subtraction"
  37.             }
  39.             let jumpTime = 145
  40.             // 如果改变的数字大于30了，我们就把总时间控制到750毫秒。那么每步走的时间就是720/步数
  41.             if (shortValue > 30) {
  42.                 jumpTime = 750 / shortValue
  43.             }
  44.             // 如果改变的数字在20到30范围内，我们就把总时间控制到750毫秒
  45.             else if (shortValue >= 20 && shortValue <= 30) {
  46.                 jumpTime = 700 / shortValue
  47.             }
  48.             // 如果改变的数字在10到20范围内，我们就把总时间控制到600毫秒
  49.             else if (shortValue >= 10 && shortValue < 20) {
  50.                 jumpTime = 600 / shortValue
  51.             }
  52.             else if (shortValue >= 5 && shortValue < 10) {
  53.                 jumpTime = 500 / shortValue
  54.             }
  55.             else {
  56.                 jumpTime = 145
  57.             }
  59.             if (changeType === "add") {
  60.                 this.numberGrow(this.$refs.numberGrow, oldVal, jumpTime)
  61.             }
  62.             else {
  63.                 this.numberReduce(this.$refs.numberGrow, oldVal, jumpTime)
  64.             }
  65.         }
  66.     },
  67.     methods: {
  68.         //数字变大
  69.         numberGrow(ele, oldVal, jumpTime, changeType) {
  70.             let _this = this
  71.             // let step = (_this.valnumber * 10) / (_this.time * 1000)
  72.             // // 步长可能是小数，需要处理一下，至少不能是小数，不然效果比较差
  73.             // if (step < 1) {
  74.             //     alert("步长小于1了")
  75.             //     step = 1
  76.             // }
  78.             //步长就设置成1吧
  79.             let step = 1
  80.             if (changeType === "subtraction") {
  81.                 step = -1
  82.             }
  83.             // let current = 0
  84.             // let start = 0
  85.             // 不应该从0开始应该从上一次的值开始
  86.             let current = oldVal
  87.             let start = oldVal
  89.             let t = setInterval(function () {
  90.                 start += step
  91.                 if (start > _this.valnumber) {
  92.                     clearInterval(t)
  93.                     start = _this.valnumber
  94.                     t = null
  95.                 }
  96.                 if (current === start) {
  97.                     return
  98.                 }
  99.                 //console.log(start)
  100.                 current = start
  101.                 ele.innerHTML = current
  102.                 // 格式化一下计数法，三位加一个逗号分隔
  103.                 // ele.innerHTML = current.toString().replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, '$1,')
  104.             }, jumpTime)
  105.         },
  106.         //数字变小
  107.         numberReduce(ele, oldVal, jumpTime) {
  108.             let _this = this
  109.             let step = -1
  110.             let current = oldVal
  111.             let start = oldVal
  113.             let t = setInterval(function () {
  114.                 start += step
  115.                 if (start <= _this.valnumber) {
  116.                     clearInterval(t)
  117.                     start = _this.valnumber
  118.                     t = null
  119.                 }
  120.                 if (current === start) {
  121.                     return
  122.                 }
  123.                 current = start
  124.                 ele.innerHTML = current
  125.             }, jumpTime)
  126.         },
  127.     },
  128.     mounted() {
  129.         // this.numberGrow(this.$refs.numberGrow) 
  130.         this.$refs.numberGrow.innerHTML = this.valnumber
  131.     }
  132. }
  133. </script>
  134. <style>
  135. .number-grow-warp {
  136.     transform: translateZ(0);
  137. }
  139. .number-grow {
  140.     font-family: Arial-BoldMT;
  141.     font-size: 30px;
  142.     color: #23FFFC;
  143.     /* letter-spacing: 2.67px; */
  144.     /* margin: 110px 0 20px; */
  145.     display: block;
  146.     height: 60px;
  147.     line-height: 60px;
  148. }
  149. </style>

优化数字变化大导致比较久才能显示完的问题

如果数字变化大，时间间隔太短了，在那个间隔时间不一定走得完，所以时间间隔太小了，每次得步长就不能是1了，要加大一点，比如数字从0变化到37362，每次+1的时间要0.02毫秒才能到750毫秒之内走完，但是0.02毫秒是无法进行一次+1显示的，普通计算机显示器在进行一次切换显示的时间是远大于0.02毫秒的。
所以我们可以把时间和每次变化的数字同步扩大就行。比如0.02毫秒每次+1，同步扩大50倍，就变成了，1毫秒每次+50，这样还是可以保存在总时间不变的情况下，数字增加完成，只是每步数字变化变大了些，当然对应的时间间隔变大了。

  1. <template>
  2.     <div class="number-grow-warp">
  3.         <span ref="numberGrow" :data-time="time" class="number-grow" :data-value="valnumber"></span>
  4.     </div>
  5. </template>
  7. <script>
  8. export default {
  9.     // 组件名字
  10.     name: 'NumberGrow',
  11.     props: {
  12.         time: {
  13.             type: Number,
  14.             default: 50
  15.         },
  16.         valnumber: {
  17.             type: Number,
  18.             default: 0
  19.         },
  20.     },
  21.     watch: {
  22.         // watch第一次绑定值的时候不会执行监听，修改数据才会触发函数。数字变化的时候就出现翻牌动画
  23.         valnumber(newVal, oldVal) {
  24.             // console.log(newVal)
  25.             // console.log(oldVal)
  27.             // 计算差值。不同的差值可以让间隔时间不一致
  28.             let shortValue = (newVal - oldVal)
  30.             // console.log("...............数字差值.................")
  31.             // console.log(shortValue)
  33.             // 默认是加法
  34.             let changeType = "add"
  36.             if (shortValue < 0) {
  37.                 shortValue = -(shortValue)
  38.                 // 如果变化是负数就变成减法
  39.                 changeType = "subtraction"
  40.             }
  42.             let jumpTime = 145
  43.             let jumpNumber =1
  44.             if (shortValue > 750)
  45.             {
  46.                 /*
  47.                 时间间隔太短了，在那个间隔时间不一定走得完，所以时间间隔太小了，每次得步长就不能是1了，要加大一点，
  48.                 比如数字从0变化到37362，每次+1的时间要0.02毫秒才能到720毫秒之内走完，但是0.02毫秒是无法进行一次+1显示的，普通计算机显示器在进行一次切换显示的时间是大于0.02毫秒的
  49.                 所以我们可以把时间和每次变化的数字同步扩大就行。比如0.02毫秒每次+1，同步扩大50倍，就变成了，1毫秒每次+50，
  50.                 这样还是可以保存在总时间不变的情况下，数字增加完成，只是每步数字变化变大了些，当然对应的时间间隔变大了。
  51.                 */
  52.                  jumpTime = 750 / shortValue
  54.                  // 扩大的倍数就安装750的倍数来吧，我们差不多控制到1毫秒进行一次数字改变
  55.                  let n = Math.round(shortValue/750)
  57.                  console.log("每次间隔应该扩大:"+n+"倍")
  59.                  // 进行一次数字改变的数值扩大n倍  
  60.                  jumpNumber = jumpNumber*n
  61.                  // 时间间隔也同步扩大n倍
  62.                  jumpTime = jumpTime*n
  64.             }
  65.             // 如果改变的数字大于30了，我们就把总时间控制到750毫秒。那么每步走的时间就是720/步数
  66.             else if (shortValue > 30) {
  67.                 jumpTime = 750 / shortValue
  68.                 // console.log(".....每步的时间....")
  69.                 // console.log(jumpTime)
  70.             }
  71.             // 如果改变的数字在20到30范围内，我们就把总时间控制到750毫秒
  72.             else if (shortValue >= 20 && shortValue <= 30) {
  73.                 jumpTime = 700 / shortValue
  74.             }
  75.             // 如果改变的数字在10到20范围内，我们就把总时间控制到600毫秒
  76.             else if (shortValue >= 10 && shortValue < 20) {
  77.                 jumpTime = 600 / shortValue
  78.             }
  79.             else if (shortValue >= 5 && shortValue < 10) {
  80.                 jumpTime = 500 / shortValue
  81.             }
  82.             else {
  83.                 jumpTime = 145
  84.             }
  86.             if (changeType === "add") {
  87.                 this.numberGrow(this.$refs.numberGrow, oldVal, jumpTime,jumpNumber)
  88.             }
  89.             else {
  90.                 this.numberReduce(this.$refs.numberGrow, oldVal, jumpTime,jumpNumber)
  91.             }
  92.         }
  93.     },
  94.     methods: {
  95.         //数字变大
  96.         numberGrow(ele, oldVal, jumpTime, jumpNumber) {
  97.             let _this = this
  98.             // let step = (_this.valnumber * 10) / (_this.time * 1000)
  99.             // // 步长可能是小数，需要处理一下，至少不能是小数，不然效果比较差
  100.             // if (step < 1) {
  101.             //     alert("步长小于1了")
  102.             //     step = 1
  103.             // }
  105.             //步长就设置成1吧
  106.             // let step = 1
  107.             let step = jumpNumber
  108.             // if (changeType === "subtraction") {
  109.             //     step = -1
  110.             // }
  111.             // let current = 0
  112.             // let start = 0
  113.             // 不应该从0开始应该从上一次的值开始
  114.             let current = oldVal
  115.             let start = oldVal
  117.             let t = setInterval(function () {
  118.                 start += step
  119.                 if (start > _this.valnumber) {
  120.                     clearInterval(t)
  121.                     start = _this.valnumber
  122.                     t = null
  123.                 }
  124.                 if (current === start) {
  125.                     return
  126.                 }
  127.                 //console.log(start)
  128.                 current = start
  129.                 ele.innerHTML = current
  130.                 // 格式化一下计数法，三位加一个逗号分隔。千分号
  131.                 //ele.innerHTML = current.toString().replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, '$1,')
  132.             }, jumpTime)
  133.         },
  134.         //数字变小
  135.         numberReduce(ele, oldVal, jumpTime,jumpNumber) {
  136.             let _this = this
  137.             // let step = -1
  138.             // 取负数
  139.             let step = 0-jumpNumber
  140.             let current = oldVal
  141.             let start = oldVal
  143.             let t = setInterval(function () {
  144.                 start += step
  145.                 if (start <= _this.valnumber) {
  146.                     clearInterval(t)
  147.                     start = _this.valnumber
  148.                     t = null
  149.                 }
  150.                 if (current === start) {
  151.                     return
  152.                 }
  153.                 current = start
  154.                 ele.innerHTML = current
  155.             }, jumpTime)
  156.         },
  157.     },
  158.     mounted() {
  159.         // this.numberGrow(this.$refs.numberGrow) 
  160.         this.$refs.numberGrow.innerHTML = this.valnumber
  161.     }
  162. }
  163. </script>
  164. <style>
  165. .number-grow-warp {
  166.     transform: translateZ(0);
  167. }
  169. .number-grow {
  170.     font-family: Arial-BoldMT;
  171.     font-size: 29px;
  172.     color: #23FFFC;
  173.     /* letter-spacing: 2.67px; */
  174.     /* margin: 110px 0 20px; */
  175.     display: block;
  176.     height: 60px;
  177.     line-height: 60px;
  178. }
  179. </style>

还需要继续完善，比如字体，字号，风格等这些作为参数会更通用，还有逻辑也是现在还是写得很粗糙

优化在短时间内多次改变造成的显示问题

比如前面变化还没有完成，数字马上又变成了就会有问题，比如先从0到5，然后0到5还没有改变完成在变化到500，然后马上又变化到1000。这样的话其实有三个定时器在改变数字，第一次是从0?5,然后就是从5?500，在就是从500?1000。我们看数字变化的效果是这样的，先慢慢一个数字一个数字的再走，然后很快的加速到500，然后又数字减少到几十然后加速到1000然后又减少到几十多一点，又开始慢慢走。感觉每次变化的新的数字都不是前面赋值的而是最新赋值的一次，果然是我封装的时候只传递了旧值，根本没有传递新的值

看一下新的值是直接取的绑定的那个值，这肯定不行撒，如果多次都在运行中，就会出现刚刚运行的情况，每次都要变化的最新的值去

如果以很慢的速度变化到很大的值去就会很有问题了，数字大了走几个小时都有可能，所以每次改变的数字应该只影响本次的，新值也需要改成进行传递的方式

贴一下代码
这里还实现了一下是否使用默认样式的配置

  1. <template>
  2.     <div class="number-grow-warp">
  3.         <!-- <span ref="numberGrow" :data-time="time" class="number-grow" :data-value="valnumber"></span> -->
  4.         <!-- 样式变成可以绑定的，引用组件的时候可以不要这个样式 -->
  5.         <span ref="numberGrow" :data-time="time" :class="defaultClass" :data-value="valnumber"></span>
  6.     </div>
  7. </template>
  9. <script>
  10. export default {
  11.     // 组件名字
  12.     name: 'NumberGrow',
  13.     props: {
  14.         time: {
  15.             type: Number,
  16.             default: 50
  17.         },
  18.         valnumber: {
  19.             type: Number,
  20.             default: 0
  21.         },
  22.         // 默认样式。组件内容提供了一套默认样式，如果引用组件的时候不想使用这个样式就可以修改这个参数
  23.         defaultClass: {
  24.             type: String,
  25.             default: 'number-grow'
  26.         }
  27.     },
  28.     data() {
  29.         return {
  30.             // 上次的数字变化是否已经完成，比如第一次从0到500都还没有变化完成，又要变成1000，这种就应该等待第一次运行完成后才去执行第二次的变成
  31.             isLastStop: true,
  32.         }
  33.     },
  34.     watch: {
  35.         // watch第一次绑定值的时候不会执行监听，修改数据才会触发函数。数字变化的时候就出现翻牌动画
  36.         valnumber(newVal, oldVal) {
  37.             // console.log(newVal)
  38.             // console.log(oldVal)
  40.             // 判断是否上次已经改变完成了
  41.             // if (this.isLastStop === true) {
  43.             //console.log("上一次运行完成了"+newVal+","+oldVal)
  44.             this.isLastStop = false
  45.             // 计算差值。不同的差值可以让间隔时间不一致
  46.             let shortValue = (newVal - oldVal)
  48.             // console.log("...............数字差值.................")
  49.             // console.log(shortValue)
  51.             // 默认是加法
  52.             let changeType = "add"
  54.             if (shortValue < 0) {
  55.                 shortValue = -(shortValue)
  56.                 // 如果变化是负数就变成减法
  57.                 changeType = "subtraction"
  58.             }
  60.             let jumpTime = 145
  61.             let jumpNumber = 1
  62.             if (shortValue > 750) {
  63.                 /*
  64.                 时间间隔太短了，在那个间隔时间不一定走得完，所以时间间隔太小了，每次得步长就不能是1了，要加大一点，
  65.                 比如数字从0变化到37362，每次+1的时间要0.02毫秒才能到720毫秒之内走完，但是0.02毫秒是无法进行一次+1显示的，普通计算机显示器在进行一次切换显示的时间是大于0.02毫秒的
  66.                 所以我们可以把时间和每次变化的数字同步扩大就行。比如0.02毫秒每次+1，同步扩大50倍，就变成了，1毫秒每次+50，
  67.                 这样还是可以保存在总时间不变的情况下，数字增加完成，只是每步数字变化变大了些，当然对应的时间间隔变大了。
  68.                 */
  69.                 jumpTime = 750 / shortValue
  71.                 // 扩大的倍数就安装750的倍数来吧，我们差不多控制到1毫秒进行一次数字改变
  72.                 let n = Math.round(shortValue / 750)
  74.                 //console.log("每次间隔应该扩大:"+n+"倍")
  76.                 // 进行一次数字改变的数值扩大n倍  
  77.                 jumpNumber = jumpNumber * n
  78.                 // 时间间隔也同步扩大n倍
  79.                 jumpTime = jumpTime * n
  81.             }
  82.             // 如果改变的数字大于30了，我们就把总时间控制到750毫秒。那么每步走的时间就是750/步数
  83.             else if (shortValue > 30) {
  84.                 jumpTime = 750 / shortValue
  85.             }
  86.             // 如果改变的数字在20到30范围内，我们就把总时间控制到750毫秒
  87.             else if (shortValue >= 20 && shortValue <= 30) {
  88.                 jumpTime = 700 / shortValue
  89.             }
  90.             // 如果改变的数字在10到20范围内，我们就把总时间控制到600毫秒
  91.             else if (shortValue >= 10 && shortValue < 20) {
  92.                 jumpTime = 600 / shortValue
  93.             }
  94.             // 如果改变的数字在3到10范围内，我们就把总时间控制到530毫秒
  95.             else if (shortValue >= 2 && shortValue < 10) {
  96.                 jumpTime = 530 / shortValue
  97.             }
  98.             else {
  99.                 //jumpTime = 145
  100.                 // 修改大一点吧，变化效果明显点，不然变化少了，看着一点都不明显
  101.                 jumpTime = 266
  102.             }
  104.             if (changeType === "add") {
  105.                 this.numberGrow(this.$refs.numberGrow, oldVal, jumpTime, jumpNumber, newVal)
  106.             }
  107.             else {
  108.                 this.numberReduce(this.$refs.numberGrow, oldVal, jumpTime, jumpNumber, newVal)
  109.             }
  110.             // }
  111.             // else
  112.             // {
  113.             //     console.log("上一次还没有运行完成"+newVal+","+oldVal)
  114.             // }
  115.         }
  116.     },
  117.     methods: {
  118.         //数字变大
  119.         numberGrow(ele, oldVal, jumpTime, jumpNumber, newVal) {
  120.             let _this = this
  122.             //步长就设置成1吧
  123.             // let step = 1
  124.             let step = jumpNumber
  125.             // 不应该从0开始应该从上一次的值开始
  126.             let current = oldVal
  127.             let start = oldVal
  129.             // 试试先清除一下上次还没有执行完的定时器了
  130.             // clearInterval(t)
  132.             let t = setInterval(function () {
  133.                 start += step
  134.                 if (start > newVal) {
  135.                     clearInterval(t)
  136.                     start = newVal
  137.                     t = null
  138.                     _this.isLastStop = true
  139.                 }
  140.                 if (current === start) {
  141.                     return
  142.                 }
  143.                 //console.log(start)
  144.                 current = start
  145.                 ele.innerHTML = current
  146.                 // 格式化一下计数法，三位加一个逗号分隔。千分号
  147.                 //ele.innerHTML = current.toString().replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, '$1,')
  148.             }, jumpTime)
  149.         },
  150.         //数字变小
  151.         numberReduce(ele, oldVal, jumpTime, jumpNumber, newVal) {
  152.             let _this = this
  153.             // let step = -1
  154.             // 取负数
  155.             let step = 0 - jumpNumber
  156.             let current = oldVal
  157.             let start = oldVal
  159.             // 试试先清除一下上次还没有执行完的定时器了
  160.             // clearInterval(t)
  162.             let t = setInterval(function () {
  163.                 start += step
  164.                 if (start <= newVal) {
  165.                     clearInterval(t)
  166.                     start = newVal
  167.                     t = null
  168.                     _this.isLastStop = true
  169.                 }
  170.                 if (current === start) {
  171.                     return
  172.                 }
  173.                 current = start
  174.                 ele.innerHTML = current
  175.             }, jumpTime)
  176.         },
  177.     },
  178.     mounted() {
  179.         // this.numberGrow(this.$refs.numberGrow) 
  180.         this.$refs.numberGrow.innerHTML = this.valnumber
  181.     }
  182. }
  183. </script>
  184. <style scoped>
  185. .number-grow-warp {
  186.     transform: translateZ(0);
  187. }
  189. .number-grow {
  190.     font-family: Arial-BoldMT;
  191.     font-size: 29px;
  192.     color: #23FFFC;
  193.     display: block;
  194.     height: 60px;
  195.     line-height: 60px;
  196. }
  197. </style>

但是要注意一下会不会出现这种情况就是三次改变，照理说应该是最后一次最后完成，数字也是最后的值，但是前面的由于执行慢，反而变成了最后执行完成了，那么最后剩下的值就会有问题了，其实只要保证数字变化小的执行时机小于数字变化大的就行了，而且两次改变数字之间也是存在时间差的，所以保证这两点就不会出现上面说的情况。

继续优化可以在多个改变同时进行的时候，变成只有一个定时器在运行，停掉上一次的

比如第二个在进行改变的时候发现上一次的定时器还没有执行完成就直接停掉上一次的，马上开始这一次的改变，保证每次只有一个定时任务在执行，就不会出现那种几个定时器同时在执行，数字一会变大又变小然后在变大的情况了，这样情况的显示看起来就不是太舒服了，虽然不影响最后数字的正确性。

先定义一个变量记录一下定时器：

然后涉及到定时器的地方都换成这个变量：

然后在数字改变的时候判断一下，上一次是否执行完成，如果这一次要开始执行了，上一次的还没有执行完成的话，直接把上一次执行中的定时器干掉就行了，直接开始这一次的变化就行了

因为其实每次都是从一个数字变成需要的新数字，那么肯定是以最新的为准就行了，那么既然新的一次都开始了前面的在继续去执行就没有意义了，还会很影响美观，所以如果上一次还没有执行完毕直接干掉即可

贴一下代码：

  1. <template>
  2.     <div class="number-grow-warp">
  3.         <!-- <span ref="numberGrow" :data-time="time" class="number-grow" :data-value="valnumber"></span> -->
  4.         <!-- 样式变成可以绑定的，引用组件的时候可以不要这个样式 -->
  5.         <span ref="numberGrow" :data-time="time" :class="defaultClass" :data-value="valnumber"></span>
  6.     </div>
  7. </template>
  9. <script>
  10. export default {
  11.     // 组件名字
  12.     name: 'NumberGrow',
  13.     props: {
  14.         time: {
  15.             type: Number,
  16.             default: 50
  17.         },
  18.         valnumber: {
  19.             type: Number,
  20.             default: 0
  21.         },
  22.         // 默认样式。组件内容提供了一套默认样式，如果引用组件的时候不想使用这个样式就可以修改这个参数
  23.         defaultClass: {
  24.             type: String,
  25.             default: 'number-grow'
  26.         }
  27.     },
  28.     data() {
  29.         return {
  30.             // 上次的数字变化是否已经完成，比如第一次从0到500都还没有变化完成，又要变成1000，这种就应该等待第一次运行完成后才去执行第二次的变成()
  31.             //isLastStop: true,
  32.             // 定时器记录一下，方便判断上一次还没有运行完成的情况
  33.             myInterval:null 
  34.         }
  35.     },
  36.     watch: {
  37.         // watch第一次绑定值的时候不会执行监听，修改数据才会触发函数。数字变化的时候就出现翻牌动画
  38.         valnumber(newVal, oldVal) {
  39.             // console.log(newVal)
  40.             // console.log(oldVal)
  42.             // 说明上次的运行还没有执行完毕
  43.             if(this.myInterval!=null)
  44.             {
  45.                 //直接清楚掉上一次的运行
  46.                 clearInterval(this.myInterval)
  47.                 // 设置成执行完毕的效果
  48.                 //this.valnumber = oldVal
  49.                 //this.$refs.numberGrow.innerHTML = this.valnumber
  50.             }
  52.             // 判断是否上次已经改变完成了
  53.             // if (this.isLastStop === true) {
  55.             //console.log("上一次运行完成了"+newVal+","+oldVal)
  56.             // this.isLastStop = false
  57.             // 计算差值。不同的差值可以让间隔时间不一致
  58.             let shortValue = (newVal - oldVal)
  60.             // console.log("...............数字差值.................")
  61.             // console.log(shortValue)
  63.             // 默认是加法
  64.             let changeType = "add"
  66.             if (shortValue < 0) {
  67.                 shortValue = -(shortValue)
  68.                 // 如果变化是负数就变成减法
  69.                 changeType = "subtraction"
  70.             }
  72.             let jumpTime = 145
  73.             let jumpNumber = 1
  74.             if (shortValue > 750) {
  75.                 /*
  76.                 时间间隔太短了，在那个间隔时间不一定走得完，所以时间间隔太小了，每次得步长就不能是1了，要加大一点，
  77.                 比如数字从0变化到37362，每次+1的时间要0.02毫秒才能到720毫秒之内走完，但是0.02毫秒是无法进行一次+1显示的，普通计算机显示器在进行一次切换显示的时间是大于0.02毫秒的
  78.                 所以我们可以把时间和每次变化的数字同步扩大就行。比如0.02毫秒每次+1，同步扩大50倍，就变成了，1毫秒每次+50，
  79.                 这样还是可以保存在总时间不变的情况下，数字增加完成，只是每步数字变化变大了些，当然对应的时间间隔变大了。
  80.                 */
  81.                 jumpTime = 750 / shortValue
  83.                 // 扩大的倍数就安装750的倍数来吧，我们差不多控制到1毫秒进行一次数字改变
  84.                 let n = Math.round(shortValue / 750)
  86.                 //console.log("每次间隔应该扩大:"+n+"倍")
  88.                 // 进行一次数字改变的数值扩大n倍  
  89.                 jumpNumber = jumpNumber * n
  90.                 // 时间间隔也同步扩大n倍
  91.                 jumpTime = jumpTime * n
  93.             }
  94.             // 如果改变的数字大于30了，我们就把总时间控制到750毫秒。那么每步走的时间就是750/步数
  95.             else if (shortValue > 30) {
  96.                 jumpTime = 750 / shortValue
  97.             }
  98.             // 如果改变的数字在20到30范围内，我们就把总时间控制到750毫秒
  99.             else if (shortValue >= 20 && shortValue <= 30) {
  100.                 jumpTime = 700 / shortValue
  101.             }
  102.             // 如果改变的数字在10到20范围内，我们就把总时间控制到600毫秒
  103.             else if (shortValue >= 10 && shortValue < 20) {
  104.                 jumpTime = 600 / shortValue
  105.             }
  106.             // 如果改变的数字在3到10范围内，我们就把总时间控制到530毫秒
  107.             else if (shortValue >= 2 && shortValue < 10) {
  108.                 jumpTime = 530 / shortValue
  109.             }
  110.             else {
  111.                 //jumpTime = 145
  112.                 // 修改大一点吧，变化效果明显点，不然变化少了，看着一点都不明显
  113.                 jumpTime = 266
  114.             }
  116.             if (changeType === "add") {
  117.                 this.numberGrow(this.$refs.numberGrow, oldVal, jumpTime, jumpNumber, newVal)
  118.             }
  119.             else {
  120.                 this.numberReduce(this.$refs.numberGrow, oldVal, jumpTime, jumpNumber, newVal)
  121.             }
  122.             // }
  123.             // else
  124.             // {
  125.             //     console.log("上一次还没有运行完成"+newVal+","+oldVal)
  126.             // }
  127.         }
  128.     },
  129.     methods: {
  130.         //数字变大
  131.         numberGrow(ele, oldVal, jumpTime, jumpNumber, newVal) {
  132.             let _this = this
  133.             // let step = (_this.valnumber * 10) / (_this.time * 1000)
  134.             // // 步长可能是小数，需要处理一下，至少不能是小数，不然效果比较差
  135.             // if (step < 1) {
  136.             //     alert("步长小于1了")
  137.             //     step = 1
  138.             // }
  140.             //步长就设置成1吧
  141.             // let step = 1
  142.             let step = jumpNumber
  143.             // 不应该从0开始应该从上一次的值开始
  144.             let current = oldVal
  145.             let start = oldVal
  147.             // 试试先清除一下上次还没有执行完的定时器了
  148.             // clearInterval(t)
  150.             _this.myInterval = setInterval(function () {
  151.                 start += step
  152.                 if (start > newVal) {
  153.                     clearInterval(_this.myInterval)
  154.                     start = newVal
  155.                     // t = null
  156.                     _this.myInterval = null
  157.                     // _this.isLastStop = true
  158.                 }
  159.                 if (current === start) {
  160.                     return
  161.                 }
  162.                 //console.log(start)
  163.                 current = start
  164.                 ele.innerHTML = current
  165.                 // 格式化一下计数法，三位加一个逗号分隔。千分号
  166.                 //ele.innerHTML = current.toString().replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, '$1,')
  167.             }, jumpTime)
  170.         },
  171.         //数字变小
  172.         numberReduce(ele, oldVal, jumpTime, jumpNumber, newVal) {
  173.             let _this = this
  174.             // let step = -1
  175.             // 取负数
  176.             let step = 0 - jumpNumber
  177.             let current = oldVal
  178.             let start = oldVal
  180.             // 试试先清除一下上次还没有执行完的定时器了
  181.             // clearInterval(t)
  183.             _this.myInterval = setInterval(function () {
  184.                 start += step
  185.                 if (start <= newVal) {
  186.                     clearInterval(_this.myInterval)
  187.                     start = newVal
  188.                     // t = null
  189.                     _this.myInterval = null
  190.                     //_this.isLastStop = true
  191.                 }
  192.                 if (current === start) {
  193.                     return
  194.                 }
  195.                 current = start
  196.                 ele.innerHTML = current
  197.             }, jumpTime)
  198.         },
  199.     },
  200.     mounted() {
  201.         // this.numberGrow(this.$refs.numberGrow) 
  202.         this.$refs.numberGrow.innerHTML = this.valnumber
  203.     }
  204. }
  205. </script>
  206. <style scoped>
  207. .number-grow-warp {
  208.     transform: translateZ(0);
  209. }
  211. .number-grow {
  212.     font-family: Arial-BoldMT;
  213.     font-size: 29px;
  214.     color: #23FFFC;
  215.     /* letter-spacing: 2.67px; */
  216.     /* margin: 110px 0 20px; */
  217.     display: block;
  218.     height: 60px;
  219.     line-height: 60px;
  220. }
  221. </style>

使用组件

  1. <!-- 分析趋势 -->
  2. <template>
  3.     <div>
  4.         <div class="analyseTrend">
  5.             <div class="analyseTrend_warp">
  6.                 <div class="analyseTrend_content_left">
  7.                     <div class="analyseTrend_content_tag">知识点数</div>
  8.                     <div style="display: flex;">
  9.                         <NumberGrow :valnumber="evalData.evalCount"></NumberGrow>
  10.                         <div class="analyseTrend_conten_unit">个</div>
  11.                     </div>
  12.                 </div>
  13.                 <div class="analyseTrend_content_right">
  14.                     <div class="analyseTrend_content_tag">评估累计</div>
  15.                     <div style="display: flex;">
  16.                         <NumberGrow :valnumber="evalData.evalDoCount"></NumberGrow>
  17.                         <div class="analyseTrend_conten_unit">人次</div>
  18.                     </div>
  19.                 </div>
  20.             </div>
  21.             <div class="splitline"></div>
  22.             <div class="analyseTrend_warp">
  23.                 <div class="analyseTrend_content_left">
  24.                     <div class="analyseTrend_content_tag">实验数</div>
  25.                     <div style="display: flex;">
  26.                         <NumberGrow :valnumber="labroomData.labroomCount"></NumberGrow>
  27.                         <div class="analyseTrend_conten_unit">个</div>
  28.                     </div>
  29.                 </div>
  30.                 <div class="analyseTrend_content_right">
  31.                     <div class="analyseTrend_content_tag">实验累计人次</div>
  32.                     <div style="display: flex;">
  33.                         <NumberGrow :valnumber="labroomData.labroomStuCount"></NumberGrow>
  34.                         <div class="analyseTrend_conten_unit">人次</div>
  35.                     </div>
  36.                 </div>
  37.             </div>
  38.             <div class="splitline"></div>
  39.             <div class="analyseTrend_warp">
  40.                 <div class="analyseTrend_content_left">
  41.                     <div class="analyseTrend_content_tag">项目数</div>
  42.                     <div style="display: flex;">
  43.                         <NumberGrow :valnumber="prodData.prodCount"></NumberGrow>
  44.                         <div class="analyseTrend_conten_unit">个</div>
  45.                     </div>
  46.                 </div>
  47.                 <div class="analyseTrend_content_right">
  48.                     <div class="analyseTrend_content_tag">项目累计人次</div>
  49.                     <div style="display: flex;">
  50.                         <NumberGrow :valnumber="prodData.prodStuCount"></NumberGrow>
  51.                         <div class="analyseTrend_conten_unit">人次</div>
  52.                     </div>
  53.                 </div>
  54.             </div>
  55.         </div>
  56.     </div>
  57. </template>
  59. <script >
  61. import NumberGrow from '@/views/component/numberGrow.vue'
  62. export default {
  63.     components: {
  64.         NumberGrow
  65.     },
  66.     // 组件名字
  67.     name: 'IntegratedData',
  68.     // 组件参数
  69.     props: {
  71.     },
  72.     data() {
  73.         return {
  74.             evalData:{
  75.                 evalCount:3212,
  76.                 evalDoCount:1678467
  77.             },
  78.             labroomData:
  79.             {
  80.                 labroomCount:5985,
  81.                 labroomStuCount:2897678
  82.             },
  83.             prodData:{
  84.                 prodCount:3212,
  85.                 prodStuCount:1678467
  86.             }
  87.         }
  88.     },
  89.     mounted() {
  92.         // 模拟数据变化
  93.         setInterval(() => {
  95.             let becorevalprodStuCount = this.prodData.prodStuCount
  96.             this.prodData.prodStuCount=becorevalprodStuCount+60
  98.             let becoreval = this.prodData.prodCount
  99.             this.prodData.prodCount=becoreval+100
  101.             let beforeevalData = this.evalData.evalDoCount
  102.             this.evalData.evalDoCount=beforeevalData+50
  104.             let beforeevalDatalabroomData = this.labroomData.labroomCount
  105.             this.labroomData.labroomCount=beforeevalDatalabroomData+50
  107.             let labroomStuCount = this.labroomData.labroomStuCount
  108.             this.labroomData.labroomStuCount=labroomStuCount+50
  110.             let beforeevalDataevalCount = this.evalData.evalCount
  111.             this.evalData.evalCount=beforeevalDataevalCount+70
  113.         }, 2000);
  116.         // setInterval(() => {
  117.         //     let val = this.numberData.labroom.number[0]
  118.         //     this.numberData.labroom.number[0] = val + 100
  120.         //     //相当于复制了一份新的对象在给自己
  121.         //     this.numberData.labroom = { ...this.numberData.labroom }
  123.         //     let prodval = this.numberData.prod.number[0]
  124.         //     this.numberData.prod.number[0] = prodval + 100
  125.         //     this.numberData.prod = { ...this.numberData.prod }
  127.         //     // console.log(val)
  128.         //     // console.log("------------------")
  129.         // }, 1800)
  130.     },
  131.     beforeDestroy() {
  132.     },
  133.     methods: {
  134.     }
  135. }
  136. </script>
  139. <style lang="scss" scoped>
  140. // 分割线渐变 两边浅中间深
  141. .splitline {
  142.     height: 1px;
  143.     // background: radial-gradient(#3FDDFA -54%, #fff 100%);
  144.     // background:linear-gradient(to left,#fff,#3FDDFA,#fff);
  145.     background: linear-gradient(to left, rgba(63, 221, 250, 0), #3FDDFA 50%, rgba(63, 221, 250, 0));
  146.     // background:linear-gradient(to left,rgba(63, 221, 250, 0) 0%,#3FDDFA 50%,rgba(63, 221, 250, 0) 100%);
  147. }
  150. .analyseTrend {
  151.     margin-top: 26px;
  152.     // margin-left: -10px;
  154.     .analyseTrend_warp {
  155.         height: 136px;
  156.         display: flex;
  157.         align-items: center;
  159.         .analyseTrend_content_left {
  160.             width: 150px;
  161.         }
  163.         .analyseTrend_content_right {
  164.             width: 160px;
  165.         }
  167.         .analyseTrend_content_tag {
  168.             font-size: 16px
  169.         }
  171.         // 单位
  172.         .analyseTrend_conten_unit {
  173.             height: 60px;
  174.             line-height: 60px;
  175.             padding-top: 10px;
  176.             color: #23FFFC;
  177.             font-size: 15px;
  178.         }
  180.     }
  182. }
  183. </style>

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739。有需要软件开发，或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

vue.js+Layer实现表格数据绑定与更新
一：使用Vue.js绑定好数据与更新事件 使用v-on绑定好事件,在事件里边直接把该行数据传递进去，在更新方法里边就可以直接...

vue.js 实现省市联动
HTML代码&lt;divid=&quot;pro_citys&quot;&gt; 省:&lt;selectid=&quot;provice&quot;v-on:change=&quot;prochange()&quo...

vue.js常见问题
一：花括号当做字符串显示的问题1：检查下绑定到vue.js的id是否重复，如果id重复了，就有可能存在这种问题，因为有可能把数...

vue.js常用指令
v-html可以把字符串当成一个html来渲染，而不是原样输出Html类似.net mvc中的@Html.Raw()方法&lt;divv-html=&quot;item.tit...

干货！div滚动到一定位置就固定他。vue中实现一侧滚动到底部就固定
尊重原创：转载请注名出处div滚动到一定位置就固定他，例如左边的内容很多，右边的内容很少，如果不处理滚动到一定位置后右...

vue.js常用指令，事件绑定等，vue过滤器解析状态过滤器多个参数。vue表格状态解析。vue解析类型，element ui解析类型，状态，el-tag
按照html的编码显示：v-html&lt;div class=&quot;font_info&quot; v-html=&quot;item.Content&quot;&gt;{{item.Content}}&l...

vue.js if用法
vue.js if可以做一些判断例如我们要把下面这个输出varvm=newVue({ el:&quot;#content&quot;, data:{ titles:[&quot;小明...

vue.js 学习日记第一章-安装vue开发环境
官网：https://cn.vuejs.org/v2/guide/ 这是一篇学习性文章，不定时更新，用来记录我学习vue.js的过程。 首先，是v...

vue.js 学习日记第二章-在vue中编写function及一些简单指令
官网：https://cn.vuejs.org/v2/guide/ vue.js 学习日记第一章：http://www.tnblog.net/18323015640/article/details/2...

vue.js 学习日记第三章-vue中的简单事件及事件修饰符
官网：https://cn.vuejs.org/v2/guide/ vue.js 学习日记第二章：http://www.tnblog.net/18323015640/article/details/2...

vue.js 学习日记第四章-vue中文本框数据获取与绑定及computed计算属性
官网：https://cn.vuejs.org/v2/guide/ vue.js学习日记第三章： http://www.tnblog.net/18323015640/article/details/2...

vue.js 学习日记第五章-v-if和v-for指令的使用方式
官网：https://cn.vuejs.org/v2/guide/ vue.js学习日记第四章： http://www.tnblog.net/18323015640/article/details/2...

vue.js 学习日记第六章-vue组件初步学习
官网：https://cn.vuejs.org/v2/guide/ vue.js学习日记第五章： http://www.tnblog.net/18323015640/article/details/2...

vue.js学习日记第七章-搭建脚手架
官网：https://cn.vuejs.org/v2/guide/ vue.js学习日记第六章： http://www.tnblog.net/18323015640/article/details/2...

vue实现好友选中效果
逛过vue官网肯定会发现一个有趣的指令“v-for”，相比与以前拼接html代码确实要上档次一点，而且减少了工作量，先看一波效...

js时间格式化vue.js时间格式化，带T 时间格式化

也可以借助moment库， 参考：https://www.tnblog.net/aojiancc2/article/details/8079moment库有点大，推荐可以使用day.js...