• 技术文章 >web前端 >js教程

    实例JavaScript之实现数值的动态变化

    WBOYWBOY2022-11-17 16:01:46转载240
    本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于怎么实现数值动态变化的相关内容,下面一起来看一下,希望对大家有帮助。

    大前端成长进阶课程:进入学习

    【相关推荐:JavaScript视频教程web前端

    效果如下:

    在这里插入图片描述


    话不多说,直接上代码:

    HTML文件:

      <div class="outer">
        <div class="counter-container">
          <i class="iconfont icon-Basket-Ball" style="font-size:50px"></i>
          <div class="counter" data-set="37062"></div>
          <span>常规赛总得分</span>
        </div>
    
        <div class="counter-container">
          <i class="iconfont icon-BasketballHoop" style="font-size:50px"></i>
          <div class="counter" data-set="10210"></div>
          <span>常规赛总篮板</span>
        </div>
    
        <div class="counter-container">
          <i class="iconfont icon-assistant" style="font-size:50px"></i>
          <div class="counter" data-set="10045"></div>
          <span>常规赛总助攻</span>
        </div>
      </div>

    代码解析:

    在这里写了一个大容器包含了三个小容器,每个小容器中的数据展示使用data-*属性
    (注:data-*用于存储页面或应用程序的私有自定义数据,赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力,存储的(自定义)数据能够被页面的 JavaScript 中利用,以创建更好的用户体验(不进行 Ajax 调用或服务器端数据库查询))
    我们这里就把我们自定义的数据(370621021010045)传入,以便在js中使用.


    css文件:

    * {
        box-sizing: border-box;
      }
      
     .outer {
        background-color: #8e44ad;
        color: #fff;
        font-family: 'Roboto Mono', sans-serif;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 350px;
        overflow: hidden;
        margin: 0;
      }
      
      .counter-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        margin: 30px 50px;
      }
      
      .counter {
        font-size: 60px;
        margin-top: 10px;
      }
      
      @media (max-width: 580px) {
        .outer {
          flex-direction: column;
        }
      }

    代码解析:

    css文件很简单啦,就使用了flex布局,最后小加了一个媒体查询来适应屏幕尺寸变化,大家自行看吧。


    js文件:

    let counters = document.querySelectorAll('.counter')  //获取到三个counter盒子counters.forEach(item => {
        item.innerText = '0'  //记录分数变化的变量,初始值为0
    
        const updateData = () => {
            const data = +item.getAttribute('data-set')  //获取到元素中绑定的数据
            const tmp = +item.innerText //临时变量保存变化一次的数据量
        
            const changeData = data / 200  //设置改变的速率
    
            if(tmp < data) {  //如果临时变量的值小于最终数据的值,那么就给元素进行数据相加
                item.innerText = `${Math.ceil(tmp + changeData)}`  //值数相加,然后进行取整
                setTimeout(updateData,1)  //定时器传入回调函数目的在于动态变化
            } else {
                item.innerText = data  //不满足条件后,证明得到了最终数据,直接渲染
            }
    
        }
        updateData()  //调用函数,启动函数})

    代码解析:

    数据的动态改变逻辑在这里咯!


    写在最后:
    js的实现逻辑一步步的来,会发现逻辑很清晰,希望大家在写js代码的时候,一步步下手,要不然很容易逻辑混乱,以后的话没事会给大家分享一些js小demo,一起去搞一些好玩的东西!在娱乐的同时还能提高js的开发能力!

    【相关推荐:JavaScript视频教程web前端

    以上就是实例JavaScript之实现数值的动态变化的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:CSDN,如有侵犯,请联系admin@php.cn删除

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:javascript
    上一篇:Node.js 19正式发布,聊聊它的 6 大特性! 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• JavaScript更新到了es几• JavaScript普通函数有原型吗• 聊聊JavaScript中实现继承的6种方法• 深入探讨JavaScript中的async函数• javascript怎么求13阶乘
    1/1

    PHP中文网