vue,使用jquery的数字翻牌效果

image.png

在vue项目的index.html文件引入,最后面粘贴number.js代码

<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript" src="./number.js"></script>

下面是组件样式和调用代码

<template>
  <div class="box0">
    <div id="dataNums"></div>
  </div>
</template>
<script>
export default {
  mounted() {
    this.setData();
  },
  methods: {
    setData() {
      // eslint-disable-next-line no-undef
      $("#dataNums").rollNum({
        deVal: "842,858,760"
      });
    }
  }
};
</script>
<style lang="scss">
.box0 {
  width: 100%;
  height: 100%;

  #dataNums {
    width: 100%;
    height: 65px;
    position: relative;
    top: -0.5vh;
  }
  .dataNums {
    position: absolute;
    display: block;
    height: 65px;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
  }

  .dataNums .dataOne {
    width: 36px;
    height: 50px;
    margin: 0px 5px;
    text-align: center;
    border: 1px solid #00fbff;
    font-family: "Arial";
    border-radius: 5px;
    float: left;
    list-style: none;
  }

  .dataNums .dataBoc {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .dataNums .dataBoc .tt {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .dataNums .dataLine {
    position: relative;
    margin: 0 !important;
    width: 15px !important;
    border: 0 !important;
    left: -2px !important;
  }
  .dataNums .dataLine .dataBoc .tt {
    height: 30px !important;
    line-height: 0px;
    top: initial;
    bottom: 0px;
    color: #fff;
  }

  .dataNums .tt span {
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 43px;
    font-weight: 600;
    line-height: 50px;
    float: left;
  }

  @media screen and (max-width: 1320px) {
    .dataNums {
      height: 120px;
    }

    .dataNums .dataOne {
      width: 70px;
      height: 120px;
    }

    .dataNums .tt span {
      font-size: 100px;
      line-height: 120px;
    }

    .dataLine {
      line-height: 175px;
    }
  }

  .dataNum1 {
    position: absolute;
    top: 56%;
    width: 20%;
    float: left;
    /* padding-right: 4%; */
    font-size: 36px;
    text-align: center;
    left: 17%;
  }

  .dataNum2 {
    position: absolute;
    top: 56%;
    width: 20%;
    float: left;
    font-size: 36px;
    text-align: center;
    left: 40%;
  }

  .dataNum3 {
    position: absolute;
    top: 56%;
    width: 20%;
    float: left;
    padding-left: 5%;
    font-size: 36px;
    text-align: center;
    left: 60%;
  }

  .dataIcon {
    font-size: 67px;
    float: left;
  }
}
</style>

使用方式：

<div><Number1></Number1></div>
import Number1from "./number1";
components: { Number1},

number.js代码

// 鏁板瓧婊氬姩
var defaults = {
  deVal: 0, // 浼犲叆鍊�
  className: "dataNums", // 鏍峰紡鍚嶇О
  digit: "" // 榛樿鏄剧ず鍑犱綅鏁板瓧
};
function rollNum(obj, options) {
  this.obj = obj;
  this.options = $.extend(defaults, options);
  this.init = function() {
    this.initHtml(obj, defaults);
  };
}
rollNum.prototype = {
  initHtml: function(obj, options) {
    console.log(obj, options.deVal);
    var nameDeVal = options.deVal.split("");
    var strHtml = '<ul class="' + options.className + ' inrow">';
    var valLen = options.digit || (options.deVal + "").length;
    if (obj.find("." + options.className).length <= 0) {
      for (var i = 0; i < valLen; i++) {
        if (nameDeVal[i] == ",") {
          strHtml +=
            '<li class="dataOne dataLine" style="width:30px;background:none;font-size:69px;"><div class="dataBoc"><div class="tt" t="38" ><em class="num0">,</em></div></div></li>';
        }
        if (nameDeVal[i] == ".") {
          strHtml +=
            '<li class="dataOne dataLine" style="width:30px;background:none;font-size:69px;"><div class="dataBoc"><div class="tt" t="38"><em class="num0">.</em></div></div></li>';
        }
        if (nameDeVal[i] != "," && nameDeVal[i] != ".") {
          strHtml +=
            '<li class="dataOne "><div class="dataBoc"><div class="tt" t="38"><span class="num0">0</span> <span class="num1">1</span> <span class="num2">2</span> <span class="num3">3</span> <span class="num4">4</span><span class="num5">5</span> <span class="num6">6</span> <span class="num7">7</span> <span class="num8">8</span> <span class="num9">9</span><span class="num0">0</span> <span class="num1">1</span> <span class="num2">2</span> <span class="num3">3</span> <span class="num4">4</span><span class="num5">5</span> <span class="num6">6</span> <span class="num7">7</span> <span class="num8">8</span> <span class="num9">9</span><span class="num10">,</span><span class="num11">.</span></div></div></li>';
        }
      }
      strHtml += "</ul>";
      obj.html(strHtml);
    }
    this.scroNum(obj, options);
  },
  scroNum: function(obj, options) {
    var number = options.deVal;
    var $num_item = $(obj)
      .find("." + options.className)
      .find(".tt");
    var h = $(obj)
      .find(".dataBoc")
      .height();
    $num_item.css("transition", "all 2s ease-in-out");
    var numberStr = number.toString();
    if (numberStr.length <= $num_item.length - 1) {
      var tempStr = "";
      for (var a = 0; a < $num_item.length - numberStr.length; a++) {
        tempStr += "0";
      }
      numberStr = tempStr + numberStr;
    }

    var numberArr = numberStr.split("");
    $num_item.each(function(i, item) {
      setTimeout(function() {
        if (numberArr[i] == ",") {
          $num_item.eq(i).html(",");
          $num_item
            .eq(i)
            .css({
              "font-size": "69px",
              background: "none",
              transition: "none"
            });
        }
        if (numberArr[i] == ".") {
          $num_item
            .eq(i)
            .html(".")
            .css({
              "font-size": "69px",
              background: "none",
              transition: "none"
            });
          // $num_item.eq(i)
        }
        if (numberArr[i] != "," && numberArr[i] != ".") {
          $num_item
            .eq(i)
            .css("top", -parseInt(numberArr[i]) * h - h * 10 + "px");
        }
      }, i * 150);
    });
  }
};
$.fn.rollNum = function(options) {
  var $that = this;
  var rollNumObj = new rollNum($that, options);
  rollNumObj.init();
};

感谢大家点赞！