Beispiel-JavaScript zur Implementierung dynamischer Änderungen in numerischen Werten

Dieser Artikel vermittelt Ihnen relevantes Wissen über JavaScript, das hauptsächlich die relevanten Inhalte zum Erreichen dynamischer Änderungen in numerischen Werten vorstellt. Ich hoffe, es wird für alle hilfreich sein.

【Verwandte Empfehlungen: JavaScript-Video-Tutorial, Web-Frontend】

Der Effekt ist wie folgt:

---

Kommen wir ohne weitere Umschweife direkt zum Code:

HTML-Datei:

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

Codeanalyse:

Hier habe ich einen großen Container geschrieben, der drei kleine Container enthält. Die Daten in jedem kleinen Container werden mit data-* angezeigt Attribut
( Hinweis: 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代码的时候，一步步下手，要不然很容易逻辑混乱，以后的话没事会给大家分享一些jsdata-* wird verwendet, um private benutzerdefinierte Daten für eine Seite oder Anwendung zu speichern, was uns die Möglichkeit gibt, Anpassung aller HTML-Elemente Die Fähigkeit des Datenattributs , (benutzerdefinierte) Daten zu speichern kann im JavaScript der Seite genutzt werden, um eine bessere Benutzererfahrung zu schaffen (ohne Ajax zu erstellen). Aufrufe oder serverseitige Datenbankabfragen))
Hier übergeben wir unsere benutzerdefinierten Daten (37062, 10210, 10045 Code>), zur Verwendung in js.

css-Datei:

🎜rrreee🎜🎜🎜Code-Analyse: 🎜🎜🎜🎜css-Datei ist sehr einfach, verwenden Sie einfach das flex-Layout und Die letzte kleine Medienabfrage wurde hinzugefügt, um sie an Änderungen der Bildschirmgröße anzupassen. Schauen Sie sich das bitte selbst an. 🎜🎜🎜🎜js-Datei: 🎜🎜🎜🎜rrreee🎜🎜🎜Code-Analyse: 🎜🎜🎜🎜Dynamische Änderungen in Daten Die Logik ist da! 🎜

• 🎜Zuerst müssen Sie die drei Divs abrufen, die die Daten speichern, und dann den verwenden foreach-Methode Beim Durchlaufen der drei Boxen, die wir erhalten haben, ist die anfängliche Punktzahl 0, also setzen wir den innerText der Box auf 0 (Hinweis: 0 ist hier eine Zeichenfolge) 🎜
• 🎜Definieren Sie dann eine Methode zum Aktualisieren der Daten updateData und rufen Sie dann die Daten ab, die wir zuvor angepasst haben. Einige Freunde hier haben +item.getAttribute( data-set) gesehen. ist wahrscheinlich verwirrt. Warum steht das Symbol + davor? + bedeutet, dass die folgende Zahl eine positive Zahl ist, was gleichbedeutend damit ist, dem Compiler mitzuteilen, dass der zuzuweisende Werttyp ein numerischer Typ ist und die Zahlen nicht als Zeichenfolgen verkettet werden code>🎜 li>
• 🎜Dann definieren Sie eine temporäre Variable tmp. Der Zweck besteht darin, den geänderten Wert in item.innerText zu speichern und dann festzulegen die Datenänderungsrate Hier wird sie durch 200 geteilt. Je größer die geteilten Daten sind, desto langsamer ist die Änderungsrate und umgekehrt🎜
• 🎜Dann fällen Sie ein Urteil (Lassen Sie den temporären Betrag und den Gesamtbetrag vergleichen.) Wenn der temporäre Betrag kleiner als der Gesamtbetrag ist, fügen Sie temporären Betrag tmp und Datenänderungsbetrag changeData hinzu und Führen Sie eine Rundung durch. Wenn die Beurteilungsbedingung nicht erfüllt ist, rendern Sie direkt Nur die Daten (die Daten sind zu diesem Zeitpunkt bereits die endgültigen Daten, bei denen es sich um unsere benutzerdefinierten Daten handelt)🎜
• 🎜Um dynamische Datenänderungen zu erreichen Der Kern ist der timer. Starten Sie den Timer in dem Bereich, der die Beurteilungsbedingungen erfüllt, übergeben Sie die Rückruffunktion updateData und implementieren Sie den Aufruf einmal in 1 ms . Die Datenänderungen sehen sehr reibungslos aus.🎜 li>

🎜🎜🎜Am Ende geschrieben:🎜
Wenn Sie der Implementierungslogik von js Schritt für Schritt folgen, werden Sie das feststellen Die Logik ist sehr klar. Ich hoffe, dass jeder Schritt für Schritt mit dem Schreiben von js-Code beginnen kann, sonst wird es einfach. Die Logik ist verwirrend. Ich werde in Zukunft einige kleine Demos mit Ihnen teilen haben nichts zu tun, also können wir gemeinsam ein paar lustige Dinge machen! Während Sie Spaß haben, können Sie auch Ihre js-Entwicklungsfähigkeiten verbessern! 🎜🎜【Verwandte Empfehlungen: 🎜JavaScript-Video-Tutorial🎜, 🎜Web-Frontend🎜】🎜

Das obige ist der detaillierte Inhalt vonBeispiel-JavaScript zur Implementierung dynamischer Änderungen in numerischen Werten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!