วิธีสร้างนาฬิกาดิจิทัลโดยใช้ HTML, CSS และ JavaScript

วิธีสร้างนาฬิกาดิจิทัลโดยใช้ HTML, CSS และ JavaScript

นาฬิกาดิจิตอลเป็นหนึ่งในโครงการเริ่มต้นที่ดีที่สุดใน JavaScript มันค่อนข้างง่ายที่จะเรียนรู้สำหรับคนทุกระดับความสามารถ





ในบทความนี้ คุณจะได้เรียนรู้วิธีสร้างนาฬิกาดิจิทัลของคุณเองโดยใช้ HTML, CSS และ JavaScript คุณจะได้รับประสบการณ์ตรงจากแนวคิด JavaScript ต่างๆ เช่น การสร้างตัวแปร การใช้ฟังก์ชัน การทำงานกับวันที่ การเข้าถึงและเพิ่มคุณสมบัติให้กับ DOM และอื่นๆ



วิธีดู dpi ของภาพ

มาเริ่มกันเลย.





ส่วนประกอบของนาฬิกาดิจิตอล

นาฬิกาดิจิตอลมีสี่ส่วน: ชั่วโมง นาที วินาที และเส้นเมอริเดียม

โครงสร้างโฟลเดอร์ของโครงการนาฬิกาดิจิตอล

สร้างโฟลเดอร์รูทที่มีไฟล์ HTML, CSS และ JavaScript คุณสามารถตั้งชื่อไฟล์อะไรก็ได้ที่คุณต้องการ ที่นี่ชื่อโฟลเดอร์รูท นาฬิกาดิจิตอล . ตามแบบแผนการตั้งชื่อมาตรฐาน ไฟล์ HTML, CSS และ JavaScript มีชื่อว่า index.html , สไตล์.css , และ script.js ตามลำดับ



การเพิ่มโครงสร้างให้กับนาฬิกาดิจิตอลโดยใช้ HTML

เปิด index.html ไฟล์และวางรหัสต่อไปนี้:





Digital Clock Using JavaScript






ที่นี่ div ถูกสร้างขึ้นด้วย an NS ของ นาฬิกาดิจิตอล . div นี้ใช้เพื่อแสดงนาฬิกาดิจิตอลโดยใช้ JavaScript สไตล์.css เป็นหน้า CSS ภายนอกและเชื่อมโยงกับหน้า HTML โดยใช้ a แท็ก ในทำนองเดียวกัน script.js เป็นหน้า JS ภายนอกและเชื่อมโยงกับหน้า HTML โดยใช้ < สคริปต์> แท็ก



การเพิ่มฟังก์ชันการทำงานให้กับนาฬิกาดิจิตอลโดยใช้ JavaScript

เปิด script.js ไฟล์และวางรหัสต่อไปนี้:

function Time() {
// Creating object of the Date class
var date = new Date();
// Get current hour
var hour = date.getHours();
// Get current minute
var minute = date.getMinutes();
// Get current second
var second = date.getSeconds();
// Variable to store AM / PM
var period = '';
// Assigning AM / PM according to the current hour
if (hour >= 12) {
period = 'PM';
} else {
period = 'AM';
}
// Converting the hour in 12-hour format
if (hour == 0) {
hour = 12;
} else {
if (hour > 12) {
hour = hour - 12;
}
}
// Updating hour, minute, and second
// if they are less than 10
hour = update(hour);
minute = update(minute);
second = update(second);
// Adding time elements to the div
document.getElementById('digital-clock').innerText = hour + ' : ' + minute + ' : ' + second + ' ' + period;
// Set Timer to 1 sec (1000 ms)
setTimeout(Time, 1000);
}
// Function to update time elements if they are less than 10
// Append 0 before time elements if they are less than 10
function update(t) {
if (t <10) {
return '0' + t;
}
else {
return t;
}
}
Time();

ทำความเข้าใจกับโค้ด JavaScript

