ローディング画面 同日2回目のアクセス時は表示しない

Question

動くWebデザインアイディア帳のデモを参考に作成したいです。

↓こちらのローディング画面で
https://coco-factory.jp/ugokuweb/move01/4-1-2/

↓こちらの処理を組み合わせたいです
https://coco-factory.jp/ugokuweb/move01/4-1-7/

現状としては、
ローディング画面の背景色が画面いっぱいに広がったまま止まっています。
何が原因なのか突き止められずにいます。
ご教授いただけると幸いです。
よろしくお願いいたします。

↓現在のコードはこちらです

  //テキストのカウントアップ+バーの設定
  var bar = new ProgressBar.Line(splash_text, {
    //id名を指定
    easing: "easeInOut", //アニメーション効果linear、easeIn、easeOut、easeInOutが指定可能
    duration: 1000, //時間指定(1000＝1秒)
    strokeWidth: 0.2, //進捗ゲージの太さ
    color: "#5dc2d0", //進捗ゲージのカラー
    trailWidth: 0.2, //ゲージベースの線の太さ
    trailColor: "#fff", //ゲージベースの線のカラー
    text: {
      //テキストの形状を直接指定
      style: {
        //天地中央に配置
        position: "absolute",
        left: "50%",
        top: "50%",
        padding: "0",
        margin: "-30px 0 0 0", //バーより上に配置
        transform: "translate(-50%,-50%)",
        "font-size": "1rem",
        color: "#5dc2d0",
      },
      autoStyleContainer: false, //自動付与のスタイルを切る
    },
    step: function (state, bar) {
      bar.setText(Math.round(bar.value() * 100) + " %"); //テキストの数値
    },
  });

  //同じ日付で2回目以降ならローディング画面非表示の設定
  var splash_text = $.cookie("accessdate"); //キーが入っていれば年月日を取得
  var myD = new Date(); //日付データを取得
  var myYear = String(myD.getFullYear()); //年
  var myMonth = String(myD.getMonth() + 1); //月
  var myDate = String(myD.getDate()); //日

  if (splash_text != myYear + myMonth + myDate) {
    //cookieデータとアクセスした日付を比較↓
    $("#splash").css("display", "block"); //１回目はローディングを表示

    bar.animate(1.0, function () {
      //バーを描画する割合を指定します 1.0 なら100%まで描画します

      $("#splash").delay(500).fadeOut(800);
      var myD = new Date();
      var myYear = String(myD.getFullYear());
      var myMonth = String(myD.getMonth() + 1);
      var myDate = String(myD.getDate());
      $.cookie("accessdate", myYear + myMonth + myDate); //accessdateキーで年月日を記録
      //アニメーションが終わったら#splashエリアをフェードアウト
    });
  } else {
    $("#splash").css("display", "none"); //同日2回目のアクセスでローディング画面非表示
  }

Comments

[Lhankor_Mhy]

エラーメッセージや実行ログをコピー&ペーストしましょう
https://teratail.com/help/question-tips#questionTips3-4-2

[captain-coco]

コンソールの部分のことで大丈夫でしょうか？
スクリーンショットを追加しました。

[Lhankor_Mhy]

splash_text には何が入っているのですか？

[captain-coco]

splash_text　を今一度見直してみましたところ、
冒頭の１行目と
var bar = new ProgressBar.Line(splash_text, {
途中の部分で
var splash_text = $.cookie("accessdate"); //キーが入っていれば年月日を取得
重複していたので、
こちら別の変数名に変えたところ意図した動きになりました。
ご指摘ありがとうございました。

Answer 1

ブラウザの開発コンソールにJavaScriptのエラーが出てないでしょうか？

追記

new ProgressBar.Lineに渡しているsplash_textがundefinedになっているようですね。

progressbar.js/progressbar.js at f87245576b9b491f719111797adb61b5b7f6f382 · kimmobrunfeldt/progressbar.js

Comments

[captain-coco]

コンソールのスクリーンショットを追加しました。
よろしくお願いします。

[captain-coco]

splash_text　を今一度見直すきかっけになりました。
コンソールログの見方がようやく分かりました。
ありがとうございます！

冒頭の１行目と
var bar = new ProgressBar.Line(splash_text, {

途中の部分で
　var splash_text = $.cookie("accessdate"); //キーが入っていれば年月日を取得
splash_textが重複していたので、
途中に出てくるsplash_textを別の変数名に変えたところ意図した動きになりました。
ご指摘ありがとうございました。