初の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%;
}ＳＴＡＲＴ・ＳＴＯＰを押すとタイマーが動きだすプログラミングです