HTML JavaScript 数字变化特效

最新推荐文章于 2024-06-20 00:08:44 发布

正在修炼的IT大佬

最新推荐文章于 2024-06-20 00:08:44 发布

阅读量741

点赞数 6

文章标签： html javascript 前端

本文链接：https://blog.csdn.net/qq_34045989/article/details/135731163

版权

效果

案例一：上下滚动

案例二：本身变化

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>数字滚动变化动画</title>
  </head>
  <style>
    *{
        margin:0;
        padding: 0;
    }
    /* 滚动变化相关 */
    .valScrollAmt-box {
      display: flex;
      height: 50px;
      overflow: hidden;
      font-size: 50px;
      font-weight: bold;
      line-height:50px;
      margin: 10px 10px;

    }
    .digit-container {
      display: flex;
      flex-direction: column;
      line-height: 50px;
    }

    /* 动态变化 */
    .valChangeAmt-box {
      font-size: 50px;
      font-weight: bold;
      line-height: 50px;
      margin: 10px 10px;

    }
    .div1 {
      background-color: aqua;
      padding: 5px 5px;
    }
    .div2 {
      background-color: bisque;
      padding: 5px 5px;

    }
    h1{
        font-size: 50px;
        margin: 10px 10px;
    }
  </style>
  <body>
    <div class="div1">
      <h1>案例1:滚动式变化</h1>
      <div id="valScrollAmt" class="valScrollAmt-box"></div>
    </div>
    <div class="div2">
      <h1>案例2:动态变化</h1>
      <div id="valChangeAmt" class="valChangeAmt-box">0</div>
    </div>
  </body>
  <script src="jquery-3.5.1.min.js"></script>
  <script>
    // 滚动式变化
    class animateObj {
      constructor(id, startNum, step, time) {
        this.id = id; //容器唯一标识
        this.startNum = startNum; // 初始数值
        this.savePositionArr = []; //存放旧数据的位置数组
      }

      // 数字转成数组
      number2Arr(digit) {
        var num_arr = [];
        for (var i = 0; i < digit.length; i++) {
          num_arr.push(digit.charAt(i));
        }
        return num_arr;
      }

      // dom构建
      amtDom(arr) {
        var str = "";
        for (var i = 0; i < arr.length; i++) {
          if (parseInt(arr[i]) >= 0) {
            str +=
              '<div class="scrollItem digit-container" data-show=' +
              arr[i] +
              ">\
                            <span>0</span>\
                            <span>1</span>\
                            <span>2</span>\
                            <span>3</span>\
                            <span>4</span>\
                            <span>5</span>\
                            <span>6</span>\
                            <span>7</span>\
                            <span>8</span>\
                            <span>9</span>\
                        </div>";
          } else {
            str += '<div class="sign-box"><span>' + arr[i] + "</span></div>";
          }
        }
        return str;
      }

      // 将数字转换为逗号隔开的千分位格式
      num2qfw(num) {
        num += "";
        if (!num.includes(".")) num += ".";
        return num
          .replace(/(\d)(?=(\d{3})+\.)/g, function ($0, $1) {
            return $1 + ",";
          })
          .replace(/\.$/, "");
      }

      animation() {
        const _this = this;
        var height = $("#" + this.id).height();
        $(".scrollItem").each(function (i) {
          let scrollTopOld, scrollTopNew;
          let num = parseInt($(this).data("show"));
          scrollTopNew = height * num;
          if (!_this.savePositionArr[i]) {
            _this.savePositionArr[i] = 0;
          }
          scrollTopOld = _this.savePositionArr[i];
          $(this).css("margin-top", -scrollTopOld);
          if (scrollTopOld != scrollTopNew) {
            $(this).animate({ marginTop: -scrollTopNew }, 1500);
          }

          _this.savePositionArr[i] = scrollTopNew;
        });
      }

      init() {
        const _sNum = this.num2qfw(this.startNum);
        const numArr = this.number2Arr(_sNum);
        $("#" + this.id).html(this.amtDom(numArr));
        this.animation();
      }
    }
    let animate = new animateObj("valScrollAmt", 1235.8);
    animate.init();
    setInterval(function () {
      animate.startNum += 3;
      animate.init();
    }, 4000);

    // 动态变化
    // 将数字转换为逗号隔开的千分位格式
    function num2qfw(num) {
      num += "";
      if (!num.includes(".")) num += ".";
      return num
        .replace(/(\d)(?=(\d{3})+\.)/g, function ($0, $1) {
          return $1 + ",";
        })
        .replace(/\.$/, "");
    }

    // 数值改变动画函数
    function magic_number(value) {
      var num = $("#valChangeAmt");
      num.animate(
        { count: value },
        {
          duration: 500,
          step: function () {
            num.text(num2qfw(parseInt(this.count)));
          },
          complete: function () {
            num.text(num2qfw(parseInt(value)));
          },
        }
      );
    }
    let oldVal = 9374401;
    function update() {
      magic_number(oldVal);
      oldVal += Math.random() * 100;
    }
    update();
    setInterval(update, 3000); //3秒钟执行一次 update();
  </script>
</html>