无缝滚动表格、数字定时滚动组件封装(div+js)

tableRun组件

<template>
  <div id="table_scroll">
    <div class="table_header">
      <div
        class="head_td"
        v-for="(item, index) in headLists"
        :key="index"
        :style="own_width(item.width)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="table_main">
      <div
        class="table_box"
        @mouseenter.stop="mouseover"
        @mouseleave.stop="mouseout"
      >
        <div class="table_row" v-for="(item, index) in listTrue" :key="index">
          <div
            class="table_td"
            v-for="(item_td, index) in headLists"
            :key="index"
            :style="own_width(item_td.width)"
          >
            {{ item[item_td.value] }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "tableRun",
  props: {
    hideString: {
      type: Array,
      default: function () {
        return ["zjhm", "lxhm"];
      },
    },
    headLists: {
      type: Array,
      default: function () {
        return [];
      },
    },
    dataLists: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  data() {
    return {
      timer: null,
    };
  },
  computed: {
    listTrue() {
      let lists = this.dataLists;
      let hideOne = this.hideString[0];
      let hideTwo = this.hideString[1];
      lists.map((item) => {
        if (item[hideOne] && item[hideTwo]) {
          item[hideOne] =
            item[hideOne].substring(0, 4) +
            "**********" +
            item[hideOne].substring(
              item[hideOne].length - 4,
              item[hideOne].length
            );
          item[hideTwo] =
            item[hideTwo].substring(0, 3) +
            "****" +
            item[hideTwo].substring(
              item[hideTwo].length - 4,
              item[hideTwo].length
            );
          return item;
        }
      });
      if (this.dataLists.length <= 14) return this.dataLists;
      lists.push({});
      return lists.concat(lists);
    },
    own_width() {
      return function (param) {
        if (!param) {
          return {};
        }
        return {
           param,
          flex: "none!important",
        };
      };
    },
  },
  mounted() {
    if (this.dataLists.length <= 14) return;
    this.go();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    goscroll() {
      let table_main = document.getElementsByClassName("table_main")[0];
      let table_box = document.getElementsByClassName("table_box")[0];
      if (table_main.scrollTop >= table_box.scrollHeight / 2) {
        table_main.scrollTop = 0;
      } else {
        table_main.scrollTop++;
      }
    },
    go() {
      if (this.timer) {
        clearInterval(this.timer);
      }
      this.timer = setInterval(this.goscroll, 10);
    },
    mouseover() {
      clearInterval(this.timer);
      console.log("over");
    },
    mouseout() {
      this.go();
      console.log("out");
    },
  },
};
</script>

<style lang="less" scoped>
#table_scroll {
   100%;
  .table_header {
     100%;
    height: 61px;
    background-color: #244479;
    color: #fff;
    display: flex;
    .head_td {
      font-size: 18px;
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .table_main {
     100%;
    height: 826px;
    background-color: black;
    overflow: scroll;
    .table_box {
       100%;
      background-color: gray;
      .table_row {
         100%;
        height: 59px;
        display: flex;
        .table_td {
          font-size: 18px;
          color: #fff;
          flex: 1;
        }
      }
    }
  }
}

// 隐藏滚轮
::-webkit-scrollbar {
  display: none;
}

// table row style
.table_box .table_row:nth-child(even) {
  // background-color: #244479;
  background-color: rgba(36, 68, 121, 0.4);
}
.table_box .table_row:nth-child(odd) {
  // background-color: #244479;
  background-color: rgba(36, 68, 121, 0.2);
}

// table td center
.table_td {
  display: flex;
  justify-content: center;
  align-items: center;
}
.own_width {
   200px;
  flex: none !important;
}
</style>

numRun组件

<template>
  <div id="run_num">
    <div class="run_left" :style="leftBck">
      <div class="four_before">
        <div
          class="num_scroll"
          v-for="(item, index) in clocks_left"
          :key="index"
        >
          <span v-if="!isNaN(item)">
            <i ref="numRef_left"
              ><span
                v-for="(iItem_before, iIndex_before) in iArray_before"
                :key="iIndex_before"
                >{{ iItem_before }}</span
              ></i
            >
          </span>
          <span v-else>{{ item }}</span>
        </div>
      </div>
      <div class="star_icon">
        <span class="star_span" v-for="(item, index) in starList" :key="index"
          >*</span
        >
      </div>
      <div class="four_after">
        <div
          class="num_scroll"
          v-for="(item, index) in clocks_right"
          :key="index"
        >
          <span v-if="!isNaN(item)">
            <i ref="numRef_right"
              ><span v-for="(iItem, iIndex) in iArray" :key="iIndex">{{
                iItem
              }}</span></i
            >
          </span>
          <span v-else>{{ item }}</span>
        </div>
      </div>
    </div>
    <div class="run_right" :style="rightBck" v-if="num_type === 'address'">
      <div
        class="num_scroll"
        v-for="(item, index) in clocks_house"
        :key="index"
      >
        <span v-if="!isNaN(item)">
          <i ref="numRef"
            ><span v-for="(iItem, iIndex) in iArray" :key="iIndex">{{
              iItem
            }}</span></i
          >
        </span>
        <span v-else>{{ item }}</span>
      </div>
    </div>
    <div
      class="run_right_other"
      :style="rightBckXh"
      v-if="num_type === 'index'"
    >
      <div class="run_right_index"><span>序</span><span>号</span></div>
      <div
        class="num_scroll"
        v-for="(item, index) in clocks_index"
        :key="index"
      >
        <span v-if="!isNaN(item)">
          <i ref="numRef"
            ><span v-for="(iItem, iIndex) in iArray" :key="iIndex">{{
              iItem
            }}</span></i
          >
        </span>
        <span v-else>{{ item }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  watch: {
    num_scroll: {
      handler: function (val) {
        console.log(val);
        this.setNumberTransform_house(val.param);
        this.setNumberTransform(val.sfz_start, val.sfz_end);
      },
      deep: true,
    },
  },
  props: {
    num_type: {
      type: String,
      default: "address",
    },
    num_scroll: {
      type: Object,
      default: function () {
        return { sfz_start: "1111", sfz_end: "1111", param: "000000" };
      },
    },
  },
  data() {
    return {
      leftBck: {
        // backgroundImage: "url(" + require("../assets/sfz.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%,cover",
      },
      rightBck: {
        // backgroundImage: "url(" + require("../assets/fh.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%,cover",
      },
      rightBckXh: {
        // backgroundImage: "url(" + require("../assets/xh.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%,cover",
      },
      clocks_left: [0, 0, 0, 0],
      clocks_right: [0, 0, 0, 0],
      clocks_house: [0, "-", 0, "-", 0, "-", 0, 0, 0],
      clocks_index: [0, 0, 0, 0],
      starList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      iArray: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
      iArray_before: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
    };
  },
  mounted() {},
  methods: {
    setNumberTransform(count1, count2) {
      // 空位补齐
      let newNumber1 = this.PrefixZero(count1, 4);
      let newNumber2 = this.PrefixZero(count2, 4);
      let items_left = this.$refs.numRef_left;
      let items_right = this.$refs.numRef_right;
      for (let i = 0; i < items_left.length; i++) {
        let el_left = items_left[i];
        // 兼容浏览器
        el_left.style.transform = `translate(-50%, -${newNumber1[i] * 10}%)`;
        el_left.style.transform = `-ms-translate(-50%, -${
          newNumber1[i] * 10
        }%)`;
        el_left.style.transform = `-moz-translate(-50%, -${
          newNumber1[i] * 10
        }%)`;
        el_left.style.transform = `-o-translate(-50%, -${newNumber1[i] * 10}%)`;
      }
      for (let i = 0; i < items_right.length; i++) {
        let el_right = items_right[i];
        // 兼容浏览器
        el_right.style.transform = `translate(-50%, -${newNumber2[i] * 10}%)`;
        el_right.style.transform = `-ms-translate(-50%, -${
          newNumber2[i] * 10
        }%)`;
        el_right.style.transform = `-moz-translate(-50%, -${
          newNumber2[i] * 10
        }%)`;
        el_right.style.transform = `-o-translate(-50%, -${
          newNumber2[i] * 10
        }%)`;
      }
    },
    setNumberTransform_house(count) {
      //区分type
      if (this.num_type === "index") {
        // 空位补齐
        let newNumber = this.PrefixZero(count, 3);
        let items = this.$refs.numRef;
        console.log(items);
        for (let i = 0; i < items.length; i++) {
          let el = items[i];
          // 兼容浏览器
          el.style.transform = `translate(-50%, -${newNumber[i] * 10}%)`;
          el.style.transform = `-ms-translate(-50%, -${newNumber[i] * 10}%)`;
          el.style.transform = `-moz-translate(-50%, -${newNumber[i] * 10}%)`;
          el.style.transform = `-o-translate(-50%, -${newNumber[i] * 10}%)`;
        }
      } else if (this.num_type === "address") {
        // 空位补齐
        let newNumber = this.PrefixZero(count, 6);
        let items = this.$refs.numRef;
        console.log(items);
        for (let i = 0; i < items.length; i++) {
          let el = items[i];
          // 兼容浏览器
          el.style.transform = `translate(-50%, -${newNumber[i] * 10}%)`;
          el.style.transform = `-ms-translate(-50%, -${newNumber[i] * 10}%)`;
          el.style.transform = `-moz-translate(-50%, -${newNumber[i] * 10}%)`;
          el.style.transform = `-o-translate(-50%, -${newNumber[i] * 10}%)`;
          // debugger
        }
      }
    },
    // 获取随机数
    getRandomNumber(min, max) {
      return Math.floor(Math.random() * (max - min + 1) + min);
    },
    // num: 被操作数 , n 固定的总位数
    PrefixZero(num, n) {
      return (Array(n).join(0) + num).slice(-n);
    },
  },
};
</script>

<style lang="less" scoped>
#run_num {
  font-family: Avenir, Helvetica, Arial, sans-serif;
   1826px;
  height: 200px;
  display: flex;
  justify-content: space-between;
  .run_left {
     1300px;
    height: 120px;
    display: flex;
    .four_before {
       301px;
      display: flex;
      box-sizing: border-box;
      padding-left: 20px;
      .num_scroll {
        flex: 1;
        color: #fff;
        font-size: 80px;
        span {
          position: relative;
          display: inline-block;
          overflow: hidden;
           100%;
          height: 100%;
          // writing-mode: vertical-rl;
          // text-orientation: upright;
          i {
             100%;
            position: absolute;
            // top: 50%;
            top: 0;
            // margin-top: -44px;
            left: 50%;
            // letter-spacing: 10px;
            transition: transform 0.5s ease-in-out;
            transform: translate(-50%, 0);
            span {
              height: 120px;
              display: flex;
              justify-content: center;
              align-items: center;
              color: #44ffff;
            }
          }
        }
      }
    }
    .star_icon {
      flex: 1;
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-size: 80px;
      color: #fff;
      .star_span {
        margin-top: 39px;
        color: #44ffff;
      }
    }
    .four_after {
       301px;
      display: flex;
      box-sizing: border-box;
      padding-right: 22px;
      .num_scroll {
        flex: 1;
        color: #fff;
        font-size: 80px;
        span {
          position: relative;
          display: inline-block;
          overflow: hidden;
           100%;
          height: 100%;
          // writing-mode: vertical-rl;
          // text-orientation: upright;
          i {
             100%;
            position: absolute;
            // top: 50%;
            top: 0;
            // margin-top: -44px;
            left: 50%;
            // letter-spacing: 10px;
            transition: transform 0.5s ease-in-out;
            transform: translate(-50%, 0);
            span {
              height: 120px;
              display: flex;
              justify-content: center;
              align-items: center;
              color: #44ffff;
            }
          }
        }
      }
    }
  }
  .run_right {
     500px;
    height: 120px;
    display: flex;
    box-sizing: border-box;
    padding: 0 29px 0 20px;
    .num_scroll {
      flex: 1;
      color: #fff;
      font-size: 80px;
      span {
        display: flex !important;
        justify-content: center;
        align-items: center;
        position: relative;
        display: inline-block;
        overflow: hidden;
         100%;
        height: 100%;
        color: #44ffff;
        // writing-mode: vertical-rl;
        // text-orientation: upright;
        i {
           100%;
          position: absolute;
          // top: 50%;
          top: 0;
          // margin-top: -44px;
          left: 50%;
          // letter-spacing: 10px;
          transition: transform 0.5s ease-in-out;
          transform: translate(-50%, 0);
          span {
            height: 120px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #44ffff;
          }
        }
      }
    }
  }
  .run_right_other {
     500px;
    height: 120px;
    display: flex;
    box-sizing: border-box;
    padding-right: 25px;
    .run_right_index {
       200px;
      font-size: 56px;
      color: #0584d9;
      display: flex;
      align-items: center;
      padding-left: 20px;
      box-sizing: border-box;
      span {
        flex: 1;
      }
    }
    .num_scroll {
      flex: 1;
      color: #fff;
      font-size: 80px;
      span {
        display: flex !important;
        justify-content: center;
        align-items: center;
        position: relative;
        display: inline-block;
        overflow: hidden;
         100%;
        height: 100%;
        // writing-mode: vertical-rl;
        // text-orientation: upright;
        i {
           100%;
          position: absolute;
          // top: 50%;
          top: 0;
          // margin-top: -44px;
          left: 50%;
          // letter-spacing: 10px;
          transition: transform 0.5s ease-in-out;
          transform: translate(-50%, 0);
          span {
            height: 120px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #44ffff;
          }
        }
      }
    }
  }
}
</style>

引用组件到页面

<template>
  <div id="app">
    <num-run :num_scroll="numScroll" num_type="index" />
    <table-run
      class="hello_com"
      :headLists="headLists"
      :dataLists="dataLists"
    />
  </div>
</template>

<script>
import TableRun from "@/components/tableRun/index";
import NumRun from "@/components/numRun/index";

export default {
  name: "App",
  components: {
    TableRun,
    NumRun,
  },
  data() {
    return {
      numScroll: {},
      headLists: [],
      dataLists: [],
    };
  },
  mounted() {
    let timer = setTimeout(() => {
      this.numScroll = { sfz_start: "1234", sfz_end: "5678", param: "7890" };
      this.headLists = [
        { name: "序号", value: "value",  "100px" },
        { name: "分组", value: "fz", "800px" },
        { name: "申请人姓名", value: "sqrxm",  "100px" },
      ];
      this.dataLists = [
        {
          value: 1,
          id: "a",
          fz: "第一组",
          sqrxm: "于欢水",
        },
        { value: 2, id: "b" },
        { value: 3, id: "c" },
        { value: 4, id: "d" },
        { value: 5, id: "e" },
        { value: 6, id: "f" },
        { value: 7, id: "g" },
        { value: 8, id: "h" },
        { value: 9, id: "i" },
        { value: 10, id: "j" },
        { value: 11, id: "k" },
        { value: 12, id: "l" },
        { value: 13, id: "m" },
        { value: 14, id: "n" },
        { value: 15, id: "o" },
      ];
    }, 1000);
    console.log(timer);
  },
};
</script>

<style lang="less" scoped>
</style>