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 相关文章推荐
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
Mar 08 Javascript
jQuery实现的多选框多级联动插件
May 02 Javascript
javascript使用avalon绑定实现checkbox全选
May 06 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
Feb 17 Javascript
JS简单去除数组中重复项的方法
Sep 13 Javascript
AngularJS前端页面操作之用户修改密码功能示例
Mar 27 Javascript
在一般处理程序(ashx)中弹出js提示语
Aug 16 Javascript
浅谈 vue 中的 watcher
Dec 04 Javascript
React中嵌套组件与被嵌套组件的通信过程
Jul 11 Javascript
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
vue学习之Vue-Router用法实例分析
Jan 06 Javascript
javascript canvas API内容整理
Feb 16 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
咖啡的植物学知识
2021/03/03 咖啡文化
PHP对表单提交特殊字符的过滤和处理方法汇总
2014/02/18 PHP
安装PHP扩展时解压官方 tgz 文件后没有configure文件无法进行配置编译的问题
2020/08/26 PHP
JavaScript监听和禁用浏览器回车事件实例
2015/01/31 Javascript
简介AngularJS中使用factory和service的方法
2015/06/17 Javascript
JS动态添加iframe的代码
2015/09/14 Javascript
jQuery语法小结(超实用)
2015/12/31 Javascript
轻松实现jquery手风琴效果
2016/01/14 Javascript
Bootstrap和Java分页实例第二篇
2016/12/23 Javascript
JS检测是否可以访问公网服务器功能代码
2017/06/19 Javascript
AngularJS实现表格的增删改查(仅限前端)
2017/07/04 Javascript
JavaScript中的return布尔值的用法和原理解析
2017/08/14 Javascript
详解Node全局变量global模块
2017/09/28 Javascript
JS+CSS实现滚动数字时钟效果
2017/12/25 Javascript
实例分析编写vue组件方法
2019/02/12 Javascript
微信小程序websocket聊天室的实现示例代码
2019/02/12 Javascript
vue实现列表拖拽排序的功能
2020/11/02 Javascript
[01:25]2015国际邀请赛最佳短片奖——斧王《拆塔英雄:天赋异禀》
2015/09/22 DOTA
python学习手册中的python多态示例代码
2014/01/21 Python
Python操作列表的常用方法分享
2014/02/13 Python
pycharm 使用心得(六)进行简单的数据库管理
2014/06/06 Python
Python Matplotlib库入门指南
2015/05/18 Python
基于python plotly交互式图表大全
2019/12/07 Python
Python实现井字棋小游戏
2020/03/09 Python
python多进程使用函数封装实例
2020/05/02 Python
如何通过python实现IOU计算代码实例
2020/11/02 Python
python 获取字典键值对的实现
2020/11/12 Python
家得宝官网:The Home Depot(全球最大的家居装饰专业零售商)
2018/12/17 全球购物
婚纱摄影师求职信范文
2014/04/17 职场文书
质量月口号
2014/06/20 职场文书
2014年建筑工作总结
2014/11/26 职场文书
服务员岗位职责范本
2015/04/09 职场文书
信息简报范文
2015/07/21 职场文书
银行大堂经理培训心得体会
2016/01/09 职场文书
Python如何使用循环结构和分支结构
2022/04/13 Python
python神经网络Xception模型
2022/05/06 Python