初のJavascriptに挑戦した結果

トコブロ

結論から言うとこうだ

色々知らない文章が出てきてPHPとは違いかなり難しかった

セミコロン「；」忘れや「() {}」閉じタグ忘れなどが多かった


今回制作したプログラミングがこちら

index.html

<!DOCTYPE html>

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <!-- Latest compiled and minified CSS -->
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
   integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

 <!-- Optional theme -->
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
   integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
 <link rel="stylesheet" href="css/style.css">
 <title>TIMER</title>
</head>

<body>
 <div class="container">
   <p id="timer">00:00:00</p>

   <div>
     <button id="start_stop" class="btn btn-lg 
     btn-primary">START</button>
   </div>
 </div>
 <!-- <script> -->
 <script>
   var strat;
   var timer_id;

   document.getElementById('start_stop').addEventListener
     ('click', function () {
       if (this.innerHTML === 'START') {
         strat = new Date();

        timer_id = setInterval(goTimer, 10);
         //STOPボタンにする
         this.innerHTML = 'STOP';
         this.classList.remove('btn-primary');
         this.classList.add('btn-danger');
       } else {
         clearInterval(timer_id);
         //STARTボタンに戻す
         this.innerHTML ='START';
         this.classList.remove('btn-danger');
         this.classList.add('btn-primary');
       }
     });

   var addZero = function (value) {
     if (value < 10) {
       value = '0' + value;
     }
     return value;
   }

   var goTimer = function () {
     var now = new Date();

     var milli = now.getTime() - strat.getTime();
     var seconds = Math.floor(milli / 1000);
     var minutes = Math.floor(seconds / 60);
     var hours = Math.floor(minutes / 60);

     seconds = seconds - minutes * 60;
     minutes = minutes - hours * 60;

     hours = addZero(hours);
     minutes = addZero(minutes);
     seconds = addZero(seconds);

     document.getElementById('timer').innerHTML = hours + ':' + minutes + ':' + seconds;
     now.getTime() - strat.getTime();
   }
 </script>
 <!-- </script> -->
</body>

</html>

こちらがstyle.cssだ

.container {
 text-align: center;
 margin: 30px auto;
}

#timer {
 font-size: 36px;
 border: 1px solid #ccc;
 margin: 30px auto;
 padding: 50px;
 background-color: #000;
 color: #fff;
 border-radius: 3px;
 box-shadow: 1px 1px 3px rgba(0,0,0,.5);
}

.btn {
 width: 100%;
}

ＳＴＡＲＴ・ＳＴＯＰを押すとタイマーが動きだすプログラミングです


この記事が気に入ったらサポートをしてみませんか？