html JavaScript プログラミング

Web上で動くタイマーを作る③ボタンと処理

2020年2月9日

こんばんは!

今回はボタンの追加と処理について説明していきます。

第1回、第2回を見ていない方は、そちらから見ていただければ幸いです。

Web上で動くタイマーを作る①setIntervalを使う

Web上で動くタイマーを作る②スライダーを使用する

また、4回までで完成するプログラムはこちらで動かすことができるので、確認してみてください。

ボタンを使ってみる

startボタンがクリックされると"startbutton_clicked"と表示されるだけのプログラムです。

実行結果

start,stop,resetボタンを追加する

前回のプログラムにstart,stop,resetボタンとその処理を追加します。

また、第1回で扱ったsetIntervalも使用しています。

少し長いですが、説明のコメントも追加したので第1回と第2回の記事を読んだ方は理解できると思います。

実行結果

今回はこれで終わりです。

次回は終了時に音楽を鳴らす処理を追加します。

Web上で動くタイマーを作る④終了時に音楽を鳴らす

 

-html, JavaScript, プログラミング

Copyright© 物を作る者 , 2024 All Rights Reserved.