ClockForBlogger

Visit Our Website For Demo See Bio

See Image For Result

#How to Apply Code

HTML Complete Code:

<div align="center" id="clock" onload="currentTime()">
      <div class="greeting">
        <h1 id="greet"></h1>
      </div>

      <div class="time">
        <b id="hours"></b>
        <b id="colontime">:</b>
        <b id="minutes"></b>
        <b id="colontime">:</b>
        <b id="seconds"></b>
        <b id="ampm"></b>
      </div>
      <h3></h3>
      <h2 class="welcometext">Welcome to Hi-Tech Umair
      <hr width="265px" class="linee" />
    
      <span class="belowlinetext">Here You Can get Best Tech News , Tips and Codes</span>
    <hr class="line22" width="183px" />
    </h2></div>
    <style>
        #greet{
            text-shadow: yellow 1px 1px 25px;
        }
.linee{
    background-color: orange;
    height: 1px;
box-shadow: black 1px 1px 12px;
}
#hours{
    color: green;
    text-shadow: #0000ff 0px 1px 25px ;
}
#minutes{
    color: blue;
    text-shadow: blue 0px 1px 25px ;
}
#seconds{
    color:green    ;
    text-shadow: blue 0px 1px 25px ;
}
#ampm{
    text-shadow: yellow 1px 1px 55px;
}
.time{
    font-size: 25px;
}
.welcometext{
 text-shadow: yellow 1px 1px 15px;   
    font-weight: bold;
animation: wel;
animation-direction: alternate-reverse;
animation-duration: 3s;
animation-iteration-count: infinite;

}
.belowlinetext{
    font-size: 9px;
    
}
.line22{
    animation: line;
animation-direction: alternate-reverse;
animation-duration: 3s;
transition: 1s;
animation-iteration-count: infinite;
background-color: green;
height: 1px;
}
#colontime{
animation: blink;
animation-direction: alternate-reverse;
animation-duration: 0.7s;
animation-delay: 0s;
animation-iteration-count: infinite;
}


@keyframes blink{
    0%{
        opacity: 0; 
       
    }

        100%{

    opacity: 1;
}
}
@keyframes line{
0%{
width: 0px;
background-color: green;
box-shadow: yellow 1px 2px 16px;
}
100%{
width: 183px;
background-color: orange;
box-shadow: black 1px 2px 16px;

}
}

    </style>

    <script>
      function currentTime() {
        let date = new Date();
        let hh = date.getHours();
        let mm = date.getMinutes();
        let ss = date.getSeconds();
        let session = "AM";

        var greet;

        if (hh === 0) {
          hh = 12;
        } else if (hh > 12) {
          hh = hh - 12;
          session = "PM";
        } else if (hh > 0 && hh <= 6) {
          greet = "Early Morning";
        } else if (hh > 6 && hh <= 12) {
          greet = "Good Morning";
        } else if (hh > 12 && hh <= 16) {
          greet = "Good Afternon";
        } else if (hh > 16 && hh <= 21) {
          greet = "Good Evening";
        } else if (hh > 21 && hh <= 24) {
          greet = "Good Night";
        } else {
          console.log("error");
        }

        hh = hh < 10 ? "0" + hh : hh;
        mm = mm < 10 ? "0" + mm : mm;
        ss = ss < 10 ? "0" + ss : ss;
        var hhh = hh;
        var mmm = mm;
        var sss = ss;

        document.getElementById("hours").innerText = hhh;
        document.getElementById("minutes").innerText = mmm;
        document.getElementById("seconds").innerText = sss;
        document.getElementById("ampm").innerText = session;
        document.getElementById("greet").innerText = greet;

        let t = setTimeout(function () {
          currentTime();
        }, 1000);
      }

      currentTime();
    </script>

Subscribe on YouTube (https://www.youtube.com/c/hitechumair/videos)