*ถ้าต้องการเปลี่ยนเป็นเลขอารบิกสามารถเปลี่ยนในข้อความในแท็ก span ได้เลยครับ และแนะนำให้ลบการตั้งค่าบีบตัวหนังสือ style="letter-spacing: -2px;" ที่อยู่ในแท็ก <b> ออกไป
<div class="container3">
<div class="clock">
<div style="--clr: #000000; --h: 35px" id="hour" class="hand"> <!--เข็มชั่วโมง เปลี่ยนสีหลัง --clr: ความยาวหลัง --h: -->
<i></i>
</div>
<div style="--clr: #00a6ff; --h: 45px" id="min" class="hand"> <!--เข็มนาที เปลี่ยนสีหลัง --clr: ความยาวหลัง --h: -->
<i></i>
</div>
<div style="--clr: #ff0000; --h: 55px" id="sec" class="hand"> <!--เข็มวินาที เปลี่ยนสีหลัง --clr: ความยาวหลัง --h: -->
<i></i>
</div>
<!-- ตัวเลขที่แสดงในนาฬิกาแอนะล็อก letter-spacing: -2px เพื่อบีบตัวหนังสือไม่ให้ใช้พื้นที่เยอะ ถ้าเป็นตัวเลขสามารถลบออกได้-->
<span style="--i: 1;"><b style="letter-spacing: -2px;">I</b></span>
<span style="--i: 2;"><b style="letter-spacing: -2px;">II</b></span>
<span style="--i: 3"><b style="letter-spacing: -2px;">III</b></span>
<span style="--i: 4"><b style="letter-spacing: -2px;">IIII</b></span>
<span style="--i: 5"><b style="letter-spacing: -2px;">V</b></span>
<span style="--i: 6"><b style="letter-spacing: -2px;">VI</b></span>
<span style="--i: 7"><b style="letter-spacing: -2px;">VII</b></span>
<span style="--i: 8"><b style="letter-spacing: -2px;">VIII</b></span>
<span style="--i: 9"><b style="letter-spacing: -2px;">IX</b></span>
<span style="--i: 10"><b style="letter-spacing: -2px;">X</b></span>
<span style="--i: 11"><b style="letter-spacing: -2px;">XI</b></span>
<span style="--i: 12"><b style="letter-spacing: -2px;">XII</b></span>
</div>
</div>
<!-- ส่วนแสดงนาทีนาฬิกาดิจิทัล -->
<div class="text-center mt-4">
<span id="jam" class="jamDigital">00</span> <!-- แสดงชั่วโมง -->
<span class="jamDigital"> : </span>
<span id="minit" class="jamDigital">00</span> <!-- แสดงนาที -->
<span class="jamDigital"> : </span>
<span id="saah" class="jamDigital">00</span> <!-- แสดงวินาที -->
</div>
<!-- ส่วนแสดงวันที่ -->
<div class="text-center mt-4">
<span id="tanggal"></span>
</div>
/** ตั้งค่ากรอบนอกนาฬิกา */
.container3 {
position: relative;
display: flex;
justify-content: center; /** จัดกึ่งกลาง */
align-items: center; /** จัดกึ่งกลาง */
/* min-height: 100vh; */ /** ตั้งค่าความสูง */
margin-bottom: 20px; /** ความห่างระหว่างนาฬิกาแอนะล็อกกับนาฬิกาดิจิทัล*/
}
/** ตั้งค่ากรอบนาฬิกาแอนะล็อก */
.clock {
width: 160px; /** ความกว้างนาฬิกาแอนะล็อก */
height: 160px; /** ความสูงนาฬิกาแอนะล็อก */
border-radius: 50%; /** ตั้งให้ขอบเป็นวงกลม */
background-color: rgba(255, 255, 255, .8); /** สีพื้นนาฬิกา */
border: 2px solid rgba(255, 255, 255, 0.25); /** สีขอบนาฬิกา */
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.4); /** เงารอบๆ นาฬิกา*/
display: flex; /** */
justify-content: center; /** จัดกึ่งกลาง */
align-items: center; /** จัดกึ่งกลาง */
}
/** ตั้งค่าตำแหน่งตัวเลขในนาฬิกาแอนะล็อก */
.clock span {
position: absolute; /** กำหนดตำแหน่งแบบอิสระ */
transform: rotate(calc(30deg * var(--i))); /** ประกาศตัวแปรเพื่อเอาค่ามาคำนวณตำแหน่งตัวเลข */
inset: 3px; /** */
text-align: center; /** จัดตัวเลขให้อยู่กึ่งกลาง */
}
/** กำหนดตัวเลขในนาฬิกาแอนะล็อกเป็นตัวหนา */
.clock span b {
/** transform: rotate(calc(-30deg * var(--i))); */ /** กำหนดให้หมุนกลับ เพื่อไม่ให้ตัวเลขหมุนตามวงกลม ถ้าใช้เลข 1-12 ให้เปิด*/
display: inline-block; /** */
font-size: 18px; /** กำหนดขนาดตัวเลข */
}
/** ตั้งค่าจุดกลมที่อยู่กึ่งกลางนาฬิกาแอนะล็อก */
.clock::before {
content: ''; /** */
position: absolute; /** กำหนดตำแหน่งแบบอิสระ */
width: 8px; /** ความกว้าง */
height: 8px; /** ความสูง */
border-radius: 50%; /** กำหนดขอบให้เป็นวงกลม */
background-color: #f00; /** ตั้งค่าสี */
z-index: 2; /** ตั้งให้อยู่หน้า*/
}
/** ต้งค่าเข็มนาฬิกาแอนะล็อก */
.hand {
position: absolute; /** กำหนดตำแหน่งแบบอิสระ */
display: flex; /** */
justify-content: center; /** จัดกึ่งกลาง */
align-items: flex-end; /** */
}
.hand i {
position: absolute; /** กำหนดตำแหน่งแบบอิสระ */
background-color: var(--clr); /** ประกาศตัวแปรเพื่อดึงค่าสีเข็มนาฬิกา */
width: 4px; /** ขนาดความกว้างเข็ม */
height: var(--h); /** ประกาศตัวแปรเพื่อค่าความยาวของเข็ม */
border-radius: 8px; /** กำหนดขอบมนต์ */
}
/** กำหนดรูปแบบตัวอักษรนาฬิกาดิจิทัล*/
.jamDigital {
font-size: 4.4vh; /** ขนาดตักอักษรนาฬิกาดิจิทัล */
font-weight: bold; /** ตั้งเป็นตัวหนา */
}
/* ============== end clock CSS========== */
ส่วนสุดท้ายซึ่งเป็นส่วนสำคัญที่จะทำให้นาฬิกาทำงานคือ โค้ด JavaScript ซึ่งสามารถวางในส่วนของ body โดยครอบด้วยแท็ก script หรือ จะสร้างไฟล์แยกต่างหาก แล้วลิ้งค์เข้ามาก็ได้โดยใช้ <script src="file.js">
let hr = document.getElementById('hour'); //ชั่วโมงนาฬิกาแอนะล็อก
let min = document.getElementById('min'); //นาทีนาฬิกาแอนะล็อก
let sec = document.getElementById('sec'); //วินาทีนาฬิกาแอนะล็อก
let jam = document.getElementById('jam'); //ชั่วโมงนาฬิกาดิจิทัล
let minit = document.getElementById('minit'); //นาทีนาฬิกาดิจิทัล
let saah = document.getElementById('saah'); //วินาทีนาฬิกาดิจิทัล
let tanggal = document.getElementById('tanggal'); //วันที่
function displayTime(){
let date = new Date();
// แยกชั่วโมง นาที และวินาทีจาก date
let hh = date.getHours(); //ชั่วโมง
let mm = date.getMinutes(); //นาที
let ss = date.getSeconds(); //วินาที
// ตั้งค่าการหมุนเข็มนาฬิกาแอนะล็อก
let hRotation = 30*hh + mm/2; //เข็มชั่วโมง เอาชั่วโมงคูณ 30 องศา + นาทีหาร 2 เพื่อให้ได้ 30 องศา (1ชม. = 30องศา)
let mRotation = 6*mm; //เข็มนาที เอานาทีคูณด้วย 6 เพราะ 360 หาร 60 = 6
let sRotation = 6*ss; //เข็มวินาที เอาวินาทีคูณด้วย 6 เพราะ 360 หาร 60 = 6
// รับค่าองศาที่ตั้งไว้มาตั้งค่าให้เข็มหมุนตาม
hr.style.transform = `rotate(${hRotation}deg)`; //ชั่วโมง
min.style.transform = `rotate(${mRotation}deg)`; //นาที
sec.style.transform = `rotate(${sRotation}deg)`; //วินาที
// ตั้งค่าให้นาฬิกาดิจิทัลแสดงค่า 2 หลัก
if(mm < 10){mm = '0'+mm} //นาที
if(ss < 10){ss = '0'+ss} //วินาที
//รับค่าเวลามาแสดงผลในนาฬิกาดิจิทัล
jam.innerText = hh //ชั่วโมง
minit.innerText = mm //นาที
saah.innerText = ss //วินาที
//กำหนดวันและเดือนเป็นภาษาไทย
let thDay = ['อาทิตย์','จันทร์','อังคาร','พุธ','พฤหัสฯ','ศุกร์','เสาร์']
let thMonth = ['มกราคม','กุมภาพันธ์','มีนาคม','เมษายน','พฤษภาคม','มิถุนายน','กรกฎาคม','สิงหาคม','กันยายน','ตุลาคม','พฤศจิกายน','ธันวาคม']
//แสดงผลวันที่ปัจจุบัน
tanggal.innerText = 'วัน'+thDay[date.getDay()] //วัน ครอบด้วย thDay เพื่อแสดงเป็นวันภาษาไทย (ค่าที่ได้เป็นแบบอาร์เรย์)
+' '+ date.getDate() //วันที่
+' '+ thMonth[date.getMonth()] //เดือน ครอบด้วย thMonth เพื่อแสดงเป็นภาษาไทย (ค่าที่ได้เป็นแบบอาร์เรย์)
+' '+ [date.getFullYear()+543] //ปี ใส่ใน [] เพื่อให้คำนวณได้ ถ้าไม่ใส่ [] จะเป็นการต่อคำ
}
setInterval(displayTime, 1000); //เรียกใช้ฟังก์ชั่นทุกๆ 1 วินาที เพื่อให้เข็มนาฬิกาแสดงผลเป็นปัจจุบันและสมจริง