前端数值滚动特效

最新推荐文章于 2024-05-06 23:37:19 发布

小宋i

最新推荐文章于 2024-05-06 23:37:19 发布

阅读量162

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_50641294/article/details/133900194

版权

<template>
  <div class="home">
    <img src="http://192.168.1.196/upload/material/-100/20231016/6B9F43FF74A8483091E5308ABB54A692.png" alt="">
    <div id="numRoll" class="myroll"></div>
  </div>
</template>



<script type="text/javascript">
// @ is an alias to /src


// import DigitRoll from "./views/index";

export default {
  name: "Home",

  data() {
    return {
      from: 0,
      to: 55,
      container: '',
      width: '',
      rollHeight: '',
      number: '',
      DigitRoll:null,
    }
  },
  mounted() {
    
    this.setDigitRoll()
    this.getData()
 
  },
  methods: {
    setDigitRoll() {
      function DigitRoll(opts) {
        this.container = document.querySelector(opts.container);
        this.width = opts.width || 1;
        if (!this.container) {
          throw Error('no container');
        }
        this.container.style.overflow = 'hidden';
        this.rollHeight = parseInt(getComputedStyle(this.container).height);

        if (this.rollHeight < 1) {
          this.container.style.height = '20px';
          this.rollHeight = 20;
        }
        this.setWidth();
      }
      DigitRoll.prototype = {
        roll: function (n) {
          var self = this;
          this.number = parseInt(n) + '';
          if (this.number.length < this.width) {
            this.number = new Array(this.width - this.number.length + 1).join('0') + this.number;
          } else if (this.number.length > this.width) {
            this.width = this.number.length;
            this.setWidth();
          }
          Array.prototype.forEach.call(this.container.querySelectorAll('.num'), function (item, i) {
            var currentNum = parseInt(item.querySelector('div:last-child').innerHTML);
            var goalNum = parseInt(self.number[i]);
            var gapNum = 0;
            var gapStr = '';
            if (currentNum == goalNum) {
              return;
            } else if (currentNum < goalNum) {
              gapNum = goalNum - currentNum;
              for (var j = currentNum; j < goalNum + 1; j++) {
                gapStr += '<div>' + j + '</div>'
              }
            } else {
              gapNum = 10 - currentNum + goalNum;
              for (var j = currentNum; j < 10; j++) {
                gapStr += '<div>' + j + '</div>'
              }
              for (var j = 0; j < goalNum + 1; j++) {
                gapStr += '<div>' + j + '</div>'
              }
            }
            item.style.cssText += '-webkit-transition-duration:0s;-webkit-transform:translateY(0)';
            item.innerHTML = gapStr;
            setTimeout(function () {
              item.style.cssText += '-webkit-transition-duration:1s;-webkit-transform:translateY(-' + self.rollHeight * gapNum + 'px)';
            }, 50)
          })
        },
        setWidth: function (n) {
          n = n || this.width;
          var str = '';
          for (var i = 0; i < n; i++) {
            str += '<div class="num" style="float:left;height:100%;line-height:' + this.rollHeight + 'px"><div>0</div></div>';
          }
          this.container.innerHTML = str;
        }
      }
      this.DigitRoll = DigitRoll
    },
    getData() {
      var mynroll = 518518;
    var r1 = new this.DigitRoll({
      container: '#numRoll',
      width: 8
    });
    r1.roll(mynroll);

    setInterval(function () {
      mynroll += parseInt(Math.random() * 100)
      r1.roll(mynroll)
    }, 3000)
    }
  }
};
</script>