HTML JavaScript 数字变化特效

这篇具有很好参考价值的文章主要介绍了HTML JavaScript 数字变化特效。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

效果

案例一:上下滚动

案例二:本身变化

HTML JavaScript 数字变化特效,html,javascript,前端文章来源地址https://www.toymoban.com/news/detail-814272.html

代码

<!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>

到了这里,关于HTML JavaScript 数字变化特效的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端三剑客 HTML+CSS+JavaScript ② HTML相关概念

    他们这样形容我 是暴雨浇不灭的火                                                       —— 24.4.18 学习目标         理解                 HTML的概念                 HTML的分类                 HTML的关系                 HTML的语义化         应用

    2024年04月23日
    浏览(55)
  • [HTML]Web前端开发技术26(HTML5、CSS3、JavaScript )JavaScript基础——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 数据类型 数据类型-字符型 数据类型-数值型 数据类型-布尔型 数据类型-其它类型 变量 转义字符 运算

    2024年02月20日
    浏览(65)
  • 前端= 结构(HTML)+ 样式(CSS)+ 行为(JavaScript)

    前端开发确实涵盖了行为(JavaScript)、样式(CSS)和结构(HTML)这三个主要方面。这三个方面在前端开发中密切协作,共同构建用户界面和用户体验。 结构(Structure):HTML 是用于定义页面结构的标记语言。通过使用 HTML 标签,可以创建网页的基本骨架,包括标题、段落、

    2024年02月13日
    浏览(59)
  • 前端基础自学整理|HTML + JavaScript + DOM事件

    目录 一、HTML 1、Html标签 2、Html元素 3、基本的HTML标签 二、CSS 样式 层叠样式表 三、JavaScript 使用示例 四、HTML DOM  通过可编程的对象模型,javaScript可以: window document 1、查找HTML元素 2、操作HTML元素 获取元素的属性 四、HTML DOM事件 ⚠️是DOM提供的API Html是用来描述网页的一

    2024年02月22日
    浏览(47)
  • 前端随笔:HTML/CSS/JavaScript和Vue

    最近因为工作需要,需要接触一些前端的东西。之前虽然大体上了解过 HTML 、 CSS 和 JavaScript ,也知道 HTML 定义了内容、 CSS 定义了样式、 JavaScript 定义了行为,但是却没有详细的学习过前端三件套的细节。而最近的工作中需要使用 Vue ,并且想到未来的工作中使用 Vue 能够更

    2024年02月16日
    浏览(41)
  • [前端开发] 常见的 HTML CSS JavaScript 事件

    代码示例指路 常见的 HTML、CSS、JavaScript 事件代码示例 在 Web 开发中,事件是用户与网页交互的重要方式之一。通过事件,用户可以与页面元素进行交互,触发相应的功能或效果。本文将介绍常见的 HTML、CSS、JavaScript 事件,以及事件对象和事件代理的概念。 鼠标事件 鼠标事

    2024年02月19日
    浏览(54)
  • 前端:运用HTML+CSS+JavaScript实现拼图游戏

    前一段时间突然来了一个想法,就是运用前端知识实现一个拼图游戏,但是不知道具体怎样实现。今天,想到既然实现不了现实中我们看到的那种拼块,那么就用正方形来代替吧! 效果如下: 想到就是当小的图片块放到合适的位置上时,表示拼图完成。 1. 前端布局 运用cs

    2024年02月08日
    浏览(57)
  • 前端(html+css+javascript)作业--展现家乡的网页

    期末期间,老师布置了前端作业,现在放到这里,给各位同志参考。 桂平市是广西壮族自治区的一个美丽的城市,拥有丰富的历史文化和自然景观,属于贵港市管辖,那为什么是看起来是市级而不是县级,其实他就是个 市级县,比县大一些人口多一些就叫做市了。 此网页不

    2024年01月17日
    浏览(48)
  • 前端技术Html,Css,JavaScript,Vue3

    1.基本标签 2.文本格式化 3.链接 4.图片 5.无序列表 6.有序列表 7.表格 8.表单 1.选择器 2.文本和字体 3.链接 4.隐藏 5.定位position 6.浮动 7.对齐 8.图像 1.输出 2.函数 3.常用事件 4.DOM 5.改变Html 6.DOM 元素 (节点) 尾部创建新的 HTML 元素 (节点) - appendChild() 头部创建新的 HTML 元素 (节点)

    2024年02月13日
    浏览(50)
  • 建站系列(五)--- 前端开发语言之HTML、CSS、JavaScript

    建站系列(一)— 网站基本常识 建站系列(二)— 域名、IP地址、URL、端口详解 建站系列(三)— 网络协议 建站系列(四)— Web服务器之Apache、Nginx 建站系列(五)— 前端开发语言之HTML、CSS、JavaScript 建站系列(六)— 后端开发语言 建站系列(七)— 常用前后端框架

    2024年02月09日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包