Digital Clock đơn giản bằng HTML, CSS và Javascript

byHiju Blog -
0




href="https://blogger.googleusercontent.com/img/a/AVvXsEhrvXpENWmECcrIaRyGacIZzHGuBz2Lc1ywZ9TBzyz3RNO1Ah9ygZl4pUzcuyz85CmD6Ce-vJBmF5E2aTm2dCvj9XzUATcT3nab3PQyLuc1QxXV_l9VhpfB78fK_g5uw-dojs5oOPZR939G9tNtEKblCKR2uwZdCVG43ZyndaE-vDaFda3YVH1hBvIx1qw"
style="margin-left: 1em; margin-right: 1em;"
> alt="Digital Clock đơn giản bằng HTML, CSS và Javascript"
data-original-height="746"
data-original-width="1235"
height="386"
src="https://blogger.googleusercontent.com/img/a/AVvXsEhrvXpENWmECcrIaRyGacIZzHGuBz2Lc1ywZ9TBzyz3RNO1Ah9ygZl4pUzcuyz85CmD6Ce-vJBmF5E2aTm2dCvj9XzUATcT3nab3PQyLuc1QxXV_l9VhpfB78fK_g5uw-dojs5oOPZR939G9tNtEKblCKR2uwZdCVG43ZyndaE-vDaFda3YVH1hBvIx1qw=w640-h386"
title="Digital Clock đơn giản bằng HTML, CSS và Javascript"
width="640"
/>













Trong hướng dẫn ngắn này, chúng ta sẽ cùng nhau khám phá cách tạo
một đồng hồ số đơn giản bằng sự kết hợp của HTML và CSS. Chúng ta
sẽ tạo ra một giao diện đồng hồ thanh lịch chỉ bằng một vài dòng
mã HTML và một chút mã CSS để tạo kiểu. Điều này sẽ giúp bạn hiểu
cách tương tác giữa hai ngôn ngữ này để tạo ra một hiệu ứng thú
vị. Bắt đầu thôi!







Các bài viết liên quan:




  • href="https://www.hijublog.com/2023/08/tao-hieu-ung-trai-tim-khi-di-chuot.html"
    target="_blank"
    >Tạo Hiệu Ứng Trái Tim Đầy Màu Sắc Khi Di Chuột bằng HTML, CSS
    và Javascript     >


  • href="https://www.hijublog.com/2023/08/cach-lam-video-slider-don-gian.html"
    target="_blank"
    >Cách làm Video Slider đơn giản bằng HTML, CSS và Javascript     >


  • href="https://www.hijublog.com/2023/08/input-validator-don-gian-bang-html-css-javascript.html"
    target="_blank"
    >Input Validator đơn giản bằng HTML, CSS và Javascript     >


  • href="https://www.hijublog.com/2023/08/animated-login-form-don-gian-bang-html-css.html"
    target="_blank"
    >Animated Login Form đơn giản bằng HTML và CSS     >


  • href="https://www.hijublog.com/2023/08/sticky-header-on-scroll-don-gian-bang-html-css-javascript.html"
    target="_blank"
    >Sticky Header On Scroll đơn giản bằng HTML, CSS và
    Javascript     >









Bước 1: Thêm HTML





style="background: rgb(248, 248, 248); border-color: gray; border-image: initial; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;"
>
style="line-height: 125%; margin: 0px;"
><div id="clock">
<h2>The time is now</h2>
<div id="time">
<div><span id="hour">00</span><span>Hours</span></div>
<div><span id="minutes">00</span><span>Minutes</span></div>
<div><span id="seconds">00</span><span>Seconds</span></div>
<div><span id="ampm"></span></div>
</div>
</div>





Bước 2: Thêm CSS





style="background: rgb(248, 248, 248); border-color: gray; border-image: initial; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;"
>
style="line-height: 125%; margin: 0px;"
>@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}

html {
font-family: 'Poppins', sans-serif;
}

body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #060a1f;
}

#clock h2 {
color: #fff;
text-align: center;
margin: 10px 0;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 24px;
}

#clock #time {
display: flex;
align-items: flex-end;
}

#clock #time div {
margin: 0 5px;
-webkit-box-reflect: below 5px linear-gradient(transparent, rgba(41, 41, 41, 0.267));
}

#clock #time div span {
width: 100px;
height: 80px;
background-color: #54B435;
color: #fff;
font-weight: 300;
display: flex;
justify-content: center;
align-items: center;
font-size: 42px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
z-index: 10;
}

#clock #time div span:nth-child(2) {
height: 30px;
font-size: 14px;
letter-spacing: 2px;
font-weight: 500;
box-shadow: none;
background-color: #82CD47;
text-transform: uppercase;
z-index: 9;
}

#clock #time div:last-child span {
background-color: #fff;
color: #333;
width: 80px;
height: 60px;
font-size: 28px;
}

#clock #time div:nth-child(3) span {
background-color: #ff006a;
}

#clock #time div:nth-child(3) span:nth-child(2) {
background-color: #ec0062;
}





Bước 3: Thêm Javascript





style="background: rgb(248, 248, 248); border-color: gray; border-image: initial; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;"
>
style="line-height: 125%; margin: 0px;"
>function clock() {
const hour = document.querySelector("#hour");
const minutes = document.querySelector("#minutes");
const seconds = document.querySelector("#seconds");
const ampm = document.querySelector("#ampm");

const date = new Date();

let h = date.getHours();
let m = date.getMinutes();
let s = date.getSeconds();

if (h > 12) {
ampm.innerHTML = "PM";
} else {
ampm.innerHTML = "AM";
}

hour.innerHTML = h > 10 ? h : "0" + h;
minutes.innerHTML = m > 10 ? m : "0" + m;
seconds.innerHTML = s > 10 ? s : "0" + s;
}

const interval = setInterval(clock, 1000);





Full tutorial:



allowfullscreen=""
class="BLOG_video_class"
height="379"
src="https://www.youtube.com/embed/1lKN5T13Lnk"
width="670"
youtube-src-id="1lKN5T13Lnk"
>



Hoàn thành





Kết luận lại, việc tạo một đồng hồ số bằng HTML và CSS không chỉ là một
bài học về cách tương tác giữa hai ngôn ngữ này, mà còn thú vị và bổ ích.
Bạn đã thấy cách sử dụng CSS để tạo kiểu cho các thành phần và cách HTML
và CSS có thể hoạt động cùng nhau để tạo ra hiệu ứng động. Bước nhỏ này có
thể dẫn bạn đến những dự án phức tạp hơn và sáng tạo hơn trong tương lai.




Hãy tiếp tục khám phá và nâng cao kỹ năng của mình trong lĩnh vực
front-end. Nhớ rằng, việc thực hành và tìm hiểu liên tục sẽ giúp bạn ngày
càng trở nên thành thạo hơn trong việc xây dựng các hiệu ứng và giao diện
độc đáo trên web. Cảm ơn bạn đã theo dõi hướng dẫn này và chúc mừng bạn đã
hoàn thành một bài học thú vị về việc sử dụng HTML và CSS để tạo đồng hồ
số!


Tags

Hiju Blog

I'm HiJu

You may like these posts

Post a Comment

Previous Post Next Post