Mở đầu
Thời gian mang ý nghĩa quan trọng đối với những người có công việc đòi hỏi sự hoàn hảo chính xác về thời gian. Hôm nay Camta sẽ chia sẽ cho các bạn một Widget digital clock cực đẹp giúp website trở nên sinh động hơn.
Nó sẽ làm cho website bạn có thêm tí màu sắc.
Hướng dẫn
Chèn tất cả code bên dưới vào vị trí bạn muốn hiển thị
<div class="clock" aria-label="00:00:00 AM">
<div class="clock__block clock__block--delay2" aria-hidden="true" data-time-group>
<div class="clock__digit-group">
<div class="clock__digits" data-time="a">00</div>
<div class="clock__digits" data-time="b">00</div>
</div>
</div>
<div class="clock__colon"></div>
<div class="clock__block clock__block--delay1" aria-hidden="true" data-time-group>
<div class="clock__digit-group">
<div class="clock__digits" data-time="a">00</div>
<div class="clock__digits" data-time="b">00</div>
</div>
</div>
<div class="clock__colon"></div>
<div class="clock__block" aria-hidden="true" data-time-group>
<div class="clock__digit-group">
<div class="clock__digits" data-time="a">00</div>
<div class="clock__digits" data-time="b">00</div>
</div>
</div>
<div class="clock__block clock__block--delay2 clock__block--small" aria-hidden="true" data-time-group>
<div class="clock__digit-group">
<div class="clock__digits" data-time="a">PM</div>
<div class="clock__digits" data-time="b">AM</div>
</div>
</div>
</div>
<script src="https://camtavietnam.github.io/JS/clocj1.js"></script>
<link rel="stylesheet" href="https://camtavietnam.github.io/CSS/clock1.css"/>
Lời kết
Chúc các bạn thành công và đừng quên để lại bình luận, đánh giá bên dưới nhé!