js实现数字跳动到指定数字

2024-08-09 17:10:46

本文实例为大家分享了js实现数字跳动到指定数字的具体代码，供大家参考，具体内容如下

运行结果如下：

<!DOCTYPE html>
 <head>
 <title>js实现数字跳动到指定数字</title>
 <style>
  h1 {font-size: 150px;text-align:center;}
  p {text-align:center;}
  button {font-size:40px;}
 </style>
 </head>
 <body>
 <h1 id="number">0</h1>
 <p>
  <button onclick="start()">开始计数</button>
 </p>
 </body>
 <script>
 /*
 * startNum 代表要跳动的初始数字
 * targetNum 代表要跳动到的数字
 * time  代表要跳动需要花费的时间
 * selector 代表要跳动元素的选择器
 */
 const $setJumpNumber = (startNum, targetNum, time = 1, selector) => {
  let dom = document.querySelector(selector);
  let originNum = startNum;
  let stepNum = 0;
  let timeNum = time;
  dom.innerHTML = startNum;

  let timeId = setInterval(() => {
  if (originNum < targetNum) {
   timeNum -= 0.001;
   let strNum = originNum.toString();
   // 数字比较少的时候直接用 + 1; 数字很大直接 +1 要很久才能调到最对应的数字，所有后三位数随机跳动的方式进行模拟生成
   if (targetNum.toString().length < 6) {
   stepNum += 1; // 这样才可以实现越跳越快的效果
   originNum = originNum + stepNum;
   dom.innerHTML = originNum;
   } else {
   stepNum += 500; // 这样才可以实现越跳越快的效果
   originNum = originNum + stepNum;
   dom.innerHTML = strNum.substr(0, strNum.length - 3) + Math.floor(Math.random()*10) + Math.floor(Math.random()*10) + Math.floor(Math.random()*10);
   }
  } else {
   dom.innerHTML = targetNum;
   clearInterval(timeId);
  }
  }, timeNum);
 };

 function start () {
  $setJumpNumber(11, 218983423, 1, 'h1');
 };

 </script>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

JavaScript 抽奖效果实现代码数字跳动版

JavaScript实现的抽奖效果数字跳动版 .a1 {}{ position: relative; font-family: Verdana; font-size: 200px; color: #888888; } function Lottery() { var Nos = Math.round(Math.random() * (4999 - 1) + 1); var result = document.getElementById("layer1"); if (result !
js实现数字跳动到指定数字

本文实例为大家分享了js实现数字跳动到指定数字的具体代码,供大家参考,具体内容如下运行结果如下: <!DOCTYPE html> <head> <title>js实现数字跳动到指定数字</title> <style> h1 {font-size: 150px;text-align:center;} p {text-align:center;} button {font-size:40px;} </style> </head&g
js实现数字从零慢慢增加到指定数字示例

最近的学习项目中需要一个数字从0慢慢增加到指定数字,然后想了好久才做出来.一开始是想用循环做,循环里面用delay(),但是发现不太好用(可能是我不会用),然后想用循环里面套setTimeout,后来发现不行,一番百度之后发现setTimeout是异步的,等setTimeout的时候数字自增已经执行了n遍,完全不出效果,最后想了很久想出一个笨方法,自己也是想了蛮久的,怕忘记,所以写在博客上. 嘿嘿!第一次写博客,请大佬们多多指导直接贴出代码: css样式随便设: <style type="
JS实现生成由字母与数字组合的随机字符串功能详解

本文实例讲述了JS实现生成由字母与数字组合的随机字符串功能.分享给大家供大家参考,具体如下: 在项目中可能需要随机生成字母数字组成的字符,如生成3-32位长度的字母数字组合的随机字符串(位数不固定)或者生成43位随机字符串(位数固定) 使用Math.random()与toString()方法的结合先看一下这个方式: Math.random().toString(36); 结果: 0.9kfiead48n toString后的参数规定可以是2-36之间的任意整数,不写的话默认是10(也就是十进制
js实现一个逐步递增的数字动画

目录背景实现类似滚轮的效果,容器固定,数字向上滚动利用两个元素实现滚动利用H5的requestAnimationFrame()API实现数字逐步递增的动画效果计时器对比 requestAnimationFrame实现滚动动画思路成果展示背景可视化大屏项目使用最多的组件就是数字组件,展示数据的一个变化,为了提高视觉效果,需要给数字增加一个滚动效果,实现一个数字到另一个数字逐步递增的滚动动画. 先上一个思维导图: 实现类似滚轮的效果,容器固定,数字向上滚动先列举所有的可能的值形成一
js控制文本框只输入数字和小数点的方法

本文实例讲述了js控制文本框只输入数字和小数点的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: function clearNoNum(obj) { obj.value = obj.value.replace(/[^\d.]/g, "");//清除"数字"和"."以外的字符 obj.value = obj.value.replace(/^\./g, "");//验证第一个字符是数字而不是. obj.
Android实现数字跳动效果的TextView方法示例

前言本文介绍的是Android如何实现数字跳动效果的TextView,主要运用了DancingNumberView,DancingNumberView是一个用于跳动显示文本中数字的控件,继承自TextView,这种控件一般用于显示金额等对用户较为敏感的数字,让UI交互更加生动. 它具有以下几点特性: 自动获取文本中的所有数字,并同时开始跳动,免去多个TextView拼接的麻烦支持数字按照自定义的格式显示,例如限定只显示小数点后两位效果图如下导入使用 Gradle 第1步,在project
oracle 重置序列从指定数字开始的方法详解

重置oracle序列从指定数字开始复制代码代码如下: declare n number(10); v_startnum number(10):=10000001;--从多少开始 v_step number(10):=1;--步进 tsql varchar2(200); v_seqname varchar2(200):='MIP_JF_SEQUENCE';--序列名 begin execute immediate 'select '||v_seqname||'.nextval from dua
js实现在字符串中提取数字

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ
php 从指定数字中获取随机组合的简单方法(推荐)

例如:给定数字100,需要随机获取3个组成这个数字的组合,例如70,20,10 代码如下: <?php /** * 获取指定数字的随机数字组合 * @param Int $var 数字 * @param Int $num 组合这个数字的数量 * @return Array */ function getNumGroups($var, $num){ // 数量不正确 if($var<$num){ return array(); } $total = 0; $result = array(); f

js实现数字跳动到指定数字

相关推荐

随机推荐