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复制功能调用实现方案
Dec 13 Javascript
js判断IE浏览器版本过低示例代码
Nov 22 Javascript
jQuery实现文本框邮箱输入自动补全效果
Nov 17 Javascript
js实现搜索框关键字智能匹配代码
Mar 26 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
May 30 Javascript
JavaScript基础知识点归纳(推荐)
Jul 09 Javascript
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
vue2.0的虚拟DOM渲染思路分析
Aug 09 Javascript
15个顶级开源JavaScript框架和库
Oct 10 Javascript
JS动画实现回调地狱promise的实例代码详解
Nov 08 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
Oct 17 Javascript
vue实现信息管理系统
May 30 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的MVC模式实现原理分析(一相简单的MVC框架范例)
2014/04/29 PHP
PHP结合jQuery实现找回密码
2015/07/22 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
各种常用浏览器getBoundingClientRect的解析
2009/05/21 Javascript
测试你的JS的掌握程度的代码
2009/12/09 Javascript
BOM与DOM的区别分析
2010/10/26 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
2013/02/26 Javascript
NodeJS与Mysql的交互示例代码
2013/08/18 NodeJs
jQuery+JSON实现AJAX二级联动实例分析
2015/12/18 Javascript
javascript正则表达式之分组概念与用法实例
2016/06/16 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
2020/06/19 Javascript
jQuery事件对象的属性和方法详解
2017/09/09 jQuery
AngularJs 禁止模板缓存的方法
2017/11/28 Javascript
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
vuejs中父子组件之间通信方法实例详解
2020/01/17 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
2020/09/10 Javascript
django限制匿名用户访问及重定向的方法实例
2018/02/07 Python
Django框架使用富文本编辑器Uedit的方法分析
2018/07/31 Python
使用批处理脚本自动生成并上传NuGet包(操作方法)
2019/11/19 Python
python3中sys.argv的实例用法
2020/04/24 Python
python实现在内存中读写str和二进制数据代码
2020/04/24 Python
python中delattr删除对象方法的代码分析
2020/12/15 Python
联想韩国官网:Lenovo Korea
2018/05/10 全球购物
英国玛莎百货美国官网:Marks & Spencer美国
2018/11/06 全球购物
电子商务专业个人的自我评价
2013/12/19 职场文书
2014年最新学习全国两会精神心得
2014/03/17 职场文书
如何写自我鉴定
2014/03/19 职场文书
活动总结格式范文
2014/04/26 职场文书
新教师培训心得体会
2014/09/02 职场文书
作风建设整改方案
2014/10/27 职场文书
数学教师个人总结
2015/02/06 职场文书
实习单位推荐信
2015/03/27 职场文书
入党积极分子半年考察意见
2015/06/02 职场文书
Nginx已编译的nginx-添加新模块
2021/04/01 Servers
pytorch fine-tune 预训练的模型操作
2021/06/03 Python
5个实用的JavaScript新特性
2022/06/16 Javascript