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 相关文章推荐
如何用ajax来创建一个XMLHttpRequest对象
Dec 10 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
Feb 21 Javascript
基于javascript实现动态时钟效果
Aug 18 Javascript
js从外部获取图片的实现方法
Aug 05 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
Jan 05 Javascript
详解vue父子模版嵌套案例
Mar 04 Javascript
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
Mar 02 Javascript
详解vue为什么要求组件模板只能有一个根元素
Jul 22 Javascript
详解基于Vue的支持数据双向绑定的select组件
Sep 02 Javascript
vuecli项目构建SSR服务端渲染的实现
Oct 30 Javascript
Vue实现省市区三级联动
Dec 27 Vue.js
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与MySQL开发中页面乱码的产生与解决
2008/03/27 PHP
php微信公众号开发(2)百度BAE搭建和数据库使用
2016/12/15 PHP
Mac下快速搭建PHP开发环境步骤详解
2019/05/05 PHP
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
2010/04/14 Javascript
让ie运行js时提示允许阻止内容运行的解决方法
2010/10/24 Javascript
showModelDialog弹出文件下载窗口的使用示例
2013/11/19 Javascript
JS特效实现图片自动播放并可控的效果
2015/07/31 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
2016/08/24 Javascript
JavaScript中push(),join() 函数 实例详解
2016/09/06 Javascript
canvas实现刮刮卡效果
2017/03/14 Javascript
原生JS+Canvas实现五子棋游戏实例
2017/06/19 Javascript
一文让你彻底搞清楚javascript中的require、import与export
2017/09/24 Javascript
基于JavaScript canvas绘制贝塞尔曲线
2018/12/25 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
2019/08/02 Javascript
解决新建一个vue项目过程中遇到的问题
2020/10/22 Javascript
详解Vue数据驱动原理
2020/11/17 Javascript
python测试驱动开发实例
2014/10/08 Python
详解Python实现多进程异步事件驱动引擎
2017/08/25 Python
对Python 数组的切片操作详解
2018/07/02 Python
对python周期性定时器的示例详解
2019/02/19 Python
Python定义函数功能与用法实例详解
2019/04/08 Python
Python中的asyncio代码详解
2019/06/10 Python
python模式 工厂模式原理及实例详解
2020/02/11 Python
TensorFlow打印输出tensor的值
2020/04/19 Python
爱淘宝:淘宝网购物分享平台
2017/04/28 全球购物
Amcal中文官网:澳洲综合性连锁药房
2019/03/28 全球购物
担保书格式及范文
2014/04/01 职场文书
2014年感恩母亲演讲稿
2014/05/27 职场文书
教师年终个人总结
2015/02/11 职场文书
2015年征兵工作总结
2015/07/23 职场文书
升学宴来宾致辞
2015/07/27 职场文书
特种设备安全管理制度
2015/08/06 职场文书
mysql部分操作
2021/04/05 MySQL
在K8s上部署Redis集群的方法步骤
2021/04/27 Redis
python 使用tkinter与messagebox写界面和弹窗
2022/03/20 Python
Python OpenCV形态学运算示例详解
2022/04/07 Python