質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

1071閲覧

1時間以上のカウントダウンタイマーを作りたい

gichi_break

総合スコア1

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2020/04/29 04:58

前提・実現したいこと

ドットインストールで作ったカウントダウンタイマーに、90分のボタンを追加したい。

発生している問題・エラーメッセージ

もともと分単位しか設定できないタイマーに90分のボタンを追加しようとしたら、初期状態では 00:00:00:000 と表示されているものが何かしらのボタンを押すと 09:00:00:000 になってしまいリセットしてもそのままになってしまいます 一応90分のボタンや分のボタンは反応しています。エラーが起こっている訳ではありません。

該当のソースコード

ソースコード (function() { 'use strict'; var timer = document.getElementById('timer'); var hou = document.getElementById('hou') var min = document.getElementById('min'); var sec = document.getElementById('sec'); var reset = document.getElementById('reset'); var start = document.getElementById('start'); var startTime; var timeLeft; var timeToCountDown = 0; var timerId; var isRunning = false; function updateTimer(t) { var d = new Date(t); var h = d.getHours(); var m = d.getMinutes(); var s = d.getSeconds(); var ms = d.getMilliseconds(); h = ('0' + h).slice(-2); m = ('0' + m).slice(-2); s = ('0' + s).slice(-2); ms = ('00' + ms).slice(-3); var timerString = `${h}:${m}:${s}.${ms}`; timer.textContent = timerString; document.title = timerString; } function countDown() { timerId = setTimeout(function() { timeLeft = timeToCountDown - (Date.now() - startTime); if (timeLeft < 0) { isRunning = false; start.textContent = 'start'; clearTimeout(timerId); timeLeft = 0; timeToCountDown = 0; updateTimer(timeLeft); return; } updateTimer(timeLeft); countDown(); }, 10); } // スタートボタン start.addEventListener('click',function() { if (isRunning === false) { isRunning = true; start.textContent = 'stop'; startTime =Date.now(); countDown(); } else { isRunning = false; start.textContent = 'start'; timeToCountDown = timeLeft; clearTimeout(timerId); } }); // 時間単位のボタン hou.addEventListener('click',function() { if (isRunning === true) { return; } timeToCountDown += 5400000; updateTimer(timeToCountDown); }); // 分単位のボタン min.addEventListener('click',function() { if (isRunning === true) { return; } timeToCountDown += 60 * 1000; if (timeToCountDown >= 60 * 60 * 1000) { timeToCountDown = 0; } updateTimer(timeToCountDown); }); // 秒単位のボタン sec.addEventListener('click',function() { if (isRunning === true) { return; } timeToCountDown += 1000; if (timeToCountDown >= 60 * 60 * 1000) { timeToCountDown = 0; } updateTimer(timeToCountDown); }); // リセットボタン reset.addEventListener('click',function() { timeToCountDown = 0; updateTimer(timeToCountDown); }); })(); //html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>timer</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <div class="container"> <!--初期状態のHTML表示--> <div id="timer">00:00:000</div> <div class="controls"> <div id="hou">90min</div> <div id="min">min</div> <div id="sec">sec</div> <div id="reset">reset</div> <div id="start">start</div> </div> <script src="main.js"></script> </div> </body> </html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

現地時間(日本だと9時間)が足されているのだと思いますので
下記のように変更したらいかがでしょうか。

javascript

1 function updateTimer(t) { 2 var d = new Date(t); 3 var h = d.getUTCHours(); 4 var m = d.getUTCMinutes(); 5 var s = d.getUTCSeconds(); 6 var ms = d.getUTCMilliseconds(); 7 h = ('0' + h).slice(-2); 8 m = ('0' + m).slice(-2); 9 s = ('0' + s).slice(-2); 10 ms = ('00' + ms).slice(-3); 11 var timerString = `${h}:${m}:${s}.${ms}`; 12 timer.textContent = timerString; 13 document.title = timerString; 14 }

Date関数

投稿2020/04/30 02:06

na-01

総合スコア99

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問