آموزش ساخت نوار پیشرفت انیمیشنی با استفاده از جاوااسکریپت

آموزش ساخت نوار پیشرفت انیمیشنی با استفاده از جاوااسکریپت

آموزش ساخت نوار پیشرفت انیمیشنی با استفاده از جاوااسکریپت

د

در بعضی از قسمت های سایت ممکن است نیاز به نمایش دادن درصد پیشرفت چیزی داشته باشید. این کار باعث میشود کاربر از میزان پیشرفت عملیات آگاه شود. در بعضی از جاها نیاز است که یک نوار پیشرفت قرار دهید که به صورت انیمیشنی پر شود. ما در این آموزش میخواهیم نحوه ساخت یک نوار پیشرفت انیمیشنی را با جاوااسکریپت به شما آموزش دهیم. این نوار پیشرفت از یک درصد تا صد درصد پر میشود. همچنین دارای درصد عددی نیز میباشد که همراه با نوار، به ۱۰۰% میرسد. این نوار پیشرفت را با استفاده از Html، CSS و جاوااسکریپت می سازیم.

نوار پیشرفت انیمیشنی با جاوااسکریپت

بد نیست ابتدا یک پیش نمایش از نتیجه نهایی ببینید.

قدم اول: اضافه کردن کد HTML

در نخستین گام باید کد html زیر را به جایی که میخواهید نوار پیشرفت نمایش داده شود اضافه کنید:

قدم دوم: اضافه کردن کد CSS

در گام دوم باید استایل نوار پیشرفت را تعیین کنیم. کد CSS زیر را به فایل استایل خود اضافه کنید. میتوانید این کد را به صورت توکار در فایل اصلی قالب هم قرار دهید:

در کد بالا، myProgress یک ظرف با پس زمینه خاکستری ایجاد می کند. این ظرف همان جایی است که نوار پیشرفت اصلی درون آن پر می شود. myBar هم همان نوار پیشرفت اصلی است که در حالت پایه عرضی برابر با یک درصد از ظرف را دارد. نتیجه کد بالا به شکل زیر است:

نوار پیشرفت انیمیشنی

قدم سوم: اضافه کردن کد جاوااسکریپت

حال با اضافه کردن کد جاوااسکریپت زیر، حالت انیمیشنی نوار پیشرفت را ایجاد میکنیم. بهتر است کد زیر را قبل از تگ پایان

قرار دهید:

ما در کد html که اول کار اضافه کردیم، برای تگ <button> خصوصیت onclick=”move()” را تعیین کرده بودیم. یعنی زمانی که روی این دکمه کلیک شد تابع onclick() اجرا شود. این تابع را در کد جاوااسکریپت بالا میبنید. عملیاتی که در این تابع باید انجام شود، بین دو آکولاد {} نوشته شده اند. این عملیات، عرض نوار پیشرفت که در ابتدا ۱ درصد بود را تبدیل به ۱۰۰ درصد می کنند.

نتیجه را میتوانید اینجا ببینید. پس از آنکه صفحه باز شد، روی دکمه Click Me کلیک کنید.

اضافه کردن درصد به صورت عددی

اگر میخواهید میزان پیشرفت را به صورت عددی هم در کنار یا داخل نوار پیشرفت نشان دهید، کد زیر را در جای دلخواه قرار دهید:

مثلا ما میخواهیم عدد را درون نوار پیشرفت بنویسیم، پس کد بالا را داخل دیو myBar میگذاریم:

پس از آن کد CSS زیر را به استایل خود اضافه کنید:

در نهایت هم کد جاوااسکریپت زیر را به فایل خود قبل از تگ پایان  <body/> اضافه کنید. توجه داشته باشید که اگر کد جاوااسکریپت قبلی که معرفی کردیم را اضافه کردید، باید آنرا حذف کرده و این یکی(!) را جایگزین کنید:

سفارش نرم افزار باشگاه مشتریان طراحی سایت، تبلیغات در گوگل ادوردز، سئو و دیجیتال مارکتینگ

۵۶ ۲۸۴ ۲۸۴ (۰۲۱)