skrip jAM dINDING

COPY SCRIP INI DAN PASANG DI BLOG KALIAN

JAM ANALOG

<div id="clock-container">

  <div class="clock">

    <div class="hand hour" id="hour"></div>

    <div class="hand minute" id="minute"></div>

    <div class="hand second" id="second"></div>

    <div class="center"></div>

  </div>

</div>

<style>

#clock-container {

  display: flex;

  justify-content: center;

  align-items: center;

  height: 250px;

}

.clock {

  width: 200px;

  height: 200px;

  border: 8px solid #222;

  border-radius: 50%;

  position: relative;

  background: #fff;

}

.hand {

  position: absolute;

  bottom: 50%;

  left: 50%;

  transform-origin: bottom;

  transform: translateX(-50%) rotate(0deg);

}

.hour {

  width: 6px;

  height: 50px;

  background: #000;

}

.minute {

  width: 4px;

  height: 70px;

  background: #333;

}

.second {

  width: 2px;

  height: 90px;

  background: red;

}

.center {

  width: 12px;

  height: 12px;

  background: #000;

  border-radius: 50%;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}

</style>

<script>

function updateClock() {

  const now = new Date();

  const hour = now.getHours();

  const minute = now.getMinutes();

  const second = now.getSeconds();

  const hourDeg = (hour % 12) * 30 + minute * 0.5;

  const minuteDeg = minute * 6;

  const secondDeg = second * 6;

  document.getElementById("hour").style.transform = `translateX(-50%) rotate(${hourDeg}deg)`;

  document.getElementById("minute").style.transform = `translateX(-50%) rotate(${minuteDeg}deg)`;

  document.getElementById("second").style.transform = `translateX(-50%) rotate(${secondDeg}deg)`;

}

setInterval(updateClock, 1000);

updateClock();

</script>

JAM DIGITAL

<div class="led-clock">

  <span id="time">00:00:00</span>

  <div class="date" id="date"></div>

</div>

<style>

.led-clock {

  text-align: center;

  background: #000;

  padding: 20px;

  border-radius: 15px;

  box-shadow: 0 0 20px red;

  width: 250px;

  margin: auto;

}

#time {

  font-size: 40px;

  font-weight: bold;

  color: #ff0000;

  font-family: 'Courier New', monospace;

  text-shadow: 0 0 10px red, 0 0 20px red;

}

.date {

  color: #fff;

  font-size: 14px;

  margin-top: 10px;

  font-family: Arial, sans-serif;

}

</style>

<script>

function updateClock() {

  const now = new Date();

  let h = now.getHours().toString().padStart(2, '0');

  let m = now.getMinutes().toString().padStart(2, '0');

  let s = now.getSeconds().toString().padStart(2, '0');

  document.getElementById("time").innerText = `${h}:${m}:${s}`;

  const days = ["Minggu","Senin","Selasa","Rabu","Kamis","Jumat","Sabtu"];

  const months = ["Jan","Feb","Mar","Apr","Mei","Jun","Jul","Agu","Sep","Okt","Nov","Des"];

  let day = days[now.getDay()];

  let date = now.getDate();

  let month = months[now.getMonth()];

  let year = now.getFullYear();

  document.getElementById("date").innerText = `${day}, ${date} ${month} ${year}`;

}

setInterval(updateClock, 1000);

updateClock();

</script>