zoukankan      html  css  js  c++  java
  • js实现从0到指定数据的跳动

    有时候前端需要实现数据跳动效果

    const $setJumpNum = (startNum,targetNum,time=1,selector) =>{
            var dom = document.querySelector(selector)
            var originNum = startNum
            var stepNum = 0
            var timeNum = time
            dom.innerHTML = startNum;
    
            let timeId = setInterval(()=>{
                if(originNum < targetNum) {
                    timeNum -=0.001;
                    let strNum = originNum.toString()
                    // 由于数字很大直接+1要很久才能调到对应数字,所有后三位数随机生成
                    if(targetNum.toString.length < 6){
                        stepNum += 1 //这样可以实现越跳越快的效果
                        originNum = originNum + stepNum;
                        dom.innerHTML = originNum
                    } else {
                        stepNum += 500 //实现大数越跳越快
                        originNum = originNum + stepNum
                        // 不直接处理originNum,交给strNum处理大数跳动的数值
                        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(data){
            $setJumpNum(0,data.Policy,60,'.zc')
            $setJumpNum(0,data.ClinicalTestCount,1,'.lcsy')
            $setJumpNum(0,data.InciteList,60,'.gl')
            $setJumpNum(0,data.DrugCount,1,'.china')
            $setJumpNum(0,data.NDC ,1,'.usa')
            $setJumpNum(0,data.DiseaseClinicalGuidelines,40,'.lczn')
        }
    start
  • 相关阅读:
    車(rook)
    那些年,我们学过的文化课
    皇后(queen)
    蚂蚁运输(ant)
    [Z]CS权威会议
    [Z] 北大一牛人生物转申CS的经历
    TLS协议扫盲(握手,非对称加密,证书,电子签名等)
    关于SSE的一些资料
    Java下LDAP操作的资料
    [Z] Windbg以及vs debug使用
  • 原文地址:https://www.cnblogs.com/shewill/p/14557345.html
Copyright © 2011-2022 走看看