カウントアップタイマーを作ろうとしています。

初めまして。
カウントアップタイマーを作ろうとしており、プログレスバーの設置は出来ているのですが
現在日時を0、指定日時完了までを100として、カウントアップが出来るのか探っている所でした。

すでに設置しているプログレスバーが

<div class="bar" style="width: %;"></div>

幅を指定することで右に伸びていく作りとなっているため、
指定要素に終了時間までを数値に置き換えて0〜100までの値が入るようにしたいです。
出来れば何度か使用することとなるので、ターゲットは年月日時分を指定したいと考えています。

よろしくお願いします。

m.ts10806

2018/04/21 18:59

https://teratail.com/help/question-tips#questionTips1-2

m.ts10806

2018/04/21 18:59

せめてどのように調べてどの程度自身の要件にそってできているかを書きましょう。（何もプログラムを書いていないのであれば、まずやってみてください）

suzu918523

2018/04/22 02:25

質問の仕方に問題があったようで失礼しました。どんな方法があるのか、難しく考えすぎていたので何か糸口があるかと思い質問した次第です。以後気をつけます。

行動規範の内容に同意します

回答1件

ベストアンサー

例えばこう. progress要素は適宜他の要素に置き換えてください.

HTML
1<progress data-from="2018-04-22T03:37:00" data-to="2018-04-22T03:38:00" max="100">
2	<script>
3"use strict";
4{
5	const progress = document.currentScript.parentNode;
6	const from = new Date(progress.dataset.from).getTime();
7	const dur = new Date(progress.dataset.to).getTime() - from;
8	(function tick(){
9		progress.value = Math.floor((Date.now() - from) / dur * 100);
10		setTimeout(tick, 1000);
11	})();
12}
13	</script>
14</progress>