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

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

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

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

Q&A

解決済

3回答

301閲覧

JavaScriptによる時間表示

Chandler_Bing

総合スコア673

JavaScript

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

0グッド

0クリップ

投稿2019/01/15 12:56

編集2019/01/17 10:56

ネットを参考に残り時間を指定日までの残り時間を1秒ずつ表示するプログラムを作成しました。
現在実行したい機能として、残り時間が1時間を切ったら1秒ごとの呼び出しに変更するというプログラムを作成したいです。(1時間以上ある場合はPHPのようにページの更新で残り時間が変更するようにします)

問題❶
goalの時間を1時間未満にすると表示されない。
どこが問題か教えていただけますでしょうか。

問題❷
JSは本当に始めたばかりですが、このコードは不細工すぎると思うので、少し改善点を教えてください。

JS

1<!doctype html> 2<html> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1"> 7 <meta http-equiv="x-ua-compatible" content="IE=edge"> 8 <title>5-01_countdown</title> 9 <link href="../../book-js/_common/css/style.css" rel="stylesheet" type="text/css"> 10</head> 11 12<body> 13 <header> 14 <div class="header-contents"> 15 <h1>カウントダウンタイマー</h1> 16 <h2>1秒ごとに再計算する</h2> 17 </div><!-- /.header-contents --> 18 </header> 19 <div class="main-wrapper"> 20 <section> 21 <p>今から<span id="timer"></span>以内に注文すると50%オフ!</p> 22 </section> 23 </div><!-- /.main-wrapper --> 24 <footer>JavaScript Samples</footer> 25 <script> 26 var now = new Date(); 27 var goal = new Date(); 28 goal.setHours(19); 29 goal.setMinutes(59); 30 goal.setSeconds(59); 31 32 var rest = goal.getTime() - now.getTime(); 33 var sec = Math.floor(rest / 1000) % 60; 34 var min = Math.floor(rest / 1000 / 60) % 60; 35 var hours = Math.floor(rest / 1000 / 60 / 60) % 24; 36 var days = Math.floor(rest / 1000 / 60 / 60 / 24); 37 38 var countdown = function() { 39 var cdnow = new Date();//追加 40 var cdgoal = new Date();//追加 41 cdgoal.setHours(19);//追加 42 cdgoal.setMinutes(59);//追加 43 cdgoal.setSeconds(59);//追加 44 var cdrest = cdgoal.getTime() - cdnow.getTime(); 45 var cdsec = Math.floor(cdrest / 1000) % 60; 46 var cdmin = Math.floor(cdrest / 1000 / 60) % 60; 47 var cdhours = Math.floor(cdrest / 1000 / 60 / 60) % 24; 48 var cddays = Math.floor(cdrest / 1000 / 60 / 60 / 24); 49 var cdcount = [cddays, cdhours, cdmin, cdsec]; 50 console.log(cdsec); 51 return cdcount; 52 } 53 54 var recalc = function() { 55 console.log(0); 56 var counter = countdown(); 57 var time = counter[1] + '時間' + counter[2] + '分' + counter[3] + '秒'; 58 document.getElementById('timer').textContent = time; 59 refresh(); 60 } 61 62 var refresh = function() { 63 setTimeout(recalc, 1000); 64 } 65 66 if (hours < 1) { 67 recalc(); 68 } else { 69 var time1 = hours + '時間' + min + '分' + sec + '秒'; 70 document.getElementById('timer').textContent = time1; 71 } 72 </script> 73</body> 74 75</html> 76

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

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

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

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

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

guest

回答3

0

javascript

1<!DOCTYPE html> 2<html lang="ja"> 3<meta charset="UTF-8"> 4<title></title> 5<style> 6</style> 7 8<body> 9<p><span id="timer"></span></p> 10<p><span id="timer2"></span></p> 11 12<script> 13{ 14 const 15 int = Math.floor; 16 17 class CountDownTimer { 18 constructor (date, displayCallBackFunc, wait = 1000) { 19 this.date = +date; 20 this.displayCallBackFunc = displayCallBackFunc; 21 this.wait = wait; 22 this.tmid = null; 23 this.disp (); 24 } 25 26 getTime () { 27 let 28 time = this.date - (new Date), tm = time, 29 thms = [1000, 60, 60, 24].map ((a, b) => (b = tm % a, tm = int (tm /a), b)); 30 return [time, ...thms.reverse ()]; 31 } 32 33 start () { 34 this.tmid || (this.tmid = setInterval (this.disp.bind (this), this.wait)); 35 } 36 37 stop () { 38 ! this.tmid || (clrearInterval (this.tmid), this.tmid = null); 39 } 40 41 disp () { 42 this.displayCallBackFunc.apply (this, this.getTime ()); 43 } 44 45 } 46 47 this.CountDownTimer = CountDownTimer; 48} 49 50//___________ 51 52function createDisp (target) { 53 return function disp (time,h, m, s, ms) { 54 target.textContent = 1000 < time 55 ? h + '時' + m + '分' + s + '秒' 56 : '終了しました。' 57 } 58} 59 60let 61 e0 = document.querySelector ('#timer'), 62 e1 = createDisp (e0), 63 e2 = new CountDownTimer (new Date (2019,0,18,23,0), e1); 64e2.start (); 65 66let 67 e3 = document.querySelector ('#timer2'), 68 e4 = createDisp (e3), 69 e5 = new CountDownTimer (new Date (2019,0,18,22,30), e4); 70e5.start (); 71 72</script> 73</body> 74 75 76

投稿2019/01/16 14:22

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

0

ベストアンサー

あと1時間という情報はどうしとくすれば良いでしょうか。

