js自定义数字跳动效果computeNumber
时间:2021-07-11
本文章向大家介绍js自定义数字跳动效果computeNumber,主要包括js自定义数字跳动效果computeNumber使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<!-- * @Author: your name * @Date: 2020-03-29 10:37:57 * @LastEditTime: 2020-03-29 10:42:43 * @LastEditors: Please set LastEditors * @Description: In User Settings Edit * @FilePath: \lwnhwyfront\src\components\computeNumber.vue --> <template> <div id="demo"> <div class="nwwest-roll" :style="{'height': styleHeight + 'px'}" id="nwwest-roll"> <ul id="roll-ul" class="roll-ul"> <li v-for="(item, index) in list" :style="{'height': styleHeight + 'px'}" ref="rollul" class="rollLi" :key="index" :class="{anim:animate==true}"> <span class="name">{{item}}</span> </li> </ul> </div> </div> </template> <script> export default { props: { number: { type: [String, Number], default: '' }, styleHeight: { type: Number, default: 0 }, autoplay: { type: Boolean, default: false } }, watch: { number (newValue, oldValue) { if( newValue !== oldValue ) { this.list[1] = newValue this.list[0] = oldValue this.num = newValue; this.scroll(this.number); } } }, data () { return { animate: true, list: [this.number, this.number], num: this.number, newNum: this.number, timeout: '', timeInterval: '' } }, mounted () { if( this.autoplay ) { this.timeInterval = setInterval(() => { this.scroll(this.number); }, 4000); } }, beforeDestroy() { clearInterval(this.timeout) clearInterval(this.timeInterval) }, methods: { scroll(num){ let con1 = this.$refs.rollul; /* styleHeight */ // let marginTopHeight = (this.styleHeight - 10) + 'px' con1[0].style.marginTop = 0; this.animate = !this.animate; var that = this; that.timeout = setTimeout(() =>{ that.list[1] = num con1[0].style.marginTop = -this.styleHeight + 'px'; that.animate = !that.animate; setTimeout(() => { that.list[0] = num }, 1000); }, 80) } } } </script> <style lang="" scoped> .nwwest-roll { overflow: hidden; } .nwwest-roll .name{ display: inline-block; } .roll-ul { list-style: none; padding: 0; margin: 0; } .anim { transition: all 1s; } </style>
页面使用:xxx.vue页面
JS:import computeNumber from "@/components/computeNumber.vue";
HTML:<div class="f45"> <compute-number autoplay :styleHeight="45" :number="huAll"></compute-number> </div>
原文地址:https://www.cnblogs.com/soonK/p/14999807.html
- 为啥我的Python这么慢 (一)
- 矩阵的基本知识构造重复矩阵的方法——repmat(xxx,xxx,xxx)构造器的构造方法单位数组的构造方法指定公差的等差数列指定项数的等差数列指定项数的lg等差数列sub2ind()从矩阵索引==》
- 简单的Writer和ReaderWriter的主要方法Writer工作原理Reader的主要方法readLine():String
- 为啥我的Python这么慢 - 项查找 (二)
- 初识字节流+实现缓冲字节流OutputStream的主要方法构造方法读关流实现BufferedInputStream实现BufferedOutputStream为什么read()返回的是Int型而不是
- Properties+重温Map+本地计数器Map方法Properties的方法用Properties的好处
- SequenceInputStreamSequenceInputStream构造方法读关流刷新
- 怎么实现关闭窗口
- java.io.StreamCorruptedException: invalid type code: AC错误的解决方法
- 不可不知的一点Python陷阱
- 10个应该早点知道的Python技巧
- 一文读懂如何用 Python 实现6种排序算法
- 5 个很好的 Python 面试题
- Python部署手记:django, gunicorn, virtualenv, circus, nginx
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PHP中的include和require
- 一起来学matlab-matlab学习笔记10 10_2一般操作符和数据显示格式
- 一起来学matlab-matlab学习笔记10 10_3关系运算符和逻辑运算符
- 一篇文章学懂Shell脚本,最简明的教程在这里
- 一起来学matlab-matlab学习笔记10 10_5 通用字符串操作和比较函数
- 一个案例彻底弄懂如何正确使用 mysql inndb 联合索引
- 一起来学matlab-matlab学习笔记11 11_2 高维数组处理和运算 squeeze, ind2sub, sub2ind
- matlab结构体 rmfield,arrayfun,structfun,struct2cell,cell2struct
- PHP函数参数传递方法的具体改进技巧
- matlab学习笔记11_3 高维数组处理 filp, shiftdim, size, permute, ipermute
- 看完这篇文章,你的Linux基础就差不多了
- jzy3D从入门到弃坑
- git丢弃本地修改的所有文件(新增、删除、修改)
- Jmetal设置Solution Variables
- git log 查看某文件的修改历史