جستجو

ثبت‌نام

  • رمز عبور باید حداقل دوازده کاراکتر داشته باشد. برای قوی تر کردن آن ، از حروف بزرگ ، کوچک و اعداد و نمادهایی مانند ! "؟ $٪ ^ &) استفاده کنید

پاسخ داده شد
-1
0

نمایش نوار پیشرفت در جاوا اسکریپت چگونه پیاده سازی می شود؟

جاوا اسکریپت javascript progress bar   progress bar در جاوا اسکریپت   آموزش جاوا اسکریپت   نوار پیشرفت در جاوا اسکریپت
به اشتراک گذاشتن
  • شما باید برای ارسال دیدگاه شوید
فیلتر مرتب سازی بر اساس: جدیدترین اول
ارسال پاسخ
پاسخ عالی
0
0

ابتدا با استفاده از css کادر آن را تعریف می کنیم:

#myProgress {
  width: 100%;
  background-color: grey;
}

#myBar {
  width: 0%;
  height: 20px;
  background-color: blue;
}

برای پیاده سازی مقدار پیشرفت فرایند از متد setInterval استفاده می کنیم و برای متوقف کردن آن از متد clearInterval استفاده می کنیم.

var i = 0;
function move() {
  if (i == 0) {
    i = 1;
    var elem = document.getElementById("myBar");
    var width = 1;
    var id = setInterval(frame, 100);
    function frame() {
      if (width >= 100) {
        clearInterval(id);
        i = 0;
      } else {
        width++;
        elem.style.width = width + "%";
      }
    }
  }
}

در خط (id = setInterval(frame, 100 گفتیم که متد frame هر 100 میلی ثانیه اجرا شود. این زمان بستگی به کار مورد نظر ما دارد. مثلا فرض کنیم می خواهیم کاربر عکسی را آپلود کند و می دانیم که اینکار 10 ثانیه طول می کشد. بنابراین در اینجا زمان را 1000 قرار می دهیم. سپس در متد frame مقدار متغیر width که مقدار پیشرفت را نشان می دهد یکی یکی افزایش می دهیم. زمانیکه مقدار این فیلد به 100 رسید با فراخوانی متد clearInterval متد setInterval را متوقف می کنیم. کد کامل به صورت زیر می شود:


<html>
<style>
#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 0%;
  height: 20px;
  background-color: blue;
}
</style>
<body>

<div id="myProgress">
  <div id="myBar"></div>
</div>

<br>
<button onclick="move()">آپلود</button> 

<script>
var i = 0;
function move() {
  if (i == 0) {
    i = 1;
    var elem = document.getElementById("myBar");
    var width = 1;
    var id = setInterval(frame, 100);
    function frame() {
      if (width >= 100) {
        clearInterval(id);
        i = 0;
      } else {
        width++;
        elem.style.width = width + "%";
      }
    }
  }
}
</script>

</body>
</html>
  • شما باید برای ارسال دیدگاه شوید
نمایش 1 نتیجه
پاسخ شما
اگر قبلاً حساب کاربری دارید با پر کردن فیلد های زیر یا به عنوان مهمان ارسال کنید.
نام*
ایمیل*
وب سایت