html数字动画效果,原生JavaScript代码实现数字更新的动画效果

前言

在很多数据统计类型网站的首页，经常会看到数据在动态的更新，而且会以动画的效果呈现。

今天这篇文章我们就来看看这个效果如何实现吧。

文中的代码已经放到github上了，感兴趣的同学可以自取。https://github.com/zhouxiongking/article-pages/blob/master/articles/dynamicNumberUpdate/dynamicNumberUpdate.html

JavaScript

实现效果

首先我们来看看这个功能的实现效果，如下图所示。

实现效果

实现思路

看到上面的效果后，我们一起来如何实现？最开始给定一个基数，我们设置的是123456789。

给基数做基本的处理，每隔三位设置一个逗号。

随机生成从0到10之间的一个数，加到基数上，然后通过定时器，每隔一秒处理一次。

动画效果通过transform属性设置，transform的值改变translateY，从0%到-100%，这样就可以得到向上滚动的效果。

实现代码-JavaScript

页面的是初始HTML代码很简单，就只有一个空的ul元素。

首先是代码每隔三位加上逗号的方法。

方法1

其次是随机生成一个区间内数值的方法。

区间内随机生成数值

然后是增加step的方法。

增加step

然后是更新页面显示数字的方法。

该方法会接收两个参数，一个表示旧的数字，一个表示新的数字。然后比较新旧数字的每一位，如果相同则不需要变化，如果不同则需要添加一个active类，这个active类就是动画效果。

更新方法

最后是设置定时器，每秒触发一次update方法。

设置定时器

实现代码-CSS

给ul设置一个类number，然后给li设置基本属性，因为要呈水平排列，需要将display设置成inline-block。

基本属性

每个数字在初始状态下都是在translateY(0)的位置，表示旧数字，当数字有变化时，会增加动画效果使translateY从0%变为-100%，表示新数字。

新旧数字属性

最后是实际的动画属性。

动画属性

至此，所有的代码都讲解完毕，在页面运行后就可以达到文字一开始的效果。

结束语

这个效果也不只是这一种实现方法，大家还能想到别的方法吗?

html数字动画效果,原生JavaScript代码实现数字更新的动画效果相关推荐

mysql插入ㄖ_原生JavaScript代码100个实例
1.原生JavaScript实现字符串长度截取 function cutstr(str, len) { var temp; var icount = 0; var patrn = /[^\x00-\x ...
html实现图片加载动画效果,HTML5+javascript实现图片加载进度动画效果
在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个. 图片加载完后,隐藏loading效果. 想看加载效果,请ctrel+F5强制刷新或者清理缓存. 效果预览: 0% 代码如下: ...
加入收藏代码_100个原生JavaScript代码片段知识点详细汇总【实践】
作者:小棋子js 转发链接:https://www.jianshu.com/p/b5171efa340f JavaScript 是目前最流行的编程语言之一,正如大多数人所说:"如果你想学一门 ...
html鼠标平滑滚动效果,JS特效代码 JS动态平滑滚动菜单效果
JS特效代码 JS动态平滑滚动菜单效果 www.css5.net body {cursor:crosshair; background:#111; margin:0; padding:0; posit ...
原生javascript实现图片左右平滑轮播效果（思路分析+代码）
效果截图: 思路: 1 准备工作 1 通过html和css实现图片水平布局(可以在main里面设置overflow=scrollleft,更好的观察图片移动的轨迹) 2 获取需要操作的对象 3 设置 ...
用原生JavaScript实现图片瀑布流的浏览效果
学习JS,活跃思维,灵活运用的一个较为典型的学习案例.同一个瀑布流的效果但实现方式却很多,利用递归.冒泡等等手法都可以达到你想要的目的.这次要说的就是利用类似递归来实现此效果的原创方案.此方案个人认为 ...
animate用法 js原生_用原生Javascript 创建带动画的固顶导航菜单
当我们在网页中加入一个导航菜单的时候,需要考虑很多因素.如何确定它的位置?如何定义样式?还需要保证它具有良好的响应性.又或者你想为它添加一些炫酷的动画.这时你可能会对 jQuery 感兴趣,因为它会帮 ...
原生javascript淡入淡出焦点图 + Jquery实现方法
淡入淡出焦点图效果类这里是缓动焦点图链接: JavaScript 缓动焦点图实现的几种写法封装 + 函数式 + JQuery 焦点图实现思路: 原生JS的类的调用方式: var slider1 ...
你可能不需要 jQuery！使用原生 JavaScript 进行开发
很多的 JavaScript 开发人员,包括我在内,都很喜欢 jQuery.因为它的简单,因为它有很多丰富的插件可供使用,和其它优秀的工具一样,jQuery 让我们开发人员能够更轻松的开发网站和 We ...

html数字动画效果,原生JavaScript代码实现数字更新的动画效果

html数字动画效果,原生JavaScript代码实现数字更新的动画效果相关推荐

最新文章

热门文章