آموزش ساخت ساعت دیجیتال
سلام خدمت همه دوستان عزیز و همراهان نت کپی، با یک پست آموزشی از سری پست های آموزش رایگان برنامه نویسی در خدمت شما هستیم با آموزش ساخت ساعت دیجیتال
پس در ادامه این آموزش همراه باشید
با آموزش ساخت ساعت دیجیتال در خدمت شما هستیم
ابتدا یک فایل با نام index.html میسازیم و کد های زیر را داخلش قرار میدیم
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>نت کپی - مرجع قالب و اسکریپت فارسی</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="clock"> <div class="display"></div> </div> <script src="script.js"></script> </body> </html>
سپس یک فایل با نام style.css میسازیم و کد هایی Css زیر را داخلش قرار میدیم
@font-face { font-family: "Vazir"; src: url(Vazir-Regular.ttf); } * { margin: 0; padding: 0; box-sizing: border-box; } html,body { height: 100%; } body { display: grid; place-items: center; background: #131419; font-family: "Vazir"; } .clock { background: #131419; height: 120px; line-height: 120px; text-align: center; padding: 0 30px; box-shadow: -3px -3px 7px rgba(255,255,255,0.05), 3px 3px 5px rgba(0,0,0,0.5); } .clock .display { font-size: 60px; color: rgb(15, 250, 27); letter-spacing: 5px; }
و در مرحله آخر یک فایل با نام script.js میسازیم و کد های جاوا اسکریپت زیر را داخلش قرار میدیم
setInterval(function(){ const clock = document.querySelector(".display"); let time = new Date(); let sec = time.getSeconds(); let min = time.getMinutes(); let hr = time.getHours(); let day = 'AM'; if(hr > 12){ day = 'PM'; hr = hr -12; } if(hr == 0){ hr = 12; } if(sec < 10){ sec = '0' + sec; } if(min < 10){ min = '0' + min; } if(hr < 10){ hr = '0' + hr; } clock.textContent = hr + ':' + min + ':' + sec + " " + day; })
ما در این آموزش از فونت زیبای وزیر یک فونت رایگان هستش استفاده کردیم شما میتونید از هر فونتی
که مد نظرتون هست استفاده کنید برای تغییر فونت کافیست کد های مربوط به فونت را عوض کنید
و فونت دلخواه خودتون رو قرار بدید.
به همین سادگی ما تونستیم یک ساعت دیجیتال زیبا طراحی کنیم امید وارم خوشتون اومده باشه 🙂
نظرات و پیشنهادات خود را از انتهای همین پست از قسمت نظرات با ما در میان بگذارید.
با تشکر:)
نت کپی- مرجع دانلود قالب و اسکریپت فارسی
شما میتونید سورس این پروژه رو به صورت رایگان دانلود کنید
آموزش ویدئویی ساخت ساعت دیجیتال