Artikel ini menjelaskan cara menerapkan bilah kemajuan oleh JS. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:
1. Salet dan ClearTimeout
<Html> <head> <title> batang kemajuan </iteme> <style type = "text/css"> .container {width: 450px; Perbatasan: 1px solid #6c9c2c; Tinggi: 25px; } #bar {latar belakang: #95CA0D; float: kiri; Tinggi: 100%; Teks-Align: tengah; Line-Height: 150%; } </tyle> <script type = "text/javascript"> function run () {var bar = document.getElementById ("bar"); var total = document.getElementById ("Total"); bar.style.width = parseInt (bar.style.width) + 1 + "%"; total.innerHtml = bar.style.width; if (bar.style.width == "100%") {window.cleartimeout (timeout); kembali; } var timeout = window.setTimeout ("run ()", 100); } window.onload = function () {run (); } </script> </head> <body> <div> <div id = "bar"> </div> </div> <span id = "total"> </span> </body> </html>Gambar reproduksi:
2.SetInterval dan ClearInterval
<html> <head> <title> progress bar </iteme> <style type = "text/css"> .processContainer {width: 450px; Perbatasan: 1px solid #6c9c2c; Tinggi: 25px; } #processbar {latar belakang: #95CA0D; float: kiri; Tinggi: 100%; Teks-Align: tengah; Line-Height: 150%; } </tyle> <script type = "text/javascript"> function setProcess () {var processBar = document.getElementById ("ProcessBar"); processbar.style.width = parseInt (processbar.style.width) + 1 + "%"; processbar.innerHtml = processbar.style.width; if (processbar.style.width == "100%") {window.clearInterval (bartimer); }} var bartimer = window.setInterval (function () {setProcess ();}, 100); window.onload = function () {bartimer; } </script> </head> <body> <div> <v id = "processBar"> </div> </div> </body> </html>Gambar reproduksi:
3. Perbedaan antara SetTimeout dan SetInterval
setTimeout () hanya menjalankan kode sekali. Jika Anda ingin menelepon beberapa kali, gunakan setInterval (), metode setInterval () akan terus memanggil fungsi sampai clearInterval () dipanggil atau jendela ditutup, atau biarkan kode itu sendiri memanggil setTimeout () lagi.
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.