>  기사  >  웹 프론트엔드  >  숫자 값의 동적 변경을 구현하는 JavaScript 예

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

WBOY
WBOY앞으로
2022-11-17 16:01:251682검색

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

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

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

효과는 다음과 같습니다.

HTML 파일:

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

  <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 调用或服务器端数据库查询))
我们这里就把我们自定义的数据(370621021010045)传入,以便在js中使用.


css文件:

* {
    box-sizing: border-box;
  }
  
 .outer {
    background-color: #8e44ad;
    color: #fff;
    font-family: &#39;Roboto Mono&#39;, 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 <p><span style="font-size: 18px;"><strong>代码解析:</strong></span></p><p>数据的动态改变逻辑在这里咯!</p>
  • 首先就要获取到储存数据的三个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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제