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

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

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

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

HTML

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

CSS

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

解決済

カウントダウンがiphoneではNaNとなり、表示しないです。

ojreee
ojreee

総合スコア8

JavaScript

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

HTML

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

CSS

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

1回答

0グッド

1クリップ

907閲覧

投稿2021/11/11 08:12

残り時間のカウントダウンを追加しました。
iPhoneで閲覧するとNaNとなってしまい原因を探しています。

コード

HTML

1<div> 2 <p>残り<span class="countdown" data-date="2021-11-24 23:59"></span></p> 3</div>

javascript

1 2window.addEventListener('load',()=>{ 3 Countdown(); 4}) 5 6const Countdown = function(){ 7 const cd_areas = document.getElementsByClassName('countdown'); 8 [...cd_areas].forEach(cd_area=>{ 9 const target_unix = new Date(cd_area.dataset.date)/1000; 10 setInterval(()=>{ 11 const now_unix = Math.floor(new Date()/1000); 12 let sec = target_unix-now_unix; 13 let cd_text = ''; 14 if(sec>=86400){ 15 cd_text += Math.floor(sec/86400)+'日'; 16 sec = sec%86400; 17 } 18 if(sec>=3600){ 19 cd_text += td(Math.floor(sec/3600))+'時間'; 20 sec = sec%3600; 21 }else{ 22 cd_text += '00時間'; 23 } 24 if(sec>=60){ 25 cd_text += td(Math.floor(sec/60))+'分'; 26 sec = sec%60; 27 }else{ 28 cd_text += '00分'; 29 } 30 cd_text += td(sec)+'秒'; 31 cd_area.textContent = cd_text; 32 },1000); 33 }); 34 35 function td(x){ 36 if(x<10){ 37 return '0'+x; 38 }else{ 39 return x; 40 } 41 } 42} 43 44 (function() { 45 var deadline= '2021-04-25 20:00:00'; 46 function pad(num, size) { 47 var s= "0" + num; 48 return s.substr(s.length-size); 49 } 50 function getTimeRemaining(endtime) { 51 var t= Date.parse(endtime) -Date.parse(new Date()), 52 seconds= Math.floor((t /1000) % 60), 53 minutes= Math.floor((t /1000 /60) % 60), 54 hours= Math.floor((t /(1000 * 60 * 60)) % 24), 55 days= Math.floor(t /(1000 * 60 * 60 * 24)); 56 return { 57 'total': t, 58 'days': days, 59 'hours': hours, 60 'minutes': minutes, 61 'seconds': seconds 62 }; 63 } 64 function clock(id, endtime) { 65 var days= document.getElementById(id + '-days') 66 hours= document.getElementById(id + '-hours'), 67 minutes= document.getElementById(id + '-minutes'), 68 seconds= document.getElementById(id + '-seconds'); 69 var timeinterval= setInterval(function() { 70 var t= getTimeRemaining(endtime); 71 if (t.total <= 0){ 72 clearInterval(timeinterval); 73 } else { 74 days.innerHTML= pad(t.days, 2); 75 hours.innerHTML= pad(t.hours, 2); 76 minutes.innerHTML= pad(t.minutes, 2); 77 seconds.innerHTML= pad(t.seconds, 2); 78 } 79 }, 1000); 80 } 81 clock('js-clock', deadline); 82 })(); 83

パソコン(Win)版、パソコンからスマホ表示、androidでは問題なく動いていたのですがどうやらiPhone(Macは未確認)ではうまく動いていないようです。
safariだけではなく、iPhoneからGoogleアプリでページを閲覧しても残り00時間00分NaN秒という表示になります。
なぜiPhoneではNaNとなるのでしょうか。
宜しければお力をお貸しください。

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

2

ベストアンサー

Date コンストラクター (および同じように動作する Date.parse()) を使用した日付文字列の解析は、ブラウザーによって違いや矛盾があるため、使用を避けることを強くお勧めします。。

Date() コンストラクター - JavaScript | MDN

とのことですから、使わない方がいいのでは。

当面は、Day.jsのようなライブラリを使った方がいいと思います。

投稿2021/11/11 08:26

編集2021/11/11 08:30
Lhankor_Mhy

総合スコア33631

miyabi_takatsuk, maisumakun👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

ojreee

2021/11/12 01:02

ありがとうございます。 そうだったのですね…別の方法を探して設置しようと思います。 ありがとうございます。
int32_t

2021/11/12 01:14 編集

ECMAScript の仕様で ISO8601形式は対応していることが保証されているので、new Date(cd_area.dataset.date.replace(' ', 'T')) と書けばどのブラウザでも動くと思います。

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

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

HTML

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

CSS

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