/**
 * 實現(xiàn)數(shù)字滾動的效果的類
 */
class DigitScroll {
  constructor(options) {
    //獲取容器的DOM，沒有則拋出錯誤
    this.container = document.querySelector(options.container);
    if (!this.container) {
      throw Error("no container");
    }
    this.container.style.overflow = "hidden";
    this.container.style.display = "flex";
    //可視容器高度 也是滾動間隔距離,容器要設(shè)置高度，否則默認30px
    this.rollHeight = parseInt(getComputedStyle(this.container).height) || 30;
    this.container.style.height = this.rollHeight + "px";
  }
  roll(num) {
    // 將傳入的要滾動的數(shù)字拆分后初始化每一位數(shù)字的容器
    this.initDigitEle(num);
    const numEles = this.container.querySelectorAll(".single-num");
    // 遍歷生成每一位數(shù)字的滾動隊列，如滾動到7，則生成內(nèi)容為0，1，2，3，4，5，6，7的7個div，用于滾動動畫
    [...numEles].forEach((numEle, index) => {
      const curNum = 0;
      let targetNum = Number(this.numberArr[index]);
      if (curNum >= targetNum) {
        targetNum = targetNum + 10;
      }
      let cirNum = curNum;
      // 文檔碎片，拼湊好后一次性插入節(jié)點中
      const fragment = document.createDocumentFragment();
      // 生成從0到目標數(shù)字對應(yīng)的div
      while (targetNum >= cirNum) {
        const ele = document.createElement("div");
        ele.innerHTML = cirNum % 10;
        cirNum++;
        fragment.appendChild(ele);
      }
      numEle.innerHTML = "";
      numEle.appendChild(fragment);
      //重置位置
      numEle.style.cssText +=
        "-webkit-transition-duration:0s;-webkit-transform:translateY(0)";
      setTimeout(() => {
        numEle.style.cssText += `-webkit-transition-duration:1s;-webkit-transform:translateY(${
          -(targetNum - curNum) * this.rollHeight
        }px);`;
      }, 50);
    });
  }
  // 初始化容器
  initDigitEle(num) {
    // 數(shù)字拆分位數(shù)
    const numArr = num.toString().split("");
    // 文檔碎片，拼湊好后一次性插入節(jié)點中
    const fragment = document.createDocumentFragment();
    numArr.forEach((item) => {
      const el = document.createElement("div");
      // 數(shù)字是要滾動的，非數(shù)字如.是不滾動的
      if (/[0-9]/.test(item)) {
        el.className = "single-num";
        el.style.height = this.rollHeight + "px";
        el.style.lineHeight = this.rollHeight + "px";
      } else {
        el.innerHTML = item;
        el.className = "no-move";
        el.style.verticalAlign = "bottom";
      }
      // el.style.float='left';
      fragment.appendChild(el);
    }, []);
    this.container.innerHTML = "";
    this.container.appendChild(fragment);
    // 存儲滾動的數(shù)字
    this.numberArr = numArr.filter((item) => /[0-9]/.test(item));
  }
}