JavaScript

ストップウォッチのアプリケーションの作成、応用編

下記の教則本で習ったことを応用し、自分なりのアプリを作ってみました。

ストップウォッチだけに100分の1秒まで表示させたいなーと思い、どうすれば良いかを考え、試行錯誤しコードを書いてみました。

基本を習ったら、自分なりにレンジしてみることが大事ですね。

HTML <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ストップウォッチ</title>
<link href="main.css" rel="stylesheet">
</head>
<body>
<h1 class="title">ストップウォッチ</h1>
<div id="stopWatchPanel">
<div class="display">0.00</div>
<div class="actions">
<button class="startButton">スタート</button>
<button class="stopButton">ストップ</button>
</div>
<div class="log"></div>
</div>

<script src="main.js"></script>
</body>
</html>

CSS .title {
text-align: center;
}

#stopWatchPanel {
margin: 0 auto;
width: 10em
}

.display {
font-weight: bold;
text-align: right;
height: 1.5em;
margin-bottom: .2em;
padding: .5em;
color: lightcoral;
background-color: black;
}

.actions {
text-align: center;
margin-bottom: 1em;
}

.title {
text-align: center;
border-bottom: 1px solid lightblue;
}

JavaScript

function addMessage(message){ var messageElm = document.createElement('div'); var now = new Date(); messageElm.innerText = now.getHours() + '時' + now.getMinutes() + '分' + now.getSeconds() + '秒' + ' ' + message; messageElm.classList = ['message'] var logElm = document.querySelector('.log'); logElm.appendChild(messageElm); }	document.createElementは指定した名前のHTMLタグ要素を作成することができます。 var now = new Date();で初期化し、スタート、ストップした時刻を表すようにします。 messageElm.classList = ['message']これにより、新規作成されるdivタグにはclass="message"が付きます。 document.querySelectorは、引数に与えられたCSSセレクタに合致する画面上のHTMLタグ要素を一つ取得します。
var displayElm = document.getElementsByClassName('display')[0]; var timer = null; var startButton = document.getElementsByClassName('startButton')[0];	document.getElementsByClassName('display')[0];にてdisplayというclassが指定されている要素のうち「0」すなわち最初のものを取り出します。
startButton.addEventListener('click', function(){ if(timer === null){ timer = setInterval(function(){ seconds++; displayElm.innerHTML = seconds/100; },10); } addMessage('開始'); var seconds = 0; }); //startButton	addEventListenerにてスタートボタンが押された際の動作を作成しています。カウントの途中でスタートボタンが押された場合、不具合にさせないためif(timer === null){～にて変数timerが初期値の場合のみ一定時間ごとに処理を繰り返すsetIntervalを使っています。第二引数では百分の1秒ごとに呼び出したいので「10」としてます。1000の場合ミリ秒なので1秒となります。 seconds++;インクリメントにて数値を一つ増やす処理です。 displayElm.innerHTML = seconds/100;にて100分の1秒を表示させるため、変数secondsを100で割っています。 addMessage('開始');にてaddMessage関数を呼び出しスタートの日時と「開始」を表示させてます。
var stopButton = document.getElementsByClassName('stopButton')[0];	'stopButtonというclassが指定されている要素のうち「0」すなわち最初のものを取り出します。
stopButton.addEventListener('click',function(){ if(timer !== null ){ clearInterval(timer); timer = null; addMessage('終了'); } });	addEventListenerにてストップボタンが押された際の動作を作成しています。 if(timer !== null ){～　にて変数timerが初期値でない場合、setIntervalを停止させるclearIntervalを作動させます。 addMessage('終了');にてaddMessage関数を呼び出しストップの日時と「終了」を表示させてます。

お疲れ様でした。今回はここまでにしましょう。ゆっくりマイペースで継続しましょう。

この本から引用、参考にして学び、完成させることができました。しかし、ここではプログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT）
その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^)、実際、初心者の私でもわかりやすかったです。身に付け消えないスキルが3,000円弱ならコスパよく、買っておいてよかったと満足してます。

わからないことはプロフェッショナルから学ぶのが一番 | The best way to learn what you don't know is from professionals.

キャリアアップに必要なスキルを取得しよう。| Get the skills you need to advance your career.

オンラインで受講ができるスクールですので、全国どこからでも。 | Since it is a school where you can take classes online, you can take it from anywhere in the country.

ぺージの先頭に戻る(Return to top of page)

プライバシーポリシー