您正在使用IPV4(54.161.98.96)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器 行情 简化版
文明驾车我带头,文明行路我带头,礼貌让座我带头      

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年74元      
[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
2022年 情人节 18
2022年 元宵节 19
2023年 元 旦 339
2022年 春 节 5
 
  • 本类新增
    本类热门文章
    您现在的位置:首页 >> JS/CSS >> 内容
    js实现数字滚动特效
    内容摘要: !DOCTYPEhtmlhtmllang='en'headmetacharset='UTF-8'titleTitle/titlestyle#t,#tt{border:#cccthinsolid;width:250px;height:60px;display:flex;justify-content:space-around;align-items:cente......
    <!DOCTYPEhtml>

    <htmllang="en">

    <head>

    <metacharset="UTF-8">

    <title>Title</title>

    <style>

    #t,#tt{

    border:#cccthinsolid;

    width:250px;

    height:60px;

    display:flex;

    justify-content:space-around;

    align-items:center;

    font-size:20px;

    }

    .t-num{

    height:100%;

    overflow:hidden;

    /*background-color:#ccc;*/

    width:25px;

    line-height:60px;

    text-align:center;

    }

    .t-num-s{

    display:block;

    height:100%;

    width:100%;

    /*border:redthinsolid;*/

    }

    </style>

    </head>

    <body>

    <divid="t">

    </div>

    <divid="tt">

    </div>

    <!--结构示例-->

    <!--<div>-->

    <!--<divclass="divClass"><spanclass="spanclass">1</span></div>-->

    <!--<divclass="divClass"><spanclass="spanclass">2</span></div>-->

    <!--<divclass="divClass"><spanclass="spanclass">3</span></div>-->

    <!--<divclass="divClass"><spanclass="spanclass">4</span></div>-->

    <!--</div>-->

    </body>

    </html>

    <scriptsrc="index.js"></script>

    <script>

    letnum=12345.5

    //配置项p:滚动熟读,height:数字容器的高度,spanclass:数字容器的classname,divClasss:span容器的class

    //numchange.config({p:5}).change('t',num)

    lett=numchange()

    t.change('t',num)

    setInterval(()=>{

    num=Math.random()*100+parseFloat(num)

    num=num.toFixed(2)

    t.change('t',num)

    },3000)

    letnum1=12345

    lett1=numchange()

    t1.change('tt',num1)

    setInterval(()=>{

    num1=parseInt(Math.random()*100)+parseInt(num1)

    t1.change('tt',num1)

    },3000)

    </script>

    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<len;i++){

    str+=`<divclass="${divClass}"id="${id+i}"><spanclass="${spanClass}">${paddingNum===undefined?num[i]:paddingNum}</span></div>`

    }

    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<len;i++){

    oldNum.unshift('0')

    }

    document.getElementById(id).innerHTML=createDiv(id,oldNum,oldNum.length)

    }

    functionrefresh1(oldNum,newNum,id){

    letlen=oldNum.length-newNum.length;

    for(leti=0;i<len;i++){

    oldNum.shift()

    }

    document.getElementById(id).innerHTML=createDiv(id,oldNum,oldNum.length)

    }

    functionscrollNum(id,num,order){

    leth=num*height

    lete=document.getElementById(id)

    lett=setInterval(()=>{

    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(start<end){

    for(leti=start+1;i<=end;i++){

    f.appendChild(createSpan(i))

    count++

    }

    }elseif(start>end){

    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

    [email protected]的数字

    */

    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.length<strArr.length){

    refresh(oldNum,strArr,id)

    //如果新数字短,原来数字左侧移除

    }elseif(oldNum.length>strArr.length){

    refresh1(oldNum,strArr,id)

    }

    }

    //循环比较每个数字差异,添加需要滚动的数字列

    for(leti=0,len=strArr.length;i<len;i++){

    letstart=oldNum[i]!==point?parseInt(oldNum[i]||0):oldNum[i]

    letend=strArr[i]!==point?parseInt(strArr[i]||0):strArr[i]

    letcount=appendNum(id+i,start,end)

    if(count>0){

    //数字滚动

    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

    }

    上一篇:JavaScript实现余额数字滚动效果 下一篇:JavaScript的计时器和按钮效果设置
    发布日期:2021/12/24
    手机扫二维码直达本页
    发布时间:12:35:04
    点击:263
    录入:齐天大圣
    相关文章
    Baidu
    YiJiaCMS 6.1.0.10988 Build 21.12.28(MSSQL) 闽ICP备05000814号-1
    本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护

    Copyright©2000-2022