php实现数字滚动效果,vue如何实现数字滚动增加效果?代码示例

5fc60d08da358322.jpg

项目中需要做数字滚动增加的效果,一开始很懵,研究了一下原理,发现很简单,贴出来分享一下 ^_^

数字滚动组件:

0

props: {

time: {

type: Number,

default: 2

},

value: {

type: Number,

default: 720000

}

},

methods: {

numberGrow (ele) {

let _this = this

let step = (_this.value * 10) / (_this.time * 1000)

let current = 0

let start = 0

let t = setInterval(function () {

start += step

if (start > _this.value) {

clearInterval(t)

start = _this.value

t = null

}

if (current === start) {

return

}

current = start

ele.innerHTML = current.toString().replace(/(d)(?=(?:d{3}[+]?)+$)/g, '$1,')

}, 10)

}

},

mounted () {

this.numberGrow(this.$refs.numberGrow)

}

}

transform: translateZ(0);

}

.number-grow {

font-family: Arial-BoldMT;

font-size: 64px;

color: #ffaf00;

letter-spacing: 2.67px;

margin:110px 0 20px;

display: block;

line-height:64px;

}

调用:

更多编程相关知识,请访问:编程入门!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/475128.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode 1061. 按字典序排列最小的等效字符串(并查集)

文章目录1. 题目2. 解题1. 题目 给出长度相同的两个字符串:A 和 B,其中 A[i] 和 B[i] 是一组等价字符。 举个例子,如果 A "abc" 且 B "cde",那么就有 a c, b d, c e。 等价字符遵循任何等价关系的一般…

SheevaPlug是什么,有什么用途

简单说 SheevaPlug 是由 ARM CPU加上 Linux 作业系统的小型计算机, 用一个手掌就可以托住其中 CPU 是 1.2GHz 主频, 512MB DDR2, 512MB NAND Flash, 1个 USB口以及1个外接 SD 卡槽这个小计算机瑞安装了 linux 2.6.x 以及 debian 5.0 文件系统,拿到这个 sheevaplug 后你可以自行…

导出oracle表中数据,从Oracle中导出数据表!

C:\Documents and Settings\Administrator>expExport: Release 9.2.0.1.0 - Production on 星期四 12月 7 12:52:05 2006Copyright (c) 1982, 2002, Oracle Corporation. All rights reserved.用户名: peam口令:连接到: Oracle9i Enterprise Edition Release 9.2.0.1.0 - …

LeetCode 366. 寻找二叉树的叶子节点(上下翻转二叉树+BFS)

