Webページ教材開発テキスト
5-5 タイマーを作る
経過時間を計るには、スタート時間と現在の時間から計算をするのが一番正確ですが、
今回はインターバル機能を使って簡易的に作ります。
(1) 経過時間を表示するタイマー
サンプルはこちら
<![CDATA[
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.ui.touch-punch.js"></script>
<title>Webページ教材</title>
<style>
.mozi{
color:#6666ff; /* 文字の色の指定 */
font-size: 500%; /* 文字の大きさ500% */
}
</style>
</head>
<body>
<span id="zikan" class="mozi">0</span>
<span class="mozi">秒</span>
<script>
var byousuu=0; // 変数の定義
startTimer(); // タイマーをスタート
//・・・経過秒数の表示・・・
function startTimer(){
myTimer = setInterval(function(){ // インターバル設定
byousuu = byousuu + 1; // 変数を加算する
$('#zikan').text(byousuu); // 表示する
},1000); // 1000m秒= 1秒に設定
}
</script>
</body>
</html>
]]>
(2) 残り時間を表示するタイマー
サンプルはこちら
30秒から開始して、残り時間を表示します。
<![CDATA[
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.ui.touch-punch.js"></script>
<title>Webページ教材</title>
<style>
.mozi{
color:#6666ff; /* 文字の色の指定 */
font-size: 500%; /* 文字の大きさ500% */
}
</style>
</head>
<body>
<span id="zikan" class="mozi">30</span>
<span class="mozi">秒</span>
<script>
var byousuu=30; // 変数の定義
startTimer(); // タイマーをスタート
//・・・経過秒数の表示・・・
function startTimer(){
myTimer = setInterval(function(){ // インターバル設定
byousuu = byousuu - 1; // 変数を減算する
$('#zikan').text(byousuu); // 表示する
if(byousuu == 0){ // もし0秒になったら
clearInterval(myTimer); // タイマーを止める
}
},1000); // 1000m秒= 1秒に設定
}
</script>
</body>
</html>
]]>
