سورس کد نوار پیشرفت ساده
تو این پست از سایت طاووس وب میخوام براتون یکی از ابتدایی ترین تمرین های Java Script رو پیاده سازی کنم، تا با تحلیل و مطالعه و همچنین ویرایش کد های استفاده شده داخلش بتونید موضوع متغیرها در جاوا اسکریپت رو درک کنید، و در عین حال یه سورس کد نوار پیشرفت ساده و سبک اما حرفه ای رو برای پروژه هاتون داشته باشید.
طراحی این سورس کد در بخش HTML فقط نیاز به دوتا تگ div داره که بتونن به عنوان کانتینر برای قاب دور این نوار پیشرفت و همچنین خود نوار پیشرفت قرار بگیرن و تو بخش CSS شما فقط کافیه به اون دوتا div استایل های اولیه رو بدید. بعد از طی کردن این مراحل شما باید یه متغیر داخل CSS تعریف کنید و مقدار اون رو 0 در نظر بگیرید که نقطه شروع نوار پیشرفتتون باشه.
از طراحی اولیه بگذریم بریم سراغ JS ، الان وقتشه که همون div که به عنوان خود نوار پیشرفت خودتون در نظر گرفته بودید رو داخل یه متغیر بریزید. تو مرحله بعد اگه یادتون باشه ما یه متغیر توی CSS تعریف کرده بودیم، و باید به همون مقدار درصدی که میخواید پیشرفت اعمال بشه رو بدید و مدل زمان اعمال شدن این تغییر رو به میلی ثانیه مقدار دهی کنید.
حالا که نحوه اجرای این کد رو یاد گرفتید وقتشه که برید و نوار پیشرفت خودتونو طراحی کنید. میتونید کد آماده این پروژه رو از باکس دانلودی که براتون قرار دادم از گیت هاب دانلود کنید. برای مشاهده پیشنمایش این کد هم میتونید روی لینک زیر کلیک کنید.
پسورد فایل : ندارد گزارش خرابی لینک
درباره مهدی حبیبی
طراح گرافیک، وب دیزاینر، برنامه نویس فرانت اند، مجنون قهوه
نوشته های بیشتر از مهدی حبیبی
دیدگاهتان را بنویسید