js实现数字滚动特效


Posted in Javascript onDecember 16, 2019

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

效果图

js实现数字滚动特效

html代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #t,#tt{
      border: #ccc thin solid;
      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: red thin solid;*/
    }
  </style>
</head>
<body>
  <div id="t">
 
  </div>
  <div id="tt">
 
  </div>
  <!--结构示例-->
  <!--<div>-->
    <!--<div class="divClass"><span class="spanclass">1</span></div>-->
    <!--<div class="divClass"><span class="spanclass">2</span></div>-->
    <!--<div class="divClass"><span class="spanclass">3</span></div>-->
    <!--<div class="divClass"><span class="spanclass">4</span></div>-->
  <!--</div>-->
</body>
</html>
<script src="index.js"></script>
<script>
  let num = 12345.5
  //配置项 p:滚动熟读,height:数字容器的高度,spanclass:数字容器的classname,divClasss: span容器的class
  // numchange.config({p: 5}).change('t', num)
  let t = numchange()
  t.change('t', num)
  setInterval(() => {
    num = Math.random() * 100 + parseFloat(num)
    num = num.toFixed(2)
    t.change('t', num)
  },3000)
 
 
  let num1 = 12345
  let t1 = numchange()
  t1.change('tt', num1)
  setInterval(() => {
    num1 = parseInt(Math.random() * 100) + parseInt(num1)
    t1.change('tt', num1)
  },3000)
</script>

js代码

