見出し画像

やっぱり。JavaScript！-ストップウオッチを作ろう！ - 3

donguri

動くようになったので、もう少し使い勝手を良くしていきます。

それぞれのボタンを押した時にその機能しか動かないようにします。また、見た目もCSSを使って使えるボタンとそうでないボタンがわかるようにします。

以下サイト参考にです。

まずは見た目から作っていきます。ボタンを押すことができない場合は少し透過度を上げて見えにくくします。CSSで実装します。

  <style>
 	.inactive {
	  	opacity: 0.3;
    }
 </style>

新しいClass、.inactiveを作り、opacity(透過度)を0.3とします。これはHTMLで指定していないClassでJavaScriptでボタンにつけたり、外したりして機能させます。

実際にJavaScriptでのClass追加ですが、classList.を使います。

今回はスタートボタンなどに先ほど作った、.inactiveを追加したり、外したりします。例えば、ストップウオッチの最初の画面としてはスタートボタンのみ有効であれば良いので

	start.classList.remove('inactive');
	stop.classList.add('inactive');
	reset.classList.add('inactive');

とすればスタート前はスタートボタンのみ字がくっきりと見えています。

classList.removeはClassを外す、classList.addは追加すると言う命令です。

画像1

そしてスタートした直後では

start.classList.add('inactive');
stop.classList.remove('inactive');
reset.classList.add('inactive');

ストップボタンを押した時は

 start.classList.add('inactive');
 stop.classList.add('inactive');
 reset.classList.remove('inactive');

リセットボタンを押した時は

　start.classList.remove('inactive');
　stop.classList.add('inactive');
　reset.classList.add('inactive');

であればわかりやすいです。

この命令をスタートボタンなどを押した時の命令に追加してやれば実行されるようになります。例えばスタートボタンであれば

start.addEventListener("click", function(){

　start.classList.add('inactive');
  stop.classList.remove('inactive');
  reset.classList.add('inactive');

	  	startTime = Date.now();
	  	
	  	countUp();
 	})

スタートボタンをクリックした時に実行されます。

画像2

こんな感じになります。それぞれのボタンに適応します。

そして次はこのボタンが有効時表示にのみ実行できるようにします。

先ほど追加したCSSを使って、classList.containsで条件分岐、"if"を使って実装します。

　if (start.classList.contains('inactive') === true) {
  　  return;
  }

スタートボタンであれば上記とすれば、CSSが'inactive'であれば実行されます。これは

classList.remove

の状態、これはCSSの適応されていない場合でボタンが動くということです。これをそれぞれのボタンに実装して完成です。

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