ネットを参考に残り時間を指定日までの残り時間を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
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。