【JavaScript】日時を取得し、デジタル時計やアナログ時計を作る方法

 <div class="wrapper">
    <div class="display">
        <div id="date"></div>
        <div id="time"></div>
        </div>
    <span></span>
    <span></span>
  </div> 

 .wrapper{
      height: 100px;
      width: 360px;
      cursor: default;
      background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
      border-radius: 10px;
      animation: animate 1.5s linear infinite;
  }
  .wrapper .display,
  .wrapper span{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }
  
  .wrapper .display{
      z-index: 999;
      background: #1b1b1b;
      height: 170px;
      width: 345px;
      border-radius: 6px;
      text-align: center;
  }
  .wrapper .display #date,
  .wrapper .display #time{
      line-height: 85px;
      font-size: 48px;
      font-weight: 600;
      letter-spacing: 1px;
      background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: animate 1.5s linear infinite;
  }
  
  @keyframes animate {
      100%{
          filter: hue-rotate(360deg);
      }
  }
  
  .wrapper span{
      height: 00%;
      width: 100%;
      background: inherit;
      border-radius: 10px;
  }
  .wrapper span:first-child{
      filter: blur(10px);
  }
  .wrapper span:last-child{
      filter: blur(20px);
  }

 setInterval(function(){
    const date1 = document.querySelector("#date");
    const time = document.querySelector("#time");
    let date = new Date();
    let month = date.getMonth();
    let day = date.getDate();
    const days = ["日","月","火","水","木","金","土",];
    let hours = date.getHours();
    let minutes = date.getMinutes();
    let seconds = date.getSeconds();
    let day_night = "AM";

    if(hours > 12){
        day_night = "PM"
        hours = hours - 12;
    }
    if(hours < 10){
        hours = "0" + hours;
    }
    if(minutes < 10){
        minutes = "0" + minutes;
    }
    if(seconds < 10){
        seconds = "0" + seconds;
    }
    date1.textContent = month+"/"+ day +"("+days[date.getDay()]+")";
    time.textContent = hours + ":" + minutes + ":" + seconds + " " + day_night;
    });

  <div class="wrapper">
    <div class="clock">
        <div class="hour">
            <div class="hr" id="hr"></div>
        </div>
        <div class="min">
            <div class="mn" id="mn"></div>
        </div>
        <div class="sec">
            <div class="sc" id="sc"></div>
        </div>
    </div>
  </div> 

 .clock{
      margin: 0 auto;
      width: 340px;
      height: 340px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: url(../../images/素材/clock.png);
      background-size: cover;
      border: 4px solid #091921;
      border-radius: 50%;
  }
  .clock::before{
      content: '';
      position: absolute;
      width: 15px;
      height: 15px;
      background: rgb(172, 3, 3);
      border-radius: 50%;
      z-index: 1000;
  }
  .clock .day,
  .clock .hour,
  .clock .min,
  .clock .sec{
      position: absolute;
  }
  .clock .day, .d{
      width: 60px;
      height: 30px;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1.1em;
      border-radius: 3px;
  }
  .d{
      position: absolute;
      background: #333;
      left: 70px;
  }
  .clock .hour, .hr{
      width: 160px;
      height: 160px;
  }
  .clock .min, .mn{
      width: 190px;
      height: 190px;
  }
  .clock .sec, .sc{
      width: 230px;
      height: 230px;
  }
  .hr, .mn, .sc{
      display: flex;
      justify-content: center;
  }
  .hr::before{
      content: '';
      position: absolute;
      width: 8px;
      height: 80px;
      background: #ff105e;
      z-index: 10;
      border-radius: 6px 6px 0 0 ;
  }
  .mn::before{
      content: '';
      position: absolute;
      width: 4px;
      height: 90px;
      background: rgb(93, 2, 2);
      z-index: 11;
      border-radius: 6px 6px 0 0 ;
  }
  .sc::before{
      content: '';
      position: absolute;
      width: 2px;
      height: 150px;
      background: rgb(0, 0, 0);
      z-index: 12;
      border-radius: 6px 6px 0 0 ;
  }

     const deg = 6;
    const hr = document.querySelector("#hr");
    const mn = document.querySelector("#mn");
    const sc = document.querySelector("#sc");
    const d = document.querySelector(".d");
    const days = ["SUN","MON","TUE","WED","THU","FRI","SAT",];


    setInterval(function(){
        let date = new Date();
        let day = date.getDate();
        let hh = date.getHours() * 30;
        let mm = date.getMinutes() * deg;
        let ss = date.getSeconds() * deg;

        hr.style.transform = `rotateZ(${(hh)+(mm/12)}deg)`;
        mn.style.transform = `rotateZ(${mm}deg)`;
        sc.style.transform = `rotateZ(${ss}deg)`;
        d.textContent = day + ' '+days[date.getDay()];
    });