JavaScript #15

10503 ワード
JavaScript テキストリンク
210803
JavaScript #15
  • clock
    clock.js
    • の作成
    indext.html
    <!DOCTYPE html>
<html lang="en">
    <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">
        <link rel="stylesheet" href="css/style.css">
        <title>MOO App</title>
    </head>
    <body>
        <form class="hidden" id="login-form"> 
            <input 
            required maxlength="15" 
            type="text" 
            placeholder="What is your name?"/>
            <button>Log In</button>
        </form>
        <h2 id="clock">00:00</h2>
        <h1 id="greeting" class="hidden"></h1>
        <script src="js/greetings.js"></script>
        <script src="js/clock.js"></script>
    </body>
</html>
  • interval
    「毎回」起こらなければならないもの
    ex)2回ごとに
    • -setInterval()
    二つの論点を得る.
    最初-実行する関数
    2番目-呼び出し関数の間隔(ミリ秒)
    -clock.js
    const clock = document.querySelector("h2#clock")

function sayHello(){
  console.log("hello")
}

setInterval(sayHello, 5000) // 5000ms = 5s

    5秒ごとに増加が見られます.
  • timeout
    • -setTimeout()
    setIntervalに似ています.
    最初-呼び出す関数
    2～ミリ秒
    -clock.js
    const clock = document.querySelector("h2#clock")

function sayHello(){
  console.log("hello")
}

setTimeout(sayHello, 5000)

    5秒後に運転開始->1回のみ実行
  • Date

    https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date
    • Dateを使用して必要な値を取得できます.

    毎秒関数を呼び出します.
    -clock.js
    const clock = document.querySelector("h2#clock")

function getClock(){
  const date = new Date()
  console.log(`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`)
}

setInterval(getClock, 1000)

    コンソールではなく時計のinnerTextを変更しましょう
    const clock = document.querySelector("h2#clock")

function getClock(){
  const date = new Date()
  clock.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
}
getClock()  // website가 load되자마자 실행되도록 한다
setInterval(getClock, 1000)

    リファレンス
    https://nomadcoders.co/javascript-for-beginners/lobby
    [TIL]JS-再回帰深化
    [アルゴリズム]2つを抽出して追加