原生JS实现页面数字在一个随机数区域内跳动 -- 简书

本文链接：https://blog.csdn.net/thankYou_2018/article/details/82260754

本文介绍如何利用JavaScript实现页面上的数字在指定随机数范围内不断跳动，并在达到预设次数后自动停止定时器。通过优化代码，确保效果流畅。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 简单记录一下在工作中用到的随机数操作，今天leader说话了，“在网页上加个虚拟数字，加载时跳动，然后停在某一个随机数区间”。
 这不是很简单吗，本来一个插件就完事。但是闲来无事不如自己写一个。
 话不多说，简单的记录一下自己的代码。
 1.首先给一个id用来控制数据变化
 <p id="num">100</p>


 2.在js中拿到你的id节点
 let num=document.getElementById("num")


 3.采用setInterval定时器，这里需要注意一个细节
    a，在第一次做定时器的时候，我直接这样写了
    setInterval(function(){
        ‘内容’
    },1000)
    b，后来发现，在我中止定时器的时候，不方便操作。所有又let个变量来存储我们的定时器：
     let myTime = setInterval(function(){
        ‘内容’
    },1000)
    c，这里就要想办法怎么停止定时器了,我的做法是在外面var个变量，setInterval执行一次变量+1，知道满足某个次数的时候，clearInterval停止定时器，代码如下：
    var timeRun=0;
    let myTime=setInterval(function(){
    ‘内容’
    timeRun+=1;
    if(timeRun===5){
        clearInterval(myTime)
    }
},100)

这样就把我们的定时器设置好了，并且能让他在执行了n次过后自动停止。

4.现在就来考虑怎样去改变数字跳动，这里要用到随机数。
a.首先要考虑的是怎样去控制随机数的区域，在网上有很多function(min,max)传参进去控制随机数区域的函数，有时间的话可以去看看。在这里由于数据不多，我就直接min，max写了出来。
“改变的数字”=min+Math.round(Math.random*(max-min));
b.怎样去改变p标签里面的数字呢，很简单innerText
num.innerText=min+Math