Share Code Widget Tạo Đồng Hồ Đếm Giờ

 

Code widget tạo đồng hồ

Chào mừng các bạn đã quay trở lại với khaiphinguyen. Bài viết hôm nay mình sẽ chia sẻ code widget đồng giờ siêu đẹp mắt cho các bạn, có ''DarkMode'' luôn nhé.

| Hướng dẫn

 Truy cập vào Blogger.com, vào thẻ Trang, tạo một Trang mới, chuyển sang chế độ xem HTML

• Sao chép code trong hộp bên dưới và dán vào.



 
 <!-- Code tạo đồng hồ share by khaiphinguyen -->
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
  <section>
    <div class="container">
      <div class="icons">
        <i class="fas fa-moon"></i>
        <i class="fas fa-sun"></i>
      </div>
      <div class="time">
        <div class="time-colon">
          <div class="time-text">
            <span class="num hour_num">08</span>
            <span class="text">Hours</span>
          </div>
          <span class="colon">:</div>
        </div>
        <div class="time-colon">
          <div class="time-text">
            <span class="num min_num">45</span>
            <span class="text">Minutes</span>
          </div>
         <span class="colon">:</span>
        </div>
        <div class="time-colon">
          <div class="time-text">
            <span class="num sec_num">06</span>
            <span class="text">Seconds</span>
          </div>
         <span class="am_pm">AM</span>
        </div>
    </div>
    </div>
  </section>
 <script>
  let section = document.querySelector("section"),
  icons = document.querySelector(".icons");
  icons.onclick = ()=>{
    section.classList.toggle("dark");
  }
  // creating a function and calling it in every seconds
  setInterval(()=>{

    let date = new Date(),
    hour = date.getHours(),
    min = date.getMinutes(),
    sec = date.getSeconds();
    let d;
    d = hour < 12 ? "AM" : "PM"; //if hour is smaller than 12, than its value will be AM else its value will be pm
    hour = hour > 12 ? hour - 12 : hour; //if hour value is greater than 12 than 12 will subtracted ( by doing this we will get value till 12 not 13,14 or 24 )
    hour = hour == 0 ? hour = 12 : hour; // if hour value is  0 than it value will be 12

    // adding 0 to the front of all the value if they will less than 10
    hour = hour < 10 ? "0" + hour : hour;
    min = min < 10 ? "0" + min : min;
    sec = sec < 10 ? "0" + sec : sec;

document.querySelector(".hour_num").innerText = hour;
    document.querySelector(".min_num").innerText = min;
    document.querySelector(".sec_num").innerText = sec;
    document.querySelector(".am_pm").innerText = d;

  }, 1000); // 1000 milliseconds = 1s

  </script>
 <style>
    
@import url('https://fonts.googleapis.com/css2?family=Orbitron:[email protected];500;600;700&display=swap');

section{
  min-height: 10vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafafa;
  padding: 0 20px;
}
section.dark{
  background: #fafafa;
}
section .container{
  display: flex;
  align-items : center;
  justify-content: center;
  height: 220px;
  max-width: 560px;
  width: 100%;
  background: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  position: relative;
}
section.dark .container{
  background: #323840;
}
section .container .icons i{
  position: absolute;
  right: 17px;
  top: 17px;
  height: 30px;
  width: 30px;
  background: #24292D;
  color: #fff;
  text-align: center;
  line-height: 30px;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
}
section.dark .container .icons i{
  background: #fff;
  color: #323840;
}
.container .icons i.fa-sun{
  opacity: 0;
  pointer-events: none;
}
section.dark .container .icons i.fa-sun{
  opacity: 1;
  pointer-events: auto;
  font-size: 16px;
}
section .container .time{
  display: flex;
  align-items: center;
}
.container .time .time-colon{
  display: flex;
  align-items: center;
  position: relative;
}
.time .time-colon .am_pm{
   display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  top: 0;
  right: -50px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
}
section.dark .time .time-colon .am_pm{
  color: #fff;
}
.time .time-colon .time-text{
  height: 100px;
  width: 100px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  background: #F0F8FF;
  border-radius: 6px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
section.dark .time .time-colon .time-text{
  background: #24292D;
}
.time .time-colon .time-text,
.time .time-colon .colon{
  font-size: 35px;
  font-weight: 600;
}
section.dark .time .time-text .num,
section.dark .time .colon{
  color: #fff;
}
.time .time-colon .colon{
  font-size: 40px;
  margin: 0 10px;
}
.time .time-colon .time-text .text{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
}
section.dark  .time .time-colon .text{
  color: #fff;
}
  </style> 
  

Vậy là bạn đã có một đồng hồ đếm giờ cực đẹp, có cả Darkmode nữa. Hy vọng bài viết này sẽ hữu ích với các bạn. Cảm ơn các bạn đã đọc bài viết này, chúc các bạn thành công.

Nguyễn Phi Khải

Xin chào, đây là lời nhắn tự động. Mình là Nguyễn Phi Khải, người có trách nhiệm quản lý website khaiphinguyen, bạn có thắc mắc gì hãy bình luận bên dưới để được hỗ trợ nhé.

Đăng nhận xét

Mới hơn Cũ hơn