コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>timer</title>
<script>
var interval_id;
function timer_start(){
interval_id=setInterval(count_down,1000);
}
var time =180;
var min =0;
var sec =0;
var timer =document.getElementById('timer');
function count_down(){
if(time>0){
min=Math.floor(time/60);
sec=(time%60);
--time;
timer.innerHTML=(min+":"+sec);
}else {
timer.innerHTML="TIME UP";
clearInterval(interval_id);
}
}
function stop_push(){
clearInterval(interbal_id);
}
function reset_button(){
min=Math.floor(time/60);
sec=(time%60);
timer.innerHTML=(min+":"+sec);
}
window.onload=function(){
var start = document.getElementById('start');
start.addEventListener("click",timer_start,false);
var stop = document.getElementById('stop');
stop.addEventListener('click',stop_push,false);
var reset = document.getElementById('reset');
reset.addEventListener('click',reset_button,false);
}
</script>
</head>
<body>
<div id="timer">03:00</div>
<button id="start">スタート</button>
<button id="stop">ストップ</button>
<button id="reset">リセット</button>
</body>
</html>
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+4
原因は、timer変数に格納してる、
<div id="timer">03:00</div>の取得が、DOM(HTML)が読み込まれる前に取得しようとしているためです。
よって、timer変数をあらかじめ定義しておく、下記のやり方でどうでしょうか。
var interval_id;
function timer_start(){
interval_id=setInterval(count_down,1000);
}
var time =180;
var min =0;
var sec =0;
// タイマー要素を入れるtimer変数を先に宣言
var timer;
function count_down(){
if(time>0){
min=Math.floor(time/60);
sec=(time%60);
--time;
timer.innerHTML=(min+":"+sec);
} else {
timer.innerHTML="TIME UP";
clearInterval(interval_id);
}
}
function stop_push(){
// interbal_idになっていたため、修正
clearInterval(interval_id);
}
function reset_button(){
min=Math.floor(time/60);
sec=(time%60);
timer.innerHTML=(min+":"+sec);
}
window.onload=function(){
// DOMが読み込まれてから、timer変数に要素を格納する
timer =document.getElementById('timer');
var start = document.getElementById('start');
start.addEventListener("click",timer_start,false);
var stop = document.getElementById('stop');
stop.addEventListener('click',stop_push,false);
var reset = document.getElementById('reset');
reset.addEventListener('click',reset_button,false);
}
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
仕様が不明なところが多々ありますね
<script>
window.addEventListener('DOMContentLoaded',()=>{
var timerId;
var timer=document.querySelector("#timer");
var defaultTime=180;
var count=0;
var format_time=num=>parseInt(100+num/60).toString().substr(-2)+":"+(100+num%60).toString().substr(-2);
document.querySelector("#start").addEventListener('click',()=>{
clearInterval(timerId);
timerId=setInterval(()=>{
count++;
timer.textContent=format_time(defaultTime-count);
if(count==defaultTime) clearInterval(timerId);
},100);
});
document.querySelector("#stop").addEventListener('click',()=>{
clearInterval(timerId);
});
document.querySelector("#reset").addEventListener('click',()=>{
clearInterval(timerId);
timer.textContent=format_time(defaultTime);
});
});
</script>
<div id="timer">03:00</div>
<button id="start">スタート</button>
<button id="stop">ストップ</button>
<button id="reset">リセット</button>
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.34%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
miyabi_takatsuk
2019/08/28 10:29
コードは、マークダウン形式で記載しましょう。
投稿ツールの<code>ボタンで挿入される文字列の中にコードを入れると、できます。
m.ts10806
2019/08/28 10:36
>動きません。。
「動かない」「ダメでした」「うまくいきません」などは他者に起きていることは何も伝わらないので
実際に起きている現象を記載してください。「何も起きない」のでしたらいくつか理由があるので、
例えばブラウザ開発ツールのコンソールでエラーが出ていない確認するとか、
「通っているであろう処理」にconsole.log(1);とか入れてコンソール出力を確認してみるとか、デバッグしてみてください。
https://teratail.com/help/question-tips#questionTips3-4-1
azuapricot
2019/08/28 10:36
コードとタイトルで要件を書くだけじゃなくて、質問文に具体的にどうやったんだけどどうなったっていうのを記載したほうがよいかと思います。
先生や上司にコードだけ見せたらどうなりますか?「で?どうしてほしいの?」OR「一言もないの?」って言われちゃいますよね。それと同じです。
yamap_55
2019/08/28 10:44
関連した質問に同じ内容の質問もありますので見ると色々勉強になるかと思います。(っというか、このお題はどこが出してるんですか??)
miyabi_takatsuk
2019/08/28 10:46
エスパー回答してしまった・・・。
質問者さん、具体的な質問に修正をお願いします。
また、マークダウン形式にまだなっていませんよ。
挿入された文字列の間、"コード"という文字の部分にコードをペーストしてください。
m.ts10806
2019/08/28 10:49
reset.addEventListener('click',reset_button,false);
でteratail内検索するとまぁまぁありますね
m.ts10806
2019/08/28 11:09
>動きません。。
「動かない」「ダメでした」「うまくいきません」などは他者に起きていることは何も伝わらないので
実際に起きている現象を記載してください。「何も起きない」のでしたらいくつか理由があるので、
例えばブラウザ開発ツールのコンソールでエラーが出ていない確認するとか、
「通っているであろう処理」にconsole.log(1);とか入れてコンソール出力を確認してみるとか、デバッグしてみてください。
https://teratail.com/help/question-tips#questionTips3-4-1
querykuma
2019/08/28 11:39
ブラウザは何を使ってます?
もしChromeかFirefoxならエラーの見方についてアドバイスできるかもしれません。
zer0312
2019/08/28 11:40
クロームを使用しております。
m.ts10806
2019/08/28 11:41
なるほど。
質問ではなく作業依頼ということですね。
querykuma
2019/08/28 11:48 編集
クロームのデベロッパーツールを起動してください。
スタートを押したら「Console」にエラーがでます。
「Sources」の「{}」のPretty Print(きれいに表示)を押したらプログラムが見やすくなります。
interbal_idをinterval_idに直すのはエラーを見ればわかります。
デベロッパーツールは機能がいっぱいあるので検索して調べてみてください。
QiitaやteratailやGitHubを使うならマークダウンの書き方を学びましょう。
```html
<html></html>
```
azuapricot
2019/08/28 11:51
回答してもらってさらにここ違うんだけどはすごい失礼ですねぇ
動かないっていう質問だから動くようになったら要件クリアですけど
m.ts10806
2019/08/28 12:17
同じやり方してると誰もアドバイスしなくなりますのでご注意を。
詳しくはサイトのヘルプから各ガイドライン熟読してください。
マナー、ルールです。守れない人がどうなるかは分かりますよね
dit.
2019/08/29 10:09
何度も言われているのに一向に直ってないのでもう一度指摘します。
tetatailにはコードを見やすくするための仕組みがあります。(皆さんが「コードブロックにしてくれ」と言っているもの)
```html
ここにコード
```
という形にしてください。HTMLでいう、タグみたいなものです。
<div>ここに内容</div>みたいなものですが、改行を入れないとうまくいきません。
パソコンからの編集なら右側にプレビューが出ているはずなので確認しながら対処してください。
2019/08/30 19:42
複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。