yukikodesignロゴフレーム

学んだこと、日常

blog

jsでストップウォッチを作って学んだこと①Date now()とNew.Date()とは

javascriptでストップウォッチを実装してみた。

javascriptを学ぶ上で、何か作りながら学べたら、楽しいし、身になるかもと思い立ち、まずはストップウォッチを作成。

スタート前のストップウォッチ

こんな感じでニューモーフィズムを使用したデザインにしてみました。

cssはこんな感じ。↓↓

<style>
        body {
            background: #548db0;
        }

        .circle {
            background-color: red;
            margin: 0 auto;
            border-radius: 50%;
            background: #548db0;
            box-shadow: 28px -28px 56px #4c80a0,
                -28px 28px 56px #5c9ac0;
            text-align: center;
            height: 280px;
            width: 280px;
            margin-top: 300px;
        }

        .button-container {
            display: flex;
            justify-content: space-between;
            width: 180px;
            margin: 0 auto;
            border-radius: 20px;
            margin-top: 30px;
            font-family: 'Teko', sans-serif;
        }

        .button {
            cursor: pointer;
            font-size: 24px;
            border-radius: 20px;
            width: 50px;
            height: 50px;
            line-height: 50px;
            color: #fff;
            background: #548db0;
            box-shadow: inset 13px 13px 41px #497b99,
                inset -13px -13px 41px #5f9fc7;

        }

        .button.active {
            background: linear-gradient(145deg, #5a97bc, #4c7f9e);
            box-shadow: 13px 13px 29px #497b99,
                -13px -13px 29px #5f9fc7;

        }

        .timer {
            padding-top: 60px;
            font-size: 40px;
            color: #fff;
        }
</style>

htmlはこんな感じ。

<div class="circle">
     <div class="timer" id="timer">00:00:000</div>
     <div class="button-container">
          <div class="button active" id="start">start</div>
          <div class="button" id="stop">stop</div>
          <div class="button" id="reset">reset</div>
     </div>
</div>

javascript学習記録①Dateオブジェクト

今回jsでストップウォッチを作成した際の気づきについて書き留めておきたいと思う。

経過時間を算出する上でDateオブジェクトを使用し、現在時間から、スタートを押した時間や、ストップを押した時間をもとに算出した。

『JavaScript の Date オブジェクトは、単一の瞬間の時刻をプラットフォームに依存しない形式で表します。 Date オブジェクトは協定世界時 (UTC) の 1970 年 1 月 1 日からの経過ミリ秒数を表す Number の値を含んでいます。』

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date

時間を図るにはこのDateオブジェクトを使用するのがよさそう。

Date now()とNew.Date()

今回、ストップウォッチを作成する上でDate.now()とNew.Date()を使ったのだがこの違いは

console.log(Date.now());//結果　1646183327232
console.log(new Date());//結果　Wed Mar 02 2022 10:08:47 GMT+0900 (日本標準時)

つまりDate.now()はミリ秒数を返すもので、new Date()はDateオブジェクトのインスタンスを返すもの。

頭にとどめておこう。

all view

contact