设置数字串动态滚动效果

最新推荐文章于 2025-06-30 12:37:34 发布

原创最新推荐文章于 2025-06-30 12:37:34 发布 · 207 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#字符串 #vue

vue 专栏收录该内容

16 篇文章

订阅专栏

这篇博客详细介绍了如何使用HTML和JavaScript实现数字滚动效果。通过`v-for`指令和CSS transform属性，动态展示入区车辆的订单数量。文章还涉及到数字处理函数，如`toOrderNum`用于格式化数字，并添加逗号分隔符，以及`setNumberTransform`方法来设置文字滚动。同时，当数字超出一定长度时，会显示警告信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML代码段

 <div class="data">
   <span>今日入区车辆</span>
   <div class="box-item">
       <li
         v-for="(item, index) in orderCarsNum"
         :key="index"
         :class="{ 'number-item': !isNaN(item), 'mark-item': isNaN(item) }"
       >
         <em v-if="!isNaN(item)">
           <i ref="numberItem">0123456789</i>
         </em>
         <em v-else class="comma">{{ item }}</em>
      </li>
   </div>
   <span>辆</span>
</div>

script代码段

methods:{
    initData() {
      const num = 1234
      this.toOrderNum(num)
      this.setNumberTransform()
    },
// 设置文字滚动
    setNumberTransform() {
      const _this = this
      const numberItems = _this.$refs.numberItem // 拿到数字的ref，计算元素数量
      const numberArr = this.orderCarsNum.filter((item) => !isNaN(item))
      // 结合CSS 对数字字符进行滚动,显示订单数量
      for (let index = 0; index < numberItems.length; index++) {
        const elem = numberItems[index]
        elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`
      }
    },
// 处理数字
    toOrderNum(num) {
      num = num.toString()
      // 把订单数变成字符串
      if (num.length < 5) {
        num = '0' + num // 如未满5位数，添加"0"补位
        this.toOrderNum(num) // 递归添加"0"补位
      } else if (num.length === 5) {
        // 订单数中加入逗号
        num = num.slice(0, 2) + num.slice(2, 5) + num.slice(5, 8)
        this.orderCarsNum = num.split('') // 将其便变成数据，渲染至滚动数组
      } else {
        // 数字超过5位显示异常
        this.$message.warning('数字过大，显示异常，请联系客服')
      }
    },

}