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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

781閲覧

JavaScriptで作成したタイマーを時間帯で表示・非表示させたい

bakio

総合スコア21

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/05/19 01:41

html

1 2 <div class="countdown_box"> 3 <div id="countdown"></div> 4 </div> 5

JavaScript

1 <script type="text/javascript"> 2 (function(div) { 3 setInterval(function() { 4 var dt = new Date(), 5 cd = { 6 value: "" 7 }, 8 dt2 = Date.UTC(1970, 0, 1, 10, 00, 0); 9 div(24, "時間", cd, div(60, "分", cd, div(60, "秒", cd, 10 (new Date(dt.getFullYear(), dt.getMonth(), dt.getDate() + 1) - dt + dt2) / 1000 | 0))); 11 document.getElementById("countdown").innerHTML = "" + cd.value; 12 }, 500); 13 14 })(function(d, u, cd, s) { 15 var tmp = s % d; 16 cd.value = (tmp < 10 ? "0" : "") + tmp + u + cd.value; 17 return (s - tmp) / d | 0; 18 }); 19 </script>

上記のHTMLとJavaScriptで作成した毎日自動でカウントダウンされるタイマーをさらに時間帯によって表示・非表示させたいのですがうまくいきません。

###やってみたJavaScript

JavaScript

1 <script type="text/javascript"> 2 3 4var now = new Date(); 5var hour = now.getHours(); 6 7if(hour >= 5 && hour <= 10){ 8document.write('<div class="countdown_box"><div id="countdown"></div></div>'); 9} 10if(hour >= 11 && hour <= 24){ 11document.write(''); 12} 13 14</script> 15

document.write('<div class="countdown_box"><div id="countdown"></div></div>');
をテキストや画像のみは時間帯によって反映するのですがJavaScriptで作成したタイマーが反映しません。

##解決したいこと
JavaScriptで作成したタイマーも設定した時間帯によって表示・非表示させたいです。
わかる方ご教示いただけますと幸いです。

##備考

html

1 <div class="countdown_box"> 2 <div id="countdown"></div> 3 </div>

はcountdown_boxのclass名でcssで背景を設定してます。
その背景は反映されました。

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

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

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

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

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

Lhankor_Mhy

2020/05/19 02:33

ご提示のコードを試してみましたが、タイマーが表示されました。 ですから、問題が再現しません。
bakio

2020/05/19 02:38

Lhankor_Mhy様 もう一度しっかり他の原因も含め見直してみます。 お時間さていただきありがとうございます。 進捗わかりましたらすぐに結果を共有します。
guest

回答1

0

ベストアンサー

長いこと、(function () { ... })() の形で使ったことはありませんでした。
短くまとめたつもりですがどうでしょう?

js

1 2(function (A,B,C) { 3 let 4 a= new Date, 5 [b,c,d]= ['FullYear','Month','Date'].map (_=>a['get'+_]()), 6 e= +(new Date (b,c,d+1)) + A; 7 8 (function dmy() { 9 let f= e - (new Date); 10 if (0 < f) { 11 setTimeout (dmy, 500); 12 let [,h,m,s]= [24,60,60,1000].reduceRight(([n,...r],d)=>[(n/d)|0,(n%d+'').padStart(2,'0'),...r],[f]); 13 B(`${h}時間${m}${s}`); 14 } else C(); 15 })(); 16})( 17 Date.UTC(1970, 0, 1, 10, 0, 0), 18 function b(s){countdown.textContent= s},//タイマー作動中 19 function c(){document.querySelector('div.countdown_box').style.display= 'none'}//タイマー終了 20); 21

投稿2020/05/22 05:06

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問