NS เวลา() และ อัปเดต() ฟังก์ชันที่ใช้เพื่อเพิ่มฟังก์ชันการทำงานให้กับนาฬิกาดิจิตอล



รับองค์ประกอบเวลาปัจจุบัน

ในการรับวันที่และเวลาปัจจุบัน คุณต้องสร้างวัตถุวันที่ นี่คือไวยากรณ์สำหรับสร้างวัตถุ Date ใน JavaScript:

var date = new Date();

วันที่และเวลาปัจจุบันจะถูกเก็บไว้ใน วันที่ ตัวแปร. ตอนนี้ คุณต้องแยกชั่วโมง นาที และวินาทีปัจจุบันออกจากวัตถุวันที่

date.getHours() , date.getMinutes(), และ date.getSeconds () ใช้เพื่อรับชั่วโมง นาที และวินาทีปัจจุบันตามลำดับจากวัตถุวันที่ องค์ประกอบเวลาทั้งหมดจะถูกเก็บไว้ในตัวแปรแยกต่างหากสำหรับการดำเนินการต่อไป

var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();

การกำหนดเวลาเที่ยงปัจจุบัน (AM/PM)

เนื่องจากนาฬิกาดิจิทัลอยู่ในรูปแบบ 12 ชั่วโมง คุณจึงต้องกำหนดเส้นรอบวงที่เหมาะสมตามชั่วโมงปัจจุบัน หากชั่วโมงปัจจุบันมากกว่าหรือเท่ากับ 12 เส้นเมอริเดียมคือ PM (Post Meridiem) มิฉะนั้น จะเป็น AM (Ante Meridiem)

var period = '';
if (hour >= 12) {
period = 'PM';
} else {
period = 'AM';
}

การแปลงชั่วโมงปัจจุบันในรูปแบบ 12 ชั่วโมง

ตอนนี้ คุณต้องแปลงชั่วโมงปัจจุบันเป็นรูปแบบ 12 ชั่วโมง หากชั่วโมงปัจจุบันเป็น 0 ชั่วโมงปัจจุบันจะอัปเดตเป็น 12 (ตามรูปแบบ 12 ชั่วโมง) นอกจากนี้ หากชั่วโมงปัจจุบันมากกว่า 12 ชั่วโมงจะลดลง 12 เพื่อให้สอดคล้องกับรูปแบบเวลา 12 ชั่วโมง

ที่เกี่ยวข้อง: วิธีปิดการใช้งานการเลือกข้อความ ตัด คัดลอก วาง และคลิกขวาบนหน้าเว็บ

if (hour == 0) {
hour = 12;
} else {
if (hour > 12) {
hour = hour - 12;
}
}

กำลังอัปเดตองค์ประกอบเวลา

คุณต้องอัปเดตองค์ประกอบเวลาหากน้อยกว่า 10 (หลักเดียว) 0 ถูกผนวกเข้ากับองค์ประกอบเวลาหลักเดียวทั้งหมด (ชั่วโมง นาที วินาที)

hour = update(hour);
minute = update(minute);
second = update(second);
function update(t) {
if (t <10) {
return '0' + t;
}
else {
return t;
}
}

การเพิ่มองค์ประกอบเวลาลงใน DOM

ขั้นแรก เข้าถึง DOM โดยใช้ ID ของ div เป้าหมาย ( นาฬิกาดิจิตอล ). จากนั้นองค์ประกอบเวลาจะถูกกำหนดให้กับ div โดยใช้ innerText เซ็ตเตอร์

document.getElementById('digital-clock').innerText = hour + ' : ' + minute + ' : ' + second + ' ' + period;

อัพเดทนาฬิกาทุกวินาที

นาฬิกาอัพเดททุกวินาทีโดยใช้ปุ่ม setTimeout() วิธีการในจาวาสคริปต์

setTimeout(Time, 1000);

จัดแต่งทรงผมนาฬิกาดิจิตอลโดยใช้ CSS

เปิด สไตล์.css ไฟล์และวางรหัสต่อไปนี้:

