Contoh JavaScript untuk melaksanakan perubahan dinamik dalam nilai berangka

Artikel ini membawa anda pengetahuan yang berkaitan tentang JavaScript, yang terutamanya memperkenalkan kandungan yang berkaitan tentang cara mencapai perubahan dinamik dalam nilai berangka Mari kita lihat bersama-sama .

[Cadangan berkaitan: Tutorial video JavaScript, bahagian hadapan web]

The kesannya adalah seperti berikut:

---

Tanpa berlengah lagi, mari terus ke kod:

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

Analisis kod:

Di sini saya menulis bekas besar yang mengandungi tiga bekas kecil, dan data dalam setiap bekas kecil dipaparkan menggunakan data-*Atribut
(Nota: data-* digunakan untuk menyimpan data peribadi peribadi halaman atau aplikasi, memberikan kami keupayaan untuk membenamkan 自定义 data 属性 pada semua elemen HTML, disimpan (tersuai) Data 能够被页面的 JavaScript 中利用 untuk mencipta pengalaman pengguna yang lebih baik (不进行 Ajax 调用或服务器端数据库查询))
Di sini kami akan menghantar data tersuai kami (37062, 10210, 10045) supaya ia boleh dipaparkan dalam js Gunakan .

---

fail 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;
    }
  }

Analisis kod: Fail

css sangat mudah. ​​Ia menggunakan reka letak flex Akhirnya, 媒体查询 kecil ditambahkan untuk menyesuaikan diri dengan perubahan saiz skrin.

---

fail 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()  //调用函数，启动函数})

Analisis kod:

Logik perubahan dinamik data ada di sini!

• Mula-mula kita perlu 获取到储存数据的三个div, dan kemudian melintasi tiga kotak yang kita perolehi melalui kaedah foreach Markah awal ialah 0, jadi kita tetapkan innerText bagi kotak Untuk 0 (nota: 0 di sini adalah rentetan)

• kemudian tentukan kaedah untuk mengemas kini data updateData, dan kemudian dapatkan data yang kami suaikan sebelum ini, di sini Beberapa kawan-kawan mungkin keliru apabila melihat item.getAttribute(data-set) Mengapa simbol di hadapan? bermakna nombor berikut ialah nombor positif, yang bersamaan dengan memberitahu pengkompil, 即将赋值的数值类型为数字类型，不要把数字当作字符串去拼接

• dan kemudian mentakrifkan pembolehubah sementara tmp untuk menyimpan perubahan dalam item.innerText Nilai Tambah 在这里是除以了200，除以的数据约大，那么变化的速率越慢，反之则快 dan

  dan bulatkan jika syarat penghakiman tidak dipenuhi, nyatakan data secara langsung (data pada masa ini sudah menjadi data akhir, iaitu data tersuai kami)

• 临时量tmp Untuk mencapai perubahan dinamik dalam data, terasnya ialah 数据变化量changeData Mulakan pemasa dalam skop yang memenuhi syarat pertimbangan, masukkan fungsi panggil balik

  dan laksanakan <.> sekali, dan data Perubahan kelihatan sangat lancar

• 定时器updateData1msDitulis pada penghujung:

Jika anda mengikuti langkah logik pelaksanaan js. demi langkah, anda akan mendapati bahawa logiknya sangat jelas. Saya harap semua orang akan memulakan langkah demi langkah semasa menulis kod js, jika tidak, logik akan mengelirukan pada masa hadapan, saya akan berkongsi beberapa

demo kecil dengan anda, supaya kita boleh membuat beberapa perkara yang menyeronokkan bersama-sama! Sambil berseronok, anda juga boleh meningkatkan keupayaan pembangunan js anda!

---

[Cadangan berkaitan: Tutorial video JavaScript,
bahagian hadapan webjs]

Atas ialah kandungan terperinci Contoh JavaScript untuk melaksanakan perubahan dinamik dalam nilai berangka. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!