文章目录1. 题目2. 解题1. 题目 给你一棵二叉树,请按以下要求的顺序收集它的全部节点: 依次从左到右,每次收集并删除所有的叶子节点重复如上过程直到整棵树为空 示例: 输入: [1,2,3,4,5]1/ \2 3/ \ 4 5 输出: [[4,5,3],[2],[1]…

白话地图投影之初识地球

本文是Koala带你进入GIS世界的开篇,Koala打算用简单通俗的语言为大家介绍地图投影,帮助GISer理解地图投影的概念。作为进入GIS世界多年的老鸟,Koala也是在不断的实战中才真正理解和掌握地图投影的奥秘。 我们生活的地球长啥模样? …

oracle聚合函数wmsys,oracle 自定义聚合函数

oracle提供了聚合函数的API可以让我们方便的自己定义聚合函数。详细看oracle官方文档:http://docs.oracle.com/cd/B14117_01/appdev.101/b10800/dciaggref.htmhttp://docs.oracle.com/cd/B14117_01/appdev.101/b10800/dciaggfns.htm#g1008306wmsys.wm_concat(合并行…

欧洲杯2012

----------------------------------------------------------------------------- 欧洲杯2012 ----------------------------------------------------------------------------- 下载地址:http://itunes.apple.com/cn/app/ou-zhou-bei2012/id531622806?mt8 系统要…

LeetCode 245. 最短单词距离 III

文章目录1. 题目2. 解题1. 题目 给定一个单词列表和两个单词 word1 和 word2,返回列表中这两个单词之间的最短距离。 word1 和 word2 是有可能相同的,并且它们将分别表示为列表中两个独立的单词。 示例: 假设 words ["practice", "ma…

oracle 汇总上面所有,Oracle经验技巧汇总

Oracle经验技巧汇总对于Oracle学习者来说,掌握一些经验技巧是很有必要的,下面就和小编一起来学习学习吧!1.删除表空间DROP TABLESPACE TableSpaceName [INCLUDING CONTENTS [AND DATAFILES]]2.删除用户DROP USER User_Name CASCADE3.删除表的注意事项在删…

think in java - 第一章 学习笔记

总观第一章,作者试图为我们讲述面向对象编程(oop)的核心思想,而我的见解是,对象是对具体事物的一种抽象,对象与对象直接的关系通过消息联系。 关于类的三大特性:继承,多态&#xff0…

LeetCode 484. 寻找排列(找规律+贪心)

文章目录1. 题目2. 解题1. 题目 现在给定一个只由字符 ‘D’ 和 ‘I’ 组成的 秘密签名。 ‘D’ 表示两个数字间的递减关系,‘I’ 表示两个数字间的递增关系。 并且 秘密签名 是由一个特定的整数数组生成的,该数组唯一地包含 1 到 n 中所有不同的数字&a…

php将文件夹压缩成zip文件,将文件夹压缩成zip文件的php代码_php实例

1.请先下载我准备好的zip.php工具类,下载后解压,将里面的文件放入对应的目录中,我是放在虚拟目录下的include文件夹中。2.在你的php文件中加入下面代码即可复制代码 代码如下:require_once "./include/zip.php";$zip new PHPZip()…

LeetCode 651. 4键键盘(DP,Ctrl+CV)

文章目录1. 题目2. 解题1. 题目 假设你有一个特殊的键盘包含下面的按键: Key 1: (A):在屏幕上打印一个 A。Key 2: (Ctrl-A):选中整个屏幕。Key 3: (Ctrl-C):复制选中区域到缓冲区。Key 4: (Ctrl-V):将缓冲区内容输出…

stl algorithm -- sort ,unique

在写私信群聊代码的时候碰到怎么把一个vector<Int> 元素unique化的问题&#xff0c;基本上就是需要下面这么做&#xff0c;用<algorithm>中的&#xff0c;先sort再unique 1 #include <algorithm>2 #include <iostream>3 #include <vector>4 #inc…

oracle scn隐藏参数,Oracle隐含参数scn不一致启动

Oracle隐含参数&#xff1a;allow_resetlogs_corruption的使用提示&#xff1a;Oracle的隐含参数只应该在测试环境或者在Oracle Support的支持下使用orOracle隐含参数&#xff1a;allow_resetlogs_corruption的使用提示&#xff1a;Oracle的隐含参数只应该在测试环境或者在Orac…

LeetCode 298. 二叉树最长连续序列(自顶向下)

文章目录1. 题目2. 解题1. 题目 给你一棵指定的二叉树&#xff0c;请你计算它最长连续序列路径的长度。 该路径&#xff0c;可以是从某个初始结点到树中任意结点&#xff0c;通过「父 - 子」关系连接而产生的任意路径。 这个最长连续的路径&#xff0c;必须从父结点到子结点…

LeetCode 159. 至多包含两个不同字符的最长子串(滑动窗口)

文章目录1. 题目2. 解题1. 题目 给定一个字符串 s &#xff0c;找出 至多 包含两个不同字符的最长子串 t &#xff0c;并返回该子串的长度。 示例 1: 输入: "eceba" 输出: 3 解释: t 是 "ece"&#xff0c;长度为3。示例 2: 输入: "ccaabbb" 输…

linux nginx 图片服务器,搭建Nginx图片服务器(Linux)

wget http://nginx.org/download/nginx-1.19.1.tar.gzyum install gcc-cyum install -y pcre pcre-develyum install -y zlib zlib-develyum install -y openssl openssl-devel进入nginx目录./configure --prefix/usr/local/nginx --pid-path/var/run/nginx/nginx.pid --loc…

LeetCode 163. 缺失的区间

文章目录1. 题目2. 解题1. 题目 给定一个排序的整数数组 nums &#xff0c;其中元素的范围在 闭区间 [lower, upper] 当中&#xff0c;返回不包含在数组中的缺失区间。 示例&#xff1a;输入: nums [0, 1, 3, 50, 75], lower 0 和 upper 99, 输出: ["2", "…

linux chmod修改权限失败,【Linux】chmod修改文件权限

在Linux系统中输入chmod -- help 输出如下&#xff1a;lilinchuanlilinchuan-VPCEA27EC:~$ chmod --help用法&#xff1a;chmod [选项]... 模式[,模式]... 文件...或&#xff1a;chmod [选项]... 八进制模式 文件...或&#xff1a;chmod [选项]... --reference参考文件 文件...…