簡単な時計を作る

14498 ワード
JavaScript html javascript30 CSS vanilla js js wesBos frontend テキストリンク
💗 簡単な時計を作る.
Javascript 30 clockの作成を聞く前に、方法と方法を探しながら、公式ドキュメントを読み、簡単な例を探しながら、理解しながら作成しました.

✔注ブログ:
ちょっと紛らわしくてこちらのおかげで知りましたありがとうございます.
✔組織HTML構造.
  • clockをマークする領域が必要です.
  • clockは時間の領域を表示する必要があります.
    •   <body>
    <div class="clock">
      <h1>00:00:00</h1>
    </div>
    <script src="clockBasic.js"></script>
  </body>
    ✔CSSスタイルを設定します.
    私のやり方で真ん中に置いて、枠で囲んで、視角をよりよく表示します.
    <style>
      html {
        display: flex;
        justify-content: center;
        height: 100vh;
        align-items: center;
      }
      .clock {
        border: 5px solid black;
        padding: 8px 20px;
        background-color: pink;
      }
    </style>
    ✔JAVA SCRIPTコードを作成します.
    💙 時間を見つけて表に表示します.
  • 現在の時間を救う.
  • のような動作が繰り返されるため、関数の作成後に呼び出す必要があります.
    • 💙 現在の時間を取得する方法
  • new Date()
  • getHours()
  • getMinutes()
  • getSeconds()
    • 処理後、innerTextを使用して関数実行時にh 1のテキストを変更します.
    💙 変更時間の決定方法:setInterval
  • setInterval(function, 1000ms)
    時間間隔を指定します.
    「1000 ms=1 s」です.
    • 💙 最初00:00:00に1秒表示
    その時にまた関数を包みましょう.getTime()のみを実行すると、変更前にh 1のtextが表示されるため、00:00:00に1秒が表示されます.しかし、init()関数で再度ラップすると、すぐにgetTime()が実行されるため、現在の視点はすぐに現れます.
    // 1. 일단 html에서 사용할 객체들을 불러와야 한다.

const clockCnt = document.querySelector(".clock");
// console.log(clockCnt);
const clockShow = clockCnt.querySelector("h1");
// console.log(clockShow);

// 2. 현재 시간을 구해주는 메소드를 이용해서 변수를 만든 후에, 시계 안에 표기해야한다.
// 그러기 위해서는 함수를 제작해서 불러올 수 밖에 없다. (같은 행위를 계속 반복할 것이기 때문이다.)

function getTime() {
  const today = new Date();
  // console.log(today);
  const getHour = today.getHours();
  const getMin = today.getMinutes();
  const getSec = today.getSeconds();
  // console.log(getHour, getMin, getSec);
  clockShow.innerText = `${getHour} : ${getMin} : ${getSec}`; // text를 시각으로 표기해주기.
}
// console.log(getTime());

// 3. 1초마다 넘어가도록 지정해준다.

setInterval(getTime, 1000); // "1000 밀리세컨츠 = 1초" 이다.

// 4. 처음에 1초 정도 00:00:00이 되는 것을 방지해준다.
function init() {
  getTime();
}

init();
    (質問)ただし「01:01:01」ではなく「1:1:1」と表示されます.条件文が10未満の場合は、前に0を追加できます.
    作者が解決したのとは違う.でもちょっと散らかっているように見えるので、もう一度考えてみるつもりです.
      if (getHour < 10) {
    if (getMin < 10) {
      if (getSec < 10) {
        clockShow.innerText = `0${getHour} : 0${getMin} : 0${getSec}`;
      } else {
        // getSec > 10
        clockShow.innerText = `0${getHour} : 0${getMin} : ${getSec}`;
      }
    } else {
      // getMin > 10
      if (getSec < 10) {
        clockShow.innerText = `0${getHour} : ${getMin} : 0${getSec}`;
      } else {
        // getSec > 10
        clockShow.innerText = `0${getHour} : ${getMin} : ${getSec}`;
      }
    }
  } else {
    // getHour > 10
    if (getMin < 10) {
      if (getSec < 10) {
        clockShow.innerText = `${getHour} : 0${getMin} : 0${getSec}`;
      } else {
        clockShow.innerText = `${getHour} : 0${getMin} : ${getSec}`;
      }
    } else {
      // getMin > 10
      if (getSec < 10) {
        clockShow.innerText = `${getHour} : ${getMin} : 0${getSec}`;
      } else {
        // getSec > 10
        clockShow.innerText = `${getHour} : ${getMin} : ${getSec}`;
      }
    }
  }
    ✔最終コード
    <!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>clock Basic</title>
    <style>
      html {
        display: flex;
        justify-content: center;
        height: 100vh;
        align-items: center;
      }
      .clock {
        border: 5px solid black;
        padding: 8px 20px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="clock">
      <h1>00:00:00</h1>
    </div>
    <script src="clockBasic.js"></script>
  </body>
</html>
    // 1. 일단 html에서 사용할 객체들을 불러와야 한다.

const clockCnt = document.querySelector(".clock");
// console.log(clockCnt);
const clockShow = clockCnt.querySelector("h1");
// console.log(clockShow);

// 2. 현재 시간을 구해주는 메소드를 이용해서 변수를 만든 후에, 시계 안에 표기해야한다.
// 그러기 위해서는 함수를 제작해서 불러올 수 밖에 없다. (같은 행위를 계속 반복할 것이기 때문이다.)

function getTime() {
  const today = new Date();
  // console.log(today);
  const getHour = today.getHours();
  const getMin = today.getMinutes();
  const getSec = today.getSeconds();
  // console.log(getHour, getMin, getSec);

// 5. 1:1:1을 01:01:01로 변경시켜주고 싶다.

  if (getHour < 10) {
    if (getMin < 10) {
      if (getSec < 10) {
        clockShow.innerText = `0${getHour} : 0${getMin} : 0${getSec}`;
      } else {
        // getSec > 10
        clockShow.innerText = `0${getHour} : 0${getMin} : ${getSec}`;
      }
    } else {
      // getMin > 10
      if (getSec < 10) {
        clockShow.innerText = `0${getHour} : ${getMin} : 0${getSec}`;
      } else {
        // getSec > 10
        clockShow.innerText = `0${getHour} : ${getMin} : ${getSec}`;
      }
    }
  } else {
    // getHour > 10
    if (getMin < 10) {
      if (getSec < 10) {
        clockShow.innerText = `${getHour} : 0${getMin} : 0${getSec}`;
      } else {
        clockShow.innerText = `${getHour} : 0${getMin} : ${getSec}`;
      }
    } else {
      // getMin > 10
      if (getSec < 10) {
        clockShow.innerText = `${getHour} : ${getMin} : 0${getSec}`;
      } else {
        // getSec > 10
        clockShow.innerText = `${getHour} : ${getMin} : ${getSec}`;
      }
    }
  }
}
// console.log(getTime());

// 3. 1초마다 넘어가도록 지정해준다.

setInterval(getTime, 1000); // "1000 밀리세컨츠 = 1초" 이다.

// 4. 처음에 1초 정도 00:00:00이 되는 것을 방지해준다.
function init() {
  getTime();
}

init();
    AlertDialogカスタムタイトルサイズ、色、位置
    自力で解決できるようになるまで LeetCode ソリューションを勉強した 19 日目: 問題 #83.ソート済みリストから重複を削除する (E/JS)