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
  • 相关阅读:
    Linux 笔记:文件名
    Linux 一些有用的能力
    理解Linux内核注释
    Linux 的三种软件安装包介绍
    idea 2019 激活
    wget免登陆下载jdk 8u221
    PowerDesigner每点击一次就会提示打印错误对话框
    FormData使用方法详解
    springboot:配置多个数据源
    CSS3绘制不规则图形,代码收集
  • 原文地址:https://www.cnblogs.com/shewill/p/14557345.html
Copyright © 2011-2022 走看看