ที่เกี่ยวข้อง: วิธีใช้ CSS box-shadow: เคล็ดลับและตัวอย่าง

/* Importing Open Sans Condensed Google font */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap');

#digital-clock {
background-color: #66ffff;
width: 35%;
margin: auto;
padding-top: 50px;
padding-bottom: 50px;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 64px;
text-align: center;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

CSS ด้านบนนี้ใช้เพื่อจัดรูปแบบนาฬิกาดิจิทัล ที่นี่ใช้แบบอักษร Open Sans Condensed เพื่อแสดงข้อความของนาฬิกา นำเข้าจากแบบอักษร Google โดยใช้ @นำเข้า . NS #นาฬิกาดิจิตอล id selector ใช้สำหรับเลือก div เป้าหมาย ตัวเลือก ID ใช้ NS คุณลักษณะขององค์ประกอบ HTML เพื่อเลือกองค์ประกอบเฉพาะ

ที่เกี่ยวข้อง: ตัวอย่างโค้ด CSS อย่างง่ายที่คุณเรียนรู้ได้ใน 10 นาที

หากคุณต้องการดูซอร์สโค้ดที่สมบูรณ์ที่ใช้ในบทความนี้ นี่คือ ที่เก็บ GitHub . นอกจากนี้ หากคุณต้องการดูเวอร์ชันสดของโปรเจ็กต์นี้ คุณสามารถตรวจสอบได้ผ่าน GitHub Pages .

บันทึก : รหัสที่ใช้ในบทความนี้คือ MIT ได้รับใบอนุญาต .

พัฒนาโปรเจ็กต์ JavaScript อื่นๆ

หากคุณเป็นมือใหม่ที่ JavaScript และต้องการเป็นนักพัฒนาเว็บที่ดี คุณต้องสร้างโปรเจ็กต์ที่ใช้ JavaScript ที่ดี พวกเขาสามารถเพิ่มมูลค่าให้กับประวัติย่อและอาชีพของคุณได้

คุณสามารถทดลองใช้บางโครงการ เช่น เครื่องคิดเลข, เกมเพชฌฆาต, Tic Tac Toe, แอปสภาพอากาศ JavaScript, หน้า Landing Page แบบโต้ตอบ, เครื่องมือแปลงน้ำหนัก, กรรไกรตัดกระดาษ เป็นต้น

วิธีเชื่อมต่อ wifi โดยไม่ต้องใช้รหัสผ่านบน iphone

หากคุณกำลังมองหาโปรเจ็กต์ที่ใช้ JavaScript ต่อไป เครื่องคิดเลขธรรมดาคือตัวเลือกที่ยอดเยี่ยม

แบ่งปัน แบ่งปัน ทวีต อีเมล วิธีสร้างเครื่องคิดเลขอย่างง่ายโดยใช้ HTML, CSS และ JavaScript

โค้ดที่คำนวณได้ง่ายเป็นวิธีที่จะไปในการเขียนโปรแกรม ดูวิธีสร้างเครื่องคิดเลขของคุณเองใน HTML, CSS และ JS

อ่านต่อไป หัวข้อที่เกี่ยวข้อง เกี่ยวกับผู้เขียน ยุวราช จันทรา(60 บทความที่ตีพิมพ์)

Yuvraj เป็นนักศึกษาระดับปริญญาตรีสาขาวิทยาการคอมพิวเตอร์ที่มหาวิทยาลัยเดลี ประเทศอินเดีย เขาหลงใหลเกี่ยวกับ Full Stack Web Development เมื่อไม่ได้เขียน เขากำลังสำรวจความลึกของเทคโนโลยีต่างๆ

เพิ่มเติมจาก Yuvraj Chandra

สมัครรับจดหมายข่าวของเรา

เข้าร่วมจดหมายข่าวของเราสำหรับเคล็ดลับทางเทคนิค บทวิจารณ์ eBook ฟรี และดีลพิเศษ!

คลิกที่นี่เพื่อสมัครสมาชิก