Go to Qiita Advent Calendar 2024 Top
LoginSignup
6
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@mkeiptr(まりも)

HTML + CSS + JSでエモいタイマー作り

Posted at

ブラウザ上で動くタイマーを作る機会があったのでここで紹介します。

#つけた機能

  • EnterキーでStart/Stop
  • LキーでLapを表示
  • Rキーでリセット(すべて0に戻す)

#使ったやつ

  • HTML5
  • CSS3
  • JavaScript

あとBootstrap4というフレームワークを使っています。
一応ですがここにCDNでBootstrap4を埋め込む方法を書いときます。<head>タグ内にコピペして貼り付けるだけでOKです。

racetimer.html(Bootstrap4の埋め込み部分)
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

#コード
ざっとこんな感じです。ちなみにわかりやすさはカス中のカスです。ごめんなさい。

racetimer.html(Body部分)
    <body style="background: #000;">
		<section class="passsec text-center container">
			<p>
				<div id="showArea" class="showRaceTime"></div>
			</p>
			<br>
			<p>
				<ul id="showLapArea" class="showLap">
				</ul>
			</p>
		</section>
	</body>
racetimer.html(Javascriptの部分)
<script>
    //keydown code
	document.onkeydown = keydown;
	let flag = 0; //flag 0 -> not running, 1 -> running
	function keydown(){
		if(event.key == "Enter" && flag == 0){
			start();
		}
		else if(event.key == "Enter" && flag == 1){
			stop();
		}
        else if(event.key == "r"){
			reset();
		}
		else if(event.key == "l" && flag == 1){
			lap();
		}
	}
	//keydown end
	//addzero code
	function addzero(num){
		if(num < 10){
			ret = "0" + num;
			return ret;
		} else {
			return num;
		}
	}
	//addzero end
	//passsec code
	var passSec,passMsec,passMin,lapnum;
	
	passMsec = 0;
	passSec = 0;
	passMin = 0;
	lapnum = 0;
	var defaultmsg = "00:00:00";
	var defaultlap = "LAP0" + "&nbsp;&nbsp;" + "/" + "&nbsp;&nbsp;" + "00:00:00"
	
	document.getElementById("showArea").innerHTML = defaultmsg;
	function showSec(){
		passMsec++;
		
		if(passMsec > 99){
			passMsec = 0;
			passSec++;
		}
		if(passSec > 59){
			passSec = 0;
			passMin++;
		}
		
		var msg = addzero(passMin) + ":" + addzero(passSec) + ":" + addzero(passMsec);
		
		document.getElementById("showArea").innerHTML = msg;
	}
		
	function start(){
		timer = setInterval('showSec()',10);
		
		flag = 1;
	}
	
	function stop(){
		clearInterval(timer);
		
		flag = 0;
	}
	
	function reset(){
		passSec = 0;
		passMsec = 0;
		passMin = 0;
		lapnum = 0;
		
		var resetlap = "LAP" + lapnum + "&nbsp;&nbsp;" + "/" + "&nbsp;&nbsp;" + addzero(passMin) + ":" + addzero(passSec) + ":" + addzero(passMsec);
			
		clearInterval(timer);
		
		document.getElementById("showArea").innerHTML = defaultmsg;
		document.getElementById("showLapArea").innerHTML = "";
			
		flag = 0;
	}

	function lap(){
		lapnum++;
		var laptime = "LAP" + lapnum + "&nbsp;&nbsp;" + "/" + "&nbsp;&nbsp;" + addzero(passMin) + ":" + addzero(passSec) + ":" + addzero(passMsec);
		
		var lapArea = document.getElementById("showLapArea");
		var makeli = document.createElement("li");
	
        makeli.innerHTML = laptime;
        lapArea.appendChild(makeli);
	}
	//passsec end
</script>
racetimer.css
li{
	list-style: none;
}

.passsec{
	padding-top: 40px;
	padding-bottom: 20px;
	padding-right: 20px;
	padding-left: 20px;
}
.showRaceTime{
	font-size: 200px;
	color: #ff0;
	text-shadow: 0 0 20px #cc0,0 0 20px #cc0;
}
.showLap{
	font-size: 30px;
	color: #ff0;
}

で、こんなのが出来ました。

See the Pen timerrrrr by まりも (@mrmcodepen) on CodePen.

##それぞれの関数の解説的な

  • keydown関数

ただの押されたキーを取得、判断してどの関数を実行するか決める関数です。

  • addzero関数

数字がひと桁になったら先頭に0を加えるってだけです。
例えば5だったら05ってして表示させる、とか。

  • showsec関数

実行される度に変数passMsecをインクリメントし、そいつを分:秒:ミリ秒に変えて表示させる関数です。innerHTMLを使って該当部分にねじ込んでます。

  • start関数

すべてのはじまりです。showsec関数をsetInterval()で10msおきに実行させています。つまり、10msおきに変数passMsecがインクリメントされているわけです。

  • stop関数

clearInterval()でインターバルを止めています。

  • reset関数

言葉の通りすべてを0に返し、タイマーを停止させます。また、ラップの表示もすべてなくなります。

  • lap関数

ラップを取得して表示させています。原理は簡単で、現在の分秒ミリ秒を取得してるだけです。
変数lapnumをインクリメントさせることでラップの回数を数えています。

##詰まった所

  • タイマー稼働中にEnterキーを再度押すとカウントが加速する

「タイマー」とは？(哲学)
ということでちゃんと直しました。

racetimer.htmlのJS部分から抜粋
	document.onkeydown = keydown;
	let flag = 0; //flag 0 -> not running, 1 -> running
	function keydown(){
		if(event.key == "Enter" && flag == 0){
			start();
		}
		else if(event.key == "Enter" && flag == 1){
			stop();
		}
        else if(event.key == "r"){
			reset();
		}
		else if(event.key == "l" && flag == 1){
			lap();
		}
	}

変数flagでタイマーが動いてるか否かの状態を表すようにしたら動きました。
このフラグはstart関数が実行された時に立つ(= 1になる)、それ以外では折れる(= 0になる)ようになっています。詳しくは載っけたコード見て下さい。
例えば、 start関数はEnterキーが押される且つタイマーが動いてない状態の時にしか動作しないようにしてます。逆にstop関数はEnterキーが押される且つタイマーが動いてる状態の時にしか動作しないようにしてます。

  • 変数名のダサさ・コードの統一性のなさ

うるせ〜〜〜〜〜！！！！！
知らね〜〜〜〜〜〜！！！！！！

##課題

  • ラップの無限生成

Lキー押しまくることでラップが無限に表示されてしまうので、ある程度いったら更新するとかなんらかの処理を入れたいと思います。

#補足

フォントを変えるともっとエモくなります。
Screenshot from 2018-09-22 22-12-37.png
めっちゃそれっぽくなりました。ちなみにこのフォントはDSEGというフリーフォントを使用しています。ここからダウンロード出来ます。

6
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
6
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?