style="margin-left: 1em; margin-right: 1em;"
>
data-original-height="608"
data-original-width="1083"
height="360"
src="https://blogger.googleusercontent.com/img/a/AVvXsEjdijPWPVyCXscGT_tFXK_y0cgUgag8Ng-JvgUjG6jAHhXD5gpKWHtt6oipO7uOodNb7Kz3wP2Vau-u86BI9Mbw9MWwrjs0wJaso1v4AKpUa-nUJCEd0B8wxjYkM_gLkovDKoLbOZbfU_OkTbS9KPS6fybbDNKza_z6zDYamV6mJawkmyJM42f89sMoUEo=w640-h360"
title="Làm đồng hồ treo tường đơn giản bằng HTML, CSS và Javascript"
width="640"
/>
Nếu bạn đang tìm kiếm một dự án thú vị để tạo ra một ứng dụng web sử dụng
HTML, CSS và JavaScript, thì chúng tôi có một gợi ý tuyệt vời cho bạn - hãy
cùng bắt đầu xây dựng một chiếc đồng hồ treo tường đơn giản. Đồng hồ treo
tường không chỉ là một công cụ hữu ích để theo dõi thời gian, mà còn là một
dự án lý thú để bạn thực hành và nắm vững ba ngôn ngữ lập trình cơ bản của
web.
Trong hướng dẫn này, chúng ta sẽ dạo chơi qua quá trình tạo ra một đồng hồ
treo tường hoàn chỉnh bằng HTML để xây dựng cấu trúc, CSS để tạo kiểu và
trang trí, và cuối cùng là JavaScript để biến nó thành một ứng dụng có tính
năng thực tế. Dự án này sẽ giúp bạn hiểu rõ hơn về cách kết hợp và tương tác
giữa ba thành phần quan trọng này để tạo ra một sản phẩm web độc đáo.
Với sự sáng tạo và kiên nhẫn, bạn sẽ có cơ hội tạo ra một chiếc đồng hồ treo
tường riêng biệt, thể hiện phong cách và cá nhân hóa theo ý muốn của bạn.
Hãy cùng bắt đầu và khám phá hướng dẫn cụ thể về cách tạo đồng hồ treo tường
đơn giản nhưng đầy tính thú vị này.
Các bài viết liên quan:
target="_blank"
>Cách làm Video Slider đơn giản bằng HTML, CSS và
Javascript >
target="_blank"
>Input Validator đơn giản bằng HTML, CSS và Javascript >
target="_blank"
>Animated Login Form đơn giản bằng HTML và CSS >
target="_blank"
>Sticky Header On Scroll đơn giản bằng HTML, CSS và
Javascript >
target="_blank"
>Password Strength Checker đơn giản bằng HTML, CSS và
Javascript >
target="_blank"
>Làm máy tính bỏ túi đơn giản bằng HTML, CSS và Javascript >
Bước 1: Thêm HTML
>
><div class="clock">
<div class="hour">
<div class="hr" id="hr"></div>
</div>
<div class="min">
<div class="mn" id="mn"></div>
</div>
<div class="sec">
<div class="sc" id="sc"></div>
</div>
</div>
Bước 2: Thêm CSS
>
>* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #54d1ff;
}
.clock {
width: 350px;
height: 350px;
display: flex;
justify-content: center;
align-items: center;
background-image: url(clock.png);
background-size: cover;
background-color: #fff;
border-radius: 50%;
border: 20px solid #fff;
box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.1);
}
.clock::before {
content: '';
position: absolute;
width: 15px;
height: 15px;
background-color: #848484;
border-radius: 50%;
border: 2px solid #fff;
z-index: 1000;
}
.hour, .min, .sec {
position: absolute;
}
.hour, .hr {
width: 160px;
height: 160px;
}
.min, .mn {
width: 190px;
height: 190px;
}
.sec, .sc {
width: 230px;
height: 230px;
}
.hr, .mn, .sc {
display: flex;
justify-content: center;
position: absolute;
border: 50%;
}
.hr::before {
content: '';
position: absolute;
width: 8px;
height: 80px;
background-color: #848484;
z-index: 10;
border-radius: 6px 6px 0 0;
}
.mn::before {
content: '';
position: absolute;
width: 4px;
height: 90px;
background-color: #d6d6d6;
z-index: 11;
border-radius: 6px 6px 0 0;
}
.sc::before {
content: '';
position: absolute;
width: 2px;
height: 120px;
background-color: #ff6767;
z-index: 12;
border-radius: 6px 6px 0 0;
}
Bước 3: Thêm Javascript
>
>const deg = 6;
const hr = document.querySelector('#hr');
const mn = document.querySelector('#mn');
const sc = document.querySelector('#sc');
setInterval(() => {
let date = new Date();
let hh = date.getHours() * 30;
let mm = date.getMinutes() * deg;
let ss = date.getSeconds() * deg;
hr.style.transform = `rotate(${hh + mm/12}deg)`;
mn.style.transform = `rotate(${mm}deg)`;
sc.style.transform = `rotate(${ss}deg)`;
})