Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Sudah waktunya sholat subuh ya, keburu entar waktu sholatnya habis
05:48:41 Waktu Indonesia
Maka sesungguhnya bersama kesulitan itu ada kemudahan (QS Al Insyirah 5)
Assalamualaikum, jika postingan blog kamu mengalami error, pastikan postingan kamu lebih dari 10 postingan, atau atur di menu widget breaking news Subscribe
0

Blogger HTML Kodları Kullanarak Digital Saat Oluşturma

2 menit

Blogger için sadece HTML kodlarını kullanarak çok güzel bir Digital Saat oluşturmak için aşağıda ki kodları sitenizde görünmesini istediğiniz yere ekleyebilirsiniz.

DİGİTAL CLOCK HTML CODE


      <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"></link>
  <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">:</span>
        </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:wght@400;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> 
  

Bütün işlemler bu kadar herkese kolay gelsin.


DEMO

Bilgisayar ve Yazılım Programları Hakkında En Güncel Bilgiler Bu Blog'da Bizi Takip Etmeyi Unutmayın.

Yorum Gönder

Pergunakanlah kecerdasan anda saat berkomentar, dan tinggalkan komentar sesuai topik tulisan, menuliskan merek template selain merek template yang kami posting akan langsung kami hapus atau kami anggap sebagai spam
Masukkan URL Gambar atau URL Video YouTube atau Potongan Kode , atau Quote , lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image video quote pre code
Blogger'da Daha Fazla Araç Bağlantı Listesi Sayfası Oluşturma   Blogger'da Yapışkan Not Oluşturma Aracı   Blogger Fancy Fonts Style Generator   Blogger Web Sitenize Şık Kahraman Başlığı Nasıl Eklenir?   JavaScript Kullanarak Gradient Generator Aracı Oluşturma   Blogger'da Yaş Hesaplama Aracı Oluşturma   Blogger'da Küçük Resim Oluşturma Aracı   Blogger Aracı JavaScript'te Metni Dosya Olarak Kaydetme   Blogger Metin Boyutlandırma Özelliği Ekleme   Blogger JavaScript Kullanarak Yazma Animasyonu ile Kullanım Koşulları Oluşturma Aracı