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

本文介绍如何利用JavaScript实现页面上的数字在指定随机数范围内不断跳动,并在达到预设次数后自动停止定时器。通过优化代码,确保效果流畅。
摘要由CSDN通过智能技术生成
 简单记录一下在工作中用到的随机数操作,今天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.现在就来考虑怎样去改变数字跳动,
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值