数字增加滚动动画用原生js实现的多种方案

方案1

<h1 id="numBox"></h1>
<script>function numRunFun(num, maxNum){var numBox = document.getElementById("numBox");var num = num;var maxNum = maxNum;var timer = setInterval(function(){num++;if(num >= maxNum){numBox.innerHTML = maxNum;clearInterval(timer);} else {numBox.innerHTML = ~~(num);}},100);}numRunFun(0, 10);
</script>

方案2

<h1 id="numBox"></h1>
<script>function numRunFun(num, maxNum) {var num = num;var maxNum = maxNum;var numId = document.getElementById("numBox");// 利用setTimeout模拟Intervalfunction numSlideFun(){num++; // 调节速度 可以小数if(num >= maxNum){numId.innerHTML = maxNum;return;}else{numId.innerHTML = ~~(num);setTimeout(function(){ // 利用setTimeout模拟setIntervalreturn numSlideFun();},100);// 也可以调节速度}}numSlideFun();}
</script>

方案3

<h1 id="numBox"></h1>
<script>var numId = document.getElementById("numBox");function NumAutoPlusAnimation(startNum, endNum ) {var step = (endNum - startNum) / 20;//颗粒化可以控制速度var count = startNum;var timer = setInterval(() => {count = count + step;if (count >= endNum) {clearInterval(timer);count = endNum;}numId.innerHTML = count.toFixed(2)}, 30);}NumAutoPlusAnimation(0, 26.88);
</script>

数字增加滚动动画用原生js实现的多种方案相关推荐

js数字金额滚动动画(vue)
vue金额滚动动画效果预览 QQ20190124-0.gif <template><div><div class="head" @click=&qu ...
animate用法 js原生_animate动画、原生JS实现轮播图
写在前面最近在写项目的时候,才发现自己对css3这部分的内容已经生疏了,复习css3的时候,看到animate属性,就用其写了个焦点轮播图,当然自己也用原生JS码了个,当然css3动画无疑是锦上添花 ...
android 横向滚动导航,仿今日头条横向滚动导航栏--原生js
咳咳!先打一波小广告,在上一篇里忘记了,那啥--我的那个个人博客做好了-->(我的博客) 好嘞,言归正传,说说我们的效果. 其实就是实现横向滑动,进行选择. 原理: 鼠标按下,获取当前鼠标坐标, ...
html js 动画效果,原生js html5 canvas 3D云动画效果
特效描述:原生js html5canvas 3D云动画效果.3D云效果,叼炸天!可用鼠标控制方向!本地要localhost才能正常演示代码结构 1. 引入JS 2. HTML代码 varying v ...
html 下拉滚动加载,原生js滚动到底部加载数据和下拉刷新 Scrollload
初衷如今移动端站点越来越多,滚动到底部加载数据和下拉刷新的需求非常的常见,即使现在很多pc站点也会有这样的需求,比如百度首页就有.虽然简单的完成这么一个功能非常方便,但是滚动往往会成为性能的瓶颈,处 ...
web前端：canvas画布，飞鸟动画，原生js
1.效果图 2.less * {margin: 0;padding: 0;#wrap {width: 600px;height: 800px;background: tomato;border: 2p ...
js判断类型为数字的方法实现总汇——原生js判断isNumber()
方法一[推荐]: 最容易想到的是用typeof来判断是否是number类型 ,但是如果为NaN会被认为也是number类型,因此我们需要使用isNaN来排除NaN的情况. function isNum ...
vue实现数字增加减少动画
一 npm install vue-count-to 二 <template> <div> <span><countTo :startVal='s ...
微信小程序使用数字滚动动画
实现思路为了实现数字的无限滚动效果,每个数字框的内部,其实包含了两组0~9的view,每个View的高度都一样数字框内使用绝对定位,通过调整top位置,显示出指定的数字使用transtion动画 ...

数字增加滚动动画用原生js实现的多种方案

数字增加滚动动画用原生js实现的多种方案相关推荐

最新文章

热门文章