滚动的数字栏

2019-07-04

上次偶尔看到不知是哪一个大佬写的一个后台页面中, 感觉她那个金额一直刷刷的往上涨, 当然是带有动画那种. 感觉挺炫酷的, 正好在过几天我也需要以一个后台的页面, 具体内容虽然还没出来, 但是我可以先做一个这个简单的dome.

第一步当然是需求分析辣, 一个数字不断滚动增加的数据, 然后呢还待小数点, 每隔三位再带一个逗号
数字滚动的话, 我首先就想到通过限定高度div内嵌超高ul, 然后每一个li就是一个数字, 算好相对的高度, 每次给ul一个translateY的动画,至于动画? 那就直接上css3的transition:all; Oj8k, 大致情况就是这样子咯, 接下来当时是激动人心的代码实现环节咯.

既然是一个功能, 那我们当然要封装一个函数去控制咯, 既然现在是面向对象的时代, 那还是直接封装一个对象吧.首先呢, new一个对象,再给一些配置参数辣. 我看看我们需要一些什么东西可以配置呢? 需要给一个容器元素, 字体的大小, 然后数字的长度, 动画的时间. ok就这几个配置了

function scrollNum(option){
  // 这里看看传进来的是对象还是其他东西
  typeof option !== "object" && option={ele:option}
  // 这里来一个默认配置辣, 当然传进来的优先级高点, 可以覆盖前面的
  option = {size =50, len = 10,s=6,...option}
  // 没有给顶指定元素, 那简单啊, 直接给你报错呗
  option.ele = document.getElementById(option.ele)
  if(!option.ele) throw new Error('请传入可用的元素id')

初始化嘛, 当然要把我们的内容给渲染到屏幕上去了, 我们先来渲染len位数字出来呗

let template = ''
// 一个数子 从0 - 9
let t = '<div class="scroll-item"><ul>'
for(let i = 0; i<10; i++){
  t += '<li>'+i+'<li>'
}
t+='</ul></div>'
// len 个数字
for(let i = 0; i<len; i++){
  // 这里有两位小数点辣
  if(i===(len-2)) template+='<span>.</span>'
  // 这里除开两位小数点, 然后没三位加一个逗号
  else (i-2)%3 === 0&&(template+='<span>,</span>')
  template +=t
}
ele.innerHTML = template
// 把每一位都给return 出去
return document.querySelectorAll('.scroll-item>ul')

渲染好以后, 我们就可以开始指挥她滚动到指定位置了

1 2	// 给定一个位置, 然后让他滚动到多少 scrollItem[index].style.transform = 'translateY(-'+num+'em)'

上面实现的是滚动一位数的, 我们一版都是几十位的数据, 怎么能滚动一位一位嘛, 下面就来实现滚动到指定数据

// 给定一个位置, 然后让他滚动到多少
  // 先对传过来的数据整理一下, 弄成浮点性,再进行切割操作
  num = parseFloat(num).toFixed(2).replace(/\./g,'').split('')
  let j = this.len - num.length
  // 这里我们倒着来循环遍历一下, 因为
  for(let i = num.length-1; i >= 0; i--){
    // 滚动 指定位数
    this.scrollNum(i+j,num[i])
  }

大概的效果都已经实现了, 但是我们还需要定义一下css样式嘛

1
2
3

let style = document.createElement("style");
style.innerHTML=`*{margin: 0;padding: 0;}#${ele}{width:${len*size}px;font-family: Comic Sans MS;height:${size}px;display:flex;align-items:flex-end;font-size:${size}px;color:#fff;text-align:center}#${ele} .scroll-item{height:100%;flex:1;overflow:hidden}#${ele} ul{transition:all .${s}s ease}#${ele} li{line-height:${size}px}`
document.head.appendChild(style)

最好我们再把scrollTo抛出, 丢给外部

function scrollNum(option){
  // 这里看看传进来的是对象还是其他东西
  typeof option !== "object" && (option = {ele:option})
  // 这里来一个默认配置辣, 当然传进来的优先级高点, 可以覆盖前面的
  option = {size: 50, len: 10,s: 6,...option}
  // 没有给顶指定元素, 那简单啊, 直接给你报错呗
  if(!option.ele) throw new Error('请传入可用的元素id')
  // 参数丢给init初始化
  const { ele, size, len, s } = option;
  (()=>{
    let style = document.createElement("style");
    style.innerHTML=`*{margin: 0;padding: 0;}#${ele}{width:${len*size}px;font-family: Comic Sans MS;height:${size}px;display:flex;align-items:flex-end;font-size:${size}px;color:#fff;text-align:center}#${ele} .scroll-item{height:100%;flex:1;overflow:hidden}#${ele} ul{transition:all .${s}s ease}#${ele} li{line-height:${size}px}`
    document.head.appendChild(style)
  })()
  function initItem (){
    let template = ''
    // 一个数子 从0 - 9
    let t = '<div class="scroll-item"><ul>'
    for(let i = 0; i<10; i++){
      t += '<li>'+i+'</li>'
    }
    t+='</ul></div>'
    // len 个数字
    for(let i = 0; i<len; i++){
      // 这里有两位小数点辣
      if(i===(len-2)) template+='<span>.</span>'
      // 这里除开两位小数点, 然后没三位加一个逗号
      else (i-2)%3 === 0&&(template+='<span>,</span>')
      template +=t
    }
    document.getElementById(ele).innerHTML = template
    // 把每一位都给return 出去
    return document.querySelectorAll('.scroll-item>ul')
  }
  function scrollNum (index,num){
    return scrollItem[index].style.transform = 'translateY(-'+num+'em)'
  }
  // 给定一个位置, 然后让他滚动到多少
  function scrollTo (num){
    // 先对传过来的数据整理一下, 弄成浮点性,再进行切割操作
    num = parseFloat(num).toFixed(2).replace(/\./g,'').split('')
    let j = len - num.length
    // 这里我们倒着来循环遍历一下, 因为
    for(let i = num.length-1; i >= 0; i--){
      // 滚动 指定位数
      scrollNum(i+j,num[i])
    }
  }
  const scrollItem = initItem(ele, len)
  return scrollTo
}

大概也就这样子咯, 如果想要一直随机加数据的话, 直接弄一个setInterval就行

let t = scrollNum("scroll"), d = 10086
setInterval(()=>{
  t(d+=Math.random()*66)
},1500)

写的比较丑, 见谅