تصف هذه المقالة كيفية تنفيذ أشرطة التقدم بواسطة JS. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
1.Settimeout و ClearTimeout
<html> <head> <title> شريط التقدم </title> <style type = "text/css"> .Container {width: 450px ؛ الحدود: 1 بكسل Solid #6C9C2C ؛ الارتفاع: 25 بكسل ؛ } #bar {background: #95ca0d ؛ تعويم: اليسار. الارتفاع: 100 ٪ محاذاة النص: المركز ؛ رفع الخط: 150 ٪ ؛ } </style> <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) ؛ يعود؛ } var timeout = window.settimeout ("run ()" ، 100) ؛ } window.onload = function () {run () ؛ } </script> </head> <body> <viv> <div id = "bar"> </viv> </viv> <span id = "total"> </span> </body> </html>صورة التكاثر:
2.SetInterval و clearinterval
<html> <head> <title> شريط التقدم </title> <style type = "text/css"> .processContainer {width: 450px ؛ الحدود: 1 بكسل Solid #6C9C2C ؛ الارتفاع: 25 بكسل ؛ } #processbar {background: #95CA0D ؛ تعويم: اليسار. الارتفاع: 100 ٪ محاذاة النص: المركز ؛ رفع الخط: 150 ٪ ؛ } </style> <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> <viv> <div id = "processbar"> </viv> </viv> </body> </html>صورة التكاثر:
3. الفرق بين setTimeout و setInterval
SetTimeOut () ينفذ رمز مرة واحدة فقط. إذا كنت ترغب في الاتصال عدة مرات ، فاستخدم SetInterval () ، فستستمر طريقة SetInterval () في استدعاء الوظيفة حتى يتم استدعاء ClearInterval () أو إغلاق النافذة ، أو تدع الكود نفسه يتصل بـ setTimeOut () مرة أخرى.
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.