JavaScript/Timer
をテンプレートにして作成
LECTURE
担当科目一覧
ソーシャルデザイン概論/2025
ソーシャルデザイン演習/2025
情報デザイン論/2025
情報デザイン演習IIA/2025
コンピュータ概論/2025
3DCG演習/2025
情報デザイン研究/2025
卒業研究/2025
キャリア開発演習A/2025
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機に備えて
K'sLife
Office365Mail
Tools
SEARCH
開始行:
*JavaScript｜Timer
HTML + CSS + JavaScriptによる簡易ストップウォッチの紹介で...
~
***サンプル [[→ DEMO>https://design.kyusan-u.ac.jp/Samp...
''index.html'' ｜ ページの文書構造
<!DOCTYPE html>
<html lang ="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="sty...
<script type="text/javascript" src="sample.js"><...
<title>STOPWATCH</title>
</head>
<body>
<div id="time">0.00</div>
<button id="start">START</button>
<button id="stop">STOP</button>
<button id="reset">RESET</button>
</body>
</html>
~
''style.css'' ｜ ページのビジュアル
body{
text-align: center;
}
#time{
font-size: 72px;
}
~
''sample.js'' ｜ ページのふるまい
var timerId, startTime, elapsedTime = 0;
var startBtn, stopBtn, resetBtn, timeDisplay;
window.onload = function(){
startBtn = document.getElementById('start');
stopBtn = document.getElementById('stop');
resetBtn = document.getElementById('reset');
timeDisplay = document.getElementById('time');
startBtn.addEventListener("click",startTimer);
stopBtn.addEventListener("click",stopTimer);
resetBtn.addEventListener("click",resetTimer);
setBtnState(true,false,false);
}
function startTimer() {
setBtnState(false,true,false);
startTime = Date.now();
timerId = setInterval(update,10);
}
function update(){
var t = Date.now() - startTime + elapsedTime;
timeDisplay.innerHTML = (t/1000).toFixed(2);
}
function stopTimer(){
setBtnState(true,false,true);
elapsedTime = Date.now() - startTime + elapsedTime;
clearInterval(timerId);
}
function resetTimer() {
setBtnState(true,false,false);
timeDisplay.innerHTML = '0.00';
elapsedTime = 0;
}
function setBtnState(start,stop,reset){
startBtn.disabled = !start;
stopBtn.disabled = !stop;
resetBtn.disabled = !reset;
}
3つのボタンを置いて、それぞれにクリックされたときの動作を...
-Date.now()で現在時刻と経過時間を取得
現在時刻は Date.now()という関数で、UTC（協定世界時）での ...
タイマーの表示 ＝ 現在時刻 - startBtnが押された時刻 が...
このサンプルでは、一旦ストップした後も続けて計測できるよ...
タイマーの表示 ＝ 現在時刻 - startBtnが押された時刻 ＋ ...
で計算しています。
-setInterval 関数による表示の更新
動きは、setInterval 関数で、10ミリ秒ごとに表示を更新する...
timerID = window.setInterval( function, delay );
function : delay ミリ秒後に実行したい関数。
delay : 関数呼び出しを遅延させるミリ秒(1/1000 秒)。
-clearInterval 関数による更新の停止
この関数で、setInterval による呼び出しをストップしていま...
タイマーは複数使えるので、 timerIDでそれらを識別管理しま...
-toFixedメソッドによる小数点以下の桁数指定
例えば、対象の数値が 1234.543
toFixed(0) ＞ 1235
toFixed(1) ＞ 1234.5
toFixed(2) ＞ 1234.54 ・・・となります。
-startBtn.disabled = !start;
これは、わかりにくい書き方ですが、
start が trueの場合、disabled（無効）が !true = false。 ...
start が falseの場合、disabledが !false = true。 つまりボ...
ということで、状況に応じて、３つのボタンをそれぞれ、有効...
~
~
終了行:
*JavaScript｜Timer
HTML + CSS + JavaScriptによる簡易ストップウォッチの紹介で...
~
***サンプル [[→ DEMO>https://design.kyusan-u.ac.jp/Samp...
''index.html'' ｜ ページの文書構造
<!DOCTYPE html>
<html lang ="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="sty...
<script type="text/javascript" src="sample.js"><...
<title>STOPWATCH</title>
</head>
<body>
<div id="time">0.00</div>
<button id="start">START</button>
<button id="stop">STOP</button>
<button id="reset">RESET</button>
</body>
</html>
~
''style.css'' ｜ ページのビジュアル
body{
text-align: center;
}
#time{
font-size: 72px;
}
~
''sample.js'' ｜ ページのふるまい
var timerId, startTime, elapsedTime = 0;
var startBtn, stopBtn, resetBtn, timeDisplay;
window.onload = function(){
startBtn = document.getElementById('start');
stopBtn = document.getElementById('stop');
resetBtn = document.getElementById('reset');
timeDisplay = document.getElementById('time');
startBtn.addEventListener("click",startTimer);
stopBtn.addEventListener("click",stopTimer);
resetBtn.addEventListener("click",resetTimer);
setBtnState(true,false,false);
}
function startTimer() {
setBtnState(false,true,false);
startTime = Date.now();
timerId = setInterval(update,10);
}
function update(){
var t = Date.now() - startTime + elapsedTime;
timeDisplay.innerHTML = (t/1000).toFixed(2);
}
function stopTimer(){
setBtnState(true,false,true);
elapsedTime = Date.now() - startTime + elapsedTime;
clearInterval(timerId);
}
function resetTimer() {
setBtnState(true,false,false);
timeDisplay.innerHTML = '0.00';
elapsedTime = 0;
}
function setBtnState(start,stop,reset){
startBtn.disabled = !start;
stopBtn.disabled = !stop;
resetBtn.disabled = !reset;
}
3つのボタンを置いて、それぞれにクリックされたときの動作を...
-Date.now()で現在時刻と経過時間を取得
現在時刻は Date.now()という関数で、UTC（協定世界時）での ...
タイマーの表示 ＝ 現在時刻 - startBtnが押された時刻 が...
このサンプルでは、一旦ストップした後も続けて計測できるよ...
タイマーの表示 ＝ 現在時刻 - startBtnが押された時刻 ＋ ...
で計算しています。
-setInterval 関数による表示の更新
動きは、setInterval 関数で、10ミリ秒ごとに表示を更新する...
timerID = window.setInterval( function, delay );
function : delay ミリ秒後に実行したい関数。
delay : 関数呼び出しを遅延させるミリ秒(1/1000 秒)。
-clearInterval 関数による更新の停止
この関数で、setInterval による呼び出しをストップしていま...
タイマーは複数使えるので、 timerIDでそれらを識別管理しま...
-toFixedメソッドによる小数点以下の桁数指定
例えば、対象の数値が 1234.543
toFixed(0) ＞ 1235
toFixed(1) ＞ 1234.5
toFixed(2) ＞ 1234.54 ・・・となります。
-startBtn.disabled = !start;
これは、わかりにくい書き方ですが、
start が trueの場合、disabled（無効）が !true = false。 ...
start が falseの場合、disabledが !false = true。 つまりボ...
ということで、状況に応じて、３つのボタンをそれぞれ、有効...
~
~
ページ名:
