好资源导航 » 文章资讯 » js实现数字滚动特效

js实现数字滚动特效

2023-08-04 12:11:05 83

本文实例为大家分享了js实现数字滚动展示的具体代码，供大家参考，具体内容如下

效果图

html代码





Title

js代码

letnumchange=function(){
letpoint='.'
//数字容器高度
letheight=60
//每次滚动距离/滚动速度
letp=3
//数字spanclass
letspanClass='t-num-s'
//数字divclass
letdivClass='t-num'
//
letcache={}
functioncreateDiv(id,num,len,paddingNum){
letstr=''
for(leti=0;i${paddingNum===undefined?num[i]:paddingNum}

` } returnstr } functioninitZero(id,count){ document.getElementById(id).innerHTML=createDiv(id,null,count,0) } functionrefresh(oldNum,newNum,id){ letlen=newNum.length-oldNum.length; for(leti=0;i{ letm=e.scrollTop; m=m+p if(m>h){ clearInterval(t) letcs=e.children for(leti=cs.length-2;i>=0;i--){ e.removeChild(cs[i]) } return } e.scrollTop=m },10) } functioncreateSpan(num){ letspan=document.createElement('span') span.className=spanClass span.innerText=num returnspan } functionappendNum(id,start,end){ letf=document.createDocumentFragment() letcount=0 if(start===end&&isNaN(start)){ return0 } if(isNaN(start)&&!isNaN(end)){ for(leti=0;i<=end;i++){ f.appendChild(createSpan(i)) count++ } document.getElementById(id).appendChild(f) returncount } if(!isNaN(start)&&isNaN(end)){ for(leti=start+1;i<=9;i++){ f.appendChild(createSpan(i)) count++ } f.appendChild(createSpan('.')) count++ document.getElementById(id).appendChild(f) returncount } if(startend){ for(leti=start+1;i<=9;i++){ f.appendChild(createSpan(i)) count++ } for(leti=0;i<=end;i++){ f.appendChild(createSpan(i)) count++ } }else{ return0 } document.getElementById(id).appendChild(f) returncount } /** *@paramid容器id *@paramnum展示的数字 */ functionchange(id,num){ console.log(num) letstrArr=num.toString().split(''); letoldNum=cache[id] //如果没有缓存，开始数字全部填充0 if(!oldNum){ initZero(id,strArr.length) oldNum=[] }else{ oldNum=cache[id].toString().split('') //如果新数字长，原来数字左侧填充0 if(oldNum.lengthstrArr.length){ refresh1(oldNum,strArr,id) } } //循环比较每个数字差异，添加需要滚动的数字列 for(leti=0,len=strArr.length;i0){ //数字滚动 scrollNum(id+i,count,i+1) } } cache[id]=num } functionconfig(param){ if(param.p){ p=param.p } if(param.height){ height=param.height } if(param.spanClass){ spanClass=param.spanClass } if(param.divClass){ divClass=param.divClass } returnscroll } letscroll={ change:change, config:config } returnscroll }

遗留问题：setInterval方法在切换页面后，会变快。解决方案1：用setTimeout代替setInterval。2.requestAnimFrame

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

js实现数字滚动特效

热门推荐

随机推荐