1時間は60 * 60 * 1000 = 3600000ミリ秒です。
なので、締切日時 - 現在時刻が3600000ミリ秒を下回っているかどうかで1時間を切っているかどうかの判定ができます。

残り時間が1時間を切ったら1秒ごとの呼び出しに変更するというプログラムを作成したい

なので、上記の判定をして、1時間以上あれば実装中の表示を、
1時間を下回っていれば残り時間を秒に変換した値を表示すれば良いですね。


問題❶

goalの時間を1時間未満にすると表示されない。
どこが問題か教えていただけますでしょうか。

ブラウザの開発者ツールを表示するとコンソールにエラーが表示されています。
recalc関数の定義が、呼び出し部分より後に書かれていることが原因かと思います。

問題❷

JSは本当に始めたばかりですが、このコードは不細工すぎると思うので、少し改善点を教えてください。

同じ処理は関数化するとかいろいろできるとは思いますが、まずは動作するものを作ることが優先かと思います。
動作できたらコードを見直して冗長なところとかを直していきましょう。
(どういう処理を作れば良いのか計画を練ってから作ると割とはじめからきれいに書けたりもしますが。)

投稿2019/01/15 13:28

編集2019/01/16 09:53
dice142

総合スコア5158

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

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

Chandler_Bing

2019/01/16 09:36

先ほどは、Javaへの回答ありがとうございました。 コードを変更し、回答も編集しましたのでまた回答いただけると大変助かります。
dice142

2019/01/16 09:53

回答に追記しました。
Chandler_Bing

2019/01/16 10:04

ありがとうございます。順番を変更し、色々触りました。条件分岐自体はうまくいっていますが、 1秒更新がうまくいきません。よろしくお願いします。コードを変更します。
dice142

2019/01/16 10:14

どちらがミスなのか判断できませんが、countdownが2箇所で設定されています。 console.log()で開発者ツールのconsoleにログを出力できるので、 動作がおかしいときはそこに何かしら値を出力して試してみると良いです。
Chandler_Bing

2019/01/16 10:52

ありがとうございます。 下の方のcountdownを消し、recalc();の中にconsole.log(1)をし挙動確認を行ったところ 1秒ごとに呼ばれれはいるものの、HTMLに1秒ごと反映されていない気がします。
dice142

2019/01/17 04:10

recalcが1秒毎に呼ばれていて数値が変わらないのであれば、返り値が同じ値のままということです。 原因としては  ・返り値が(変数名ミスとかで)毎回固定になっている  ・計算が固定値で行われている  ・値が変わるべき変数が変わっていない のどれかである可能性が高いです。 countdown関数の中の変数を調べてみましょう。
Chandler_Bing

2019/01/17 10:25

ありがとうございます。1秒更新のプログラムは1秒ごとに更新はされませんが、自分で画面更新するときちんと反映されているので、どれにも当てはまっていない気がします。他に何かありませんでしょうか。
dice142

2019/01/17 10:29

> 1秒更新のプログラムは1秒ごとに更新はされませんが console.log()で確認したら1秒毎に呼ばれているのはでないですか? > 自分で画面更新するときちんと反映されている 画面更新すればページ自体を読み込み直しになるので当然反映はされます。 今回の問題は「関数内で」更新が行われていないことですよね? > どれにも当てはまっていない気がします。 これは画面更新して大丈夫だからそう思い込んでいるのか、 それともちゃんと確認して当てはまらないことを確認したのでしょうか?
Chandler_Bing

2019/01/17 10:49

返信ありがとうございます。console.log()の出力からrecalc()は1秒ごとに呼ばれております。 画面更新から思い込んでおりました。すみません。 countdown関数の中でcdsecを出力したところ、秒数自体は毎秒取得しているものの、画面更新した時点での秒数が使われています。
dice142

2019/01/17 10:51

であればgoalの時間と現在時間の差分が1秒毎に更新されていないということになりますね。 であれば私が挙げた原因に当てはまるものがあるのではないでしょうか?
Chandler_Bing

2019/01/17 10:55

お疲れ様です。ブサイクではありますが、成功いたしました。コードを載せておきます。 もし改善点等ありましたらお願いします。
dice142

2019/01/17 11:12

ひとまず完成おめでとうございます。 細かいところはキリがないので大まかに改善できそうなところだけ挙げます。 (基本的にコードの上から順に挙げてるはず) ・countdown関数の前で時間差を出している箇所もcountdown関数を使えば省略できます。 ・countdown関数内でgoalの時間を毎回設定するのは冗長です。 ・2つの関数とsetTimeoutを使ってますが、setIntervalだと関数1個で十分な気がします。
Chandler_Bing

2019/01/17 11:25

了解いたしました。改善も成功しました。まだ質問ができますので宜しくお願いします
guest

0

JavaScriptでの時間の加減算は、moment.js等を使うと非常に楽になります。>https://momentjs.com/
まずは勉強したい ということであれば失礼しました。

さて、ご質問の件ですが、とりあえず上記コードをさっと見た感じ全く問題がないように思えるのですが、なにか不明な点があるのですか?

上記のコードならcountdown()関数の時間の値が1以上ならばあと1時間となります。
今風に書くならばあと${countdown()[1]}時間という感じでしょうか。

投稿2019/01/15 13:19

TakamiChie

総合スコア59

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

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

Chandler_Bing

2019/01/15 13:26

ありがとうございます。自分なりに試行錯誤してみたのですが、まだ問題がありますので、編集した質問い答えていただけると助かります。
TakamiChie

2019/01/15 13:31 編集

if(countdown()[1] >= 1){ alert("あと1時間以上"); }else{ alert("あと1時間以下"); } ということですか?
Chandler_Bing

2019/01/16 07:51

質問を編集いたしましたので、そちらにお答えいただけると嬉しいです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問