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 DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
Oct 01 Javascript
javascript将DOM节点添加到文档的方法实例分析
Aug 04 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
Aug 15 Javascript
简单实现轮播图效果的实例
Jul 15 Javascript
基于jQuery实现淡入淡出效果轮播图
Jul 31 Javascript
vue制作加载更多功能的正确打开方式
Oct 12 Javascript
浅谈jquery选择器 :first与:first-child的区别
Nov 20 Javascript
js实现带简单弹性运动的导航条
Feb 22 Javascript
JavaScript面向对象程序设计创建对象的方法分析
Aug 13 Javascript
图解javascript作用域链
May 27 Javascript
JavaScript生成一个不重复的ID的方法示例
Sep 16 Javascript
JS如何实现基于websocket的多端桥接平台
May 14 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
第十三节 对象串行化 [13]
2006/10/09 PHP
火车头discuz6.1 完美采集的php接口文件
2009/09/13 PHP
zend Framework中的Layout(模块化得布局)详解
2013/06/28 PHP
php数组函数array_key_exists()小结
2015/12/10 PHP
PHP程序员的技术成长规划
2016/03/25 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
图片格式的JavaScript和CSS速查手册
2007/08/20 Javascript
javascript网页关键字高亮代码
2008/07/30 Javascript
js静态方法与实例方法分析
2011/07/04 Javascript
多个js毫秒倒计时同时进行效果
2016/01/05 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
2016/04/13 Javascript
JS操作JSON方法总结(推荐)
2016/06/14 Javascript
jquery延迟对象解析
2016/10/26 Javascript
Vue-cli配置打包文件本地使用的教程图解
2018/08/02 Javascript
微信接入之获取用户头像的方法步骤
2019/09/23 Javascript
[49:21]2018DOTA2亚洲邀请赛3月30日 小组赛B组 Effect VS iG
2018/03/31 DOTA
Python列表append和+的区别浅析
2015/02/02 Python
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
SQLite3中文编码 Python的实现
2017/01/11 Python
利用Python3分析sitemap.xml并抓取导出全站链接详解
2017/07/04 Python
python opencv 二值化 计算白色像素点的实例
2019/07/03 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
Python容器类型公共方法总结
2020/08/19 Python
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
FC-Moto丹麦:欧洲最大的摩托车服装和头盔商店之一
2019/08/20 全球购物
Vita Fede官网:在意大利手工制作,在纽约市设计
2019/10/25 全球购物
副厂长岗位职责
2014/02/02 职场文书
《放飞蜻蜓》教学反思
2014/04/27 职场文书
勤俭节约演讲稿
2014/05/08 职场文书
大学生万能检讨书范例
2014/10/04 职场文书
买卖合同协议书范本
2014/10/18 职场文书
工作经历证明书范文
2014/11/02 职场文书
先进个人评语大全
2015/01/04 职场文书
交通事故案件代理词
2015/05/23 职场文书
2015年党风廉政建设个人总结
2015/08/18 职场文书