숫자 값의 동적 변경을 구현하는 JavaScript 예

이 기사는 JavaScript에 대한 관련 지식을 제공하며, 수치의 동적 변화를 달성하는 방법에 대한 관련 내용을 주로 소개합니다. 모두에게 도움이 되기를 바랍니다.

【관련 권장 사항: JavaScript 비디오 튜토리얼, web front-end】

효과는 다음과 같습니다.

HTML 파일:

  <div>
    <div>
      <i></i>
      <div></div>
      <span>常规赛总得分</span>
    </div>

    <div>
      <i></i>
      <div></div>
      <span>常规赛总篮板</span>
    </div>

    <div>
      <i></i>
      <div></div>
      <span>常规赛总助攻</span>
    </div>
  </div>

---

코드 분석:

여기서 세 개의 작은 컨테이너를 포함하는 큰 컨테이너를 작성했습니다. 각 작은 컨테이너의 데이터는 data-*를 사용하여 표시됩니다. 속성
( 참고:

data-*는 페이지나 애플리케이션에 대한 개인 맞춤 데이터를 저장하는 데 사용되며 모든 HTML 요소에 대한 사용자 정의 (사용자 정의) 데이터를 저장하는 데이터 속성 의 기능은 페이지의 JavaScript 내에서 활용될 수 있어 더 나은 사용자 경험을 만들 수 있습니다(Ajax를 만들지 않고도) 호출 또는 서버 측 데이터베이스 쿼리))
여기서는 사용자 정의 데이터(37062, 10210, 1004510045)를 전달합니다. code>), js에서 사용하기 위한 것입니다.

css 파일:

data-*属性
(注:data-*用于存储页面或应用程序的私有自定义数据，赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力，存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）)
我们这里就把我们自定义的数据(37062，10210，10045)传入，以便在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()  //调用函数，启动函数})

代码解析:

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

• 首先就要获取到储存数据的三个div，然后通过foreach方法遍历我们获取的三个盒子，初始的分数是为0的，因此我们把盒子的innerText设置为了0(注意：这里的0是一个字符串)

• 随后定义一个更新数据的方法updateData,随后获取到我们之前自定义的数据，在这里有部分朋友看到+item.getAttribute(data-set)估计都懵逼了，为啥+符号在前面呢？+代表后面的数字为正数,相当于告诉编译器，即将赋值的数值类型为数字类型，不要把数字当作字符串去拼接

• 然后定义一个临时变量tmp，目的在于保存item.innerText中变化后的数值，接下来设置数据变化的速率在这里是除以了200，除以的数据约大，那么变化的速率越慢，反之则快

• 随后去做一个判断(让临时量与总量做对比)，如果临时量小于总量，就让临时量tmp与数据变化量changeData相加，做一个取整，如果不满足判断条件，直接渲染数据即可(这时的数据已经是最终的数据了,也就是我们的自定义数据)

• 实现数据的动态变化，最核心的还是定时器，在满足判断条件的作用域中启动定时器，传入回调函数updateData，实现1ms调用一次，数据变化看着很丝滑.

---

写在最后:
js的实现逻辑一步步的来，会发现逻辑很清晰，希望大家在写js代码的时候，一步步下手，要不然很容易逻辑混乱，以后的话没事会给大家分享一些jsrrreee

코드 분석:

css 파일은 매우 간단합니다. flex 레이아웃을 사용하면 됩니다. 화면 크기 변경에 적응하기 위해 마지막 작은 미디어 쿼리가 추가되었습니다. 직접 살펴보시기 바랍니다. 🎜🎜🎜🎜js 파일: 🎜🎜🎜🎜rrreee🎜🎜🎜코드 분석: 🎜🎜🎜🎜동적 데이터 변화 논리는 여기에 있습니다! 🎜

• 🎜우선 데이터를 저장하는 세 개의 div를 가져와야 하고 foreach 메소드 우리가 얻은 세 개의 상자를 탐색하면 초기 점수는 0이므로 상자의 innerText를 0으로 설정합니다(참고: 0는 문자열입니다). 🎜
• 🎜그런 다음 updateData 데이터를 업데이트하는 메서드를 정의하고 이전에 사용자 정의한 데이터를 가져옵니다. 여기서 몇몇 친구는 +item.getAttribute( data-set)를 보았습니다. 는 아마도 혼란스러울 것입니다. + 기호가 앞에 있는 이유는 무엇입니까? +는 다음 숫자가 양수임을 의미합니다. 이는 할당할 값 유형이 숫자 유형이며 숫자를 문자열로 연결하지 않음을 컴파일러에 알리는 것과 같습니다. code>🎜 li>
• 🎜그런 다음 임시 변수 tmp를 정의합니다. 목적은 변경된 값을 item.innerText에 저장한 다음 설정하는 것입니다. 데이터 변화율 여기서는 200으로 나눕니다. 나눈 데이터가 대략 크기 때문에 변화율이 느려지고, 그 반대도 마찬가지입니다🎜
• 🎜그런 다음 판단하세요 (임시 금액과 총액을 비교하도록 합니다.) 임시 금액이 총액보다 적으면 임시 금액 tmp 및 데이터 변경 금액 변경 데이터를 추가하고, 판단 조건이 충족되지 않으면 직접 렌더링합니다. 데이터만(이때의 데이터는 이미 최종 데이터이며, 이는 사용자 정의 데이터입니다)🎜
• 🎜데이터의 동적 변화를 달성하려면 , 핵심은 타이머이고, 판단 조건을 만족하는 범위에서 타이머를 시작하고, 콜백 함수 updateData를 전달하고, 1ms에 한 번 호출을 구현합니다. . 데이터 변경이 매우 원활해 보입니다.🎜 li>

🎜🎜🎜마지막에 작성됨:🎜
js의 구현 로직을 단계별로 따라가면 다음을 발견할 수 있습니다. 논리는 매우 명확합니다. 누구나 js 코드를 작성할 때 단계별로 시작할 수 있기를 바랍니다. 그렇지 않으면 쉬울 것입니다. 논리가 혼란스러우면 나중에 몇 가지 js 데모를 공유하겠습니다. 할 일이 없으니 같이 재미있는 걸 만들어보자! 즐기면서 JS 개발 능력도 향상시킬 수 있습니다! 🎜🎜【관련 추천: 🎜JavaScript 비디오 튜토리얼🎜, 🎜웹 프론트엔드🎜】🎜

위 내용은 숫자 값의 동적 변경을 구현하는 JavaScript 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!