let numchange = function (){
  let point = '.'
  // 数字容器高度
  let height = 60
  // 每次滚动距离/滚动速度
  let p = 3
  // 数字spanclass
  let spanClass = 't-num-s'
  // 数字divclass
  let divClass = 't-num'
//
  let cache = {}
  function createDiv(id, num, len, paddingNum){
    let str = ''
    for (let i = 0; i < len; i++) {
      str += `<div class="${divClass}" id="${id+i}"><span class="${spanClass}">${paddingNum === undefined?num[i]:paddingNum}</span></div>`
    }
    return str
  }
  function initZero(id, count){
    document.getElementById(id).innerHTML = createDiv(id,null,count,0)
  }
  function refresh(oldNum, newNum, id){
    let len = newNum.length - oldNum.length;
    for (let i = 0; i < len; i++) {
      oldNum.unshift('0')
    }
    document.getElementById(id).innerHTML = createDiv(id,oldNum,oldNum.length)
  }
  function refresh1(oldNum, newNum, id){
    let len = oldNum.length - newNum.length;
    for (let i = 0; i < len; i++) {
      oldNum.shift()
    }
    document.getElementById(id).innerHTML = createDiv(id,oldNum,oldNum.length)
  }
  function scrollNum(id, num, order){
    let h = num * height
    let e = document.getElementById(id)
    let t = setInterval(() => {
      let m = e.scrollTop;
      m = m + p
      if(m > h){
        clearInterval(t)
        let cs = e.children
        for (let i = cs.length-2; i >= 0; i--) {
          e.removeChild(cs[i])
        }
        return
      }
      e.scrollTop = m
    }, 10)
  }
  function createSpan(num){
    let span = document.createElement('span')
    span.className = spanClass
    span.innerText = num
    return span
  }
  function appendNum(id, start, end){
    let f = document.createDocumentFragment()
    let count = 0
    if(start === end && isNaN(start)){
      return 0
    }
    if(isNaN(start) && !isNaN(end)){
      for (let i = 0; i <= end; i++) {
        f.appendChild(createSpan(i))
        count++
      }
      document.getElementById(id).appendChild(f)
      return count
    }
    if(!isNaN(start) && isNaN(end)){
      for (let i = start+1; i <= 9; i++) {
        f.appendChild(createSpan(i))
        count++
      }
      f.appendChild(createSpan('.'))
      count++
      document.getElementById(id).appendChild(f)
      return count
    }
    if(start < end){
      for (let i = start+1; i <= end; i++) {
        f.appendChild(createSpan(i))
        count++
      }
    }else if(start > end){
      for (let i = start+1; i <= 9; i++) {
        f.appendChild(createSpan(i))
        count++
      }
      for (let i = 0; i <= end; i++) {
        f.appendChild(createSpan(i))
        count++
      }
    }else{
      return 0
    }
    document.getElementById(id).appendChild(f)
    return count
  }
 
  /**
   * @param id 容器id
   * @param num 展示的数字
   */
  function change(id, num){
    console.log(num)
    let strArr = num.toString().split('');
    let oldNum = 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)
        // 如果新数字短,原来数字左侧移除
      }else if(oldNum.length > strArr.length){
        refresh1(oldNum, strArr, id)
      }
    }
    // 循环比较每个数字差异,添加需要滚动的数字列
    for (let i = 0, len = strArr.length; i < len; i++) {
      let start = oldNum[i] !== point ? parseInt(oldNum[i]||0) : oldNum[i]
      let end = strArr[i] !== point ? parseInt(strArr[i]||0) : strArr[i]
      let count = appendNum(id+i, start, end)
      if(count > 0){
        // 数字滚动
        scrollNum(id+i, count, i+1)
      }
    }
    cache[id] = num
  }
 
  function config(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
    }
    return scroll
  }
 
  let scroll = {
    change: change,
    config: config
  }
  return scroll
}

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Array.prototype 的泛型应用分析
Apr 30 Javascript
js对象的比较
Feb 26 Javascript
改变隐藏的input中value的值代码
Dec 30 Javascript
node.js中的http.createServer方法使用说明
Dec 14 Javascript
JS实现图片放大镜效果的方法
Feb 27 Javascript
js显示文本框提示文字的方法
May 07 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
Dec 02 Javascript
老生常谈js-react组件生命周期
May 02 Javascript
bootstrap表单示例代码分享
May 18 Javascript
Vue中的作用域CSS和CSS模块的区别
Oct 09 Javascript
微信小程序实现点击页面出现文字
Sep 21 Javascript
JavaScript 实现页面滚动动画
Apr 24 Javascript
NUXT SSR初级入门笔记(小结)
Dec 16 #Javascript
js实现内置计时器
Dec 16 #Javascript
js实现秒表计时器
Dec 16 #Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
Dec 16 #Javascript
js实现计时器秒表功能
Dec 16 #Javascript
原生Vue 实现右键菜单组件功能
Dec 16 #Javascript
axios如何取消重复无用的请求详解
Dec 15 #Javascript
You might like
关于PHP中的Class的几点个人看法
2006/10/09 PHP
php实现的日历程序
2015/06/18 PHP
基于php实现的php代码加密解密类完整实例
2016/10/12 PHP
laravel-admin 在列表页添加自定义按钮的例子
2019/09/30 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
PHP如何通过带尾指针的链表实现'队列'
2020/10/22 PHP
cnblogs 代码高亮显示后的代码复制问题解决实现代码
2011/12/14 Javascript
基于JavaScript实现Tab选项卡切换效果
2016/11/24 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
2017/01/22 Javascript
浅谈键盘上回车按钮的js触发事件
2017/02/13 Javascript
js canvas实现擦除效果示例代码
2017/04/26 Javascript
详解用node编写自己的cli工具
2017/05/23 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
2018/09/22 Javascript
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
ES6小技巧之代替lodash
2019/06/07 Javascript
vue element 生成无线级左侧菜单的实现代码
2019/08/21 Javascript
简单分析js中的this的原理
2019/08/31 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
2019/10/21 Javascript
vue登录以及权限验证相关的实现
2019/10/25 Javascript
使用webpack搭建pixi.js开发环境
2020/02/12 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
2020/11/11 Javascript
浅析Python中的多进程与多线程的使用
2015/04/07 Python
Python中的进程分支fork和exec详解
2015/04/11 Python
Python导入oracle数据的方法
2015/07/10 Python
tensorflow实现softma识别MNIST
2018/03/12 Python
python selenium实现发送带附件的邮件代码实例
2019/12/10 Python
Python实时监控网站浏览记录实现过程详解
2020/07/14 Python
基于html5绘制圆形多角图案
2016/04/21 HTML / CSS
美国大型的健身社区和补充商店:Bodybuilding.com
2016/09/06 全球购物
世界上最好的儿童品牌:AlexandAlexa
2018/01/27 全球购物
餐饮部总监岗位职责范文
2014/02/13 职场文书
装配出错检讨书
2014/09/23 职场文书
党员检讨书范文
2014/12/27 职场文书
优秀班干部主要事迹材料
2015/11/04 职场文书
导游词之青岛崂山
2019/12/27 职场文书
电脑开机弹出documents文件夹怎么回事?弹出documents文件夹解决方法
2022/04/08 数码科技