有时候前端需要实现数据跳动效果
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