【jQuery】safari(スマホ)で表示した際に、if文の条件式の比較が上手く機能しません。

前提・実現したいこと

現在、jQueryを活用して、カウントダウン機能を含んだスライドショーを実装中です。
こちらのカウントダウン機能についてお聞きしたいことがあり、質問をしています。

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

上記の機能について、パソコン上では、上手く動いていることが確認できました。
しかし、スマホで確認をすると、カウントダウンの表示がされていません。

どの部分に問題があるのかご教示ください。

なお、コンソールで確認をした限りですとエラーメッセージは表示されていません。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3
4<head>
5  <meta charset="utf-8">
6  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
7  <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
8  <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
9  <script type="text/javascript" src="jQuery-3.5.1.min.js"></script>
10  <script type="text/javascript" src="slick/slick.min.js"></script>
11  <title></title>
12</head>
13
14<body>
15
16  <div class="slider-outer">
17    <div class="your-class">
18      <div class="count-down">
19        <p id="countDownMsg"></p>
20        <img src="img/audience.jpg" alt="">
21      </div>
22      <img src="img/soccer.jpg" alt="">
23      <img src="img/bouldering.jpg" alt="">
24    </div>
25  </div>
26
27  <script>
28  // スライドショー本体のコード
29    $(document).ready(function(){
30      $('.your-class').slick({
31        autoplay:true,
32        autoplaySpeed: 3000,
33        dots:true,
34        fade: true,
35      });
36    });
37
38    // カウントダウン部分のコード
39    $(document).ready(function(){
40      var openingDay = new Date('07,23,2021, 00:00');
41      var openingCeremony = new Date('07,23,2021, 20:00');
42      var closingSession = new Date('08,08,2021, 20:00');
43      var times = 24 * 60 * 60 * 1000;
44
45      setInterval(function(){
46        var today = new Date();
47    		var diff  = openingDay.getTime() - today.getTime();
48    		var countDownDay   = Math.ceil(diff / times);// 開幕当日までの残り日数 //
49        if ( openingDay > today ) { // ～開幕式当日 //
50          $("#countDownMsg").html("<p>オリンピック開幕まで<br>残り<span id='count-down-day'></span>日！</p>");
51          $("#count-down-day").html(countDownDay);
52        } else if(today < openingCeremony) { // 開幕式当日～開幕式前 //
53          $("#countDownMsg").html("<p>オリンピック<br><span id='count-down-day'></span></p>");
54          $("#count-down-day").html("本日開会！");
55        } else if(today < closingSession) { // 大会期間中 //
56          $("#countDownMsg").html("<p>オリンピック<br>現在、<span id='count-down-day'></span></p>");
57          $("#count-down-day").html("開催中！");
58        } else { // 閉幕後 //
59          $("#countDownMsg").remove(today);
60        }
61      //
62      },1000);
63      //
64    });
65  </script>
66</body>
67
68</html>
69

CSS
1.count-down{
2  position: relative;
3}
4.count-down >p{
5  display: block;
6  position: absolute;
7  text-shadow: 2px 2px 4px black;
8  color: white;
9  font-weight:bold;
10  left: 10%;
11}
12.count-down >img{
13  width: 100%;
14}
15
16@media screen and (min-width: 960px) {
17  .slider-outer{
18    width: 60%;
19    margin: auto;
20  }
21  #count-down-day{
22    color: tomato;
23    font-size: 70px;
24  }
25  .count-down >p{
26    font-size: 40px;
27  }
28}
29
30@media screen and (max-width: 959px) {
31  .slider-outer{
32    width: 90%;
33    margin: auto;
34  }
35  .count-down >p{
36    font-size: 30px;
37  }
38  #count-down-day{
39    color: tomato;
40    font-size: 50px;
41  }
42}
43

試したこと

試しに、「if ( openingDay > today )」の中身を「(1 < 2)」に変えたところ、スマホ上でも表示されるようになったので、「( openingDay > today )」以外の部分に問題は無く、日付の比較方法に問題があると考えています。

日付の比較方法について、ググってみたところ、「日付や時間の差を求めたい場合は、getTime()メソッドでタイムスタンプを取得し、タイムスタンプの差を計算する」という情報を得たので、こちらの部分を「 if ( openingDay.getTime() > today.getTime() )」という形に修正しましたが、スマホでは表示されませんでした。

補足情報（FW/ツールのバージョンなど）

スマホ：iPhone８

最後に

お忙しいとは思いますが、ご協力をどうぞよろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

このへんに原因がありそうです > JavaScript の Date 型を扱うときに気をつけること - Qiita

日付定義の部分を修正してみましたので試してみてください。

javascript
1// var openingDay = new Date('07,23,2021, 00:00');
2var openingDay = new Date('2021-07-23T00:00:00.000+09:00');
3
4// var openingCeremony = new Date('07,23,2021, 20:00');
5var openingCeremony = new Date('2021-07-23T20:00:00.000+09:00');
6
7// var closingSession = new Date('08,08,2021, 20:00');
8var closingSession = new Date('2021-08-08T20:00:00.000+09:00');

投稿2020/09/02 11:08

退会済みユーザー

総合スコア0

sou-1

2020/09/02 17:07

ありがとうございます、無事に解決できました！日付の記載に問題があると思い、色々と調べる中で、参考にされた記事も拝見したのですが、私にはまだ内容が理解できませんでした… 質問を投稿した後も３時間近く、あれこれと原因を探して彷徨っていました。ご力添えがなければ、きっとまだ悩み続けていたかと思います。お忙しい中、ご回答いただき、本当にありがとうございました！

行動規範の内容に同意します