如果想在第九題和第十題之間做出loading加載畫面，請問要怎麼限制「加載畫面」在第九題和第十題之間才會跳出?

#html #css #javascript #新手求講解

0967052569 2024-10-11 01:35:48 ‧ 2788 瀏覽

分享至

請問要怎麼限制「加載畫面」在第九題和第十題之間才會跳出?
(目前程式已完成loading加載畫面，但是會在測驗一開始就跑出來，不是在第九題之後出現)
正在完成畢專感恩的心!
/images/emoticon/emoticon07.gif

<!-- 問題 9  -->
                <div class="question" id="question9" style="display:none;text-align:center">
                    <p>
                        <br>回到家中，你決定將此次奇妙的旅程？
                    </p>
                    
                    <label>
                        <input type="radio" name="q9" onchange="addScoreAndNext(9,{influence:2,natural:1,nostalgia:1,foodie:1})">
                        A.抓緊時間，立即發文
                    </label><br>
                    <label>
                        <input type="radio" name="q9" onchange="addScoreAndNext(9,{natural:2,nostalgia:1,foodie:1})">
                        B.只與親近的親朋好友分享
                    </label><br>
                    <label>
                        <input type="radio" name="q9" onchange="addScoreAndNext(9,{natural:1,nostalgia:2,foodie:1})">
                        C.獨自將一天所遇之事記錄下來
                    </label><br>
                    <label>
                        <input type="radio" name="q9" onchange="addScoreAndNext(9,{natural:1,nostalgia:1,foodie:2})">
                        D.不做任何動作，將回憶單純記在腦中
                    </label><br>
                    
                </div>

                 <!-- loading畫面  -->
                <div class="loading-wrapper" id="hidden">
                <div style="color: #64d6e2" class="loading la-square-jelly-box la-3x">
                    <div></div>
                    <div></div>
                </div>
                </div>

(第十題開始是互動遊戲目前還沒寫出來...)

css部分

/* loading畫面*/
.la-square-jelly-box,
.la-square-jelly-box > div {
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.la-square-jelly-box {
  display: block;
  font-size: 0;
  color: #fff;
}

.la-square-jelly-box.la-dark {
  color: #333;
}

.la-square-jelly-box > div {
  display: inline-block;
  float: none;
  background-color: currentColor;
  border: 0 solid currentColor;
}

.la-square-jelly-box {
  width: 32px;
  height: 32px;
}

.la-square-jelly-box > div:nth-child(1),
.la-square-jelly-box > div:nth-child(2) {
  position: absolute;
  left: 0;
  width: 100%;
}

.la-square-jelly-box > div:nth-child(1) {
  top: -25%;
  z-index: 1;
  height: 100%;
  border-radius: 10%;
  -webkit-animation: square-jelly-box-animate 0.6s -0.1s linear infinite;
  -moz-animation: square-jelly-box-animate 0.6s -0.1s linear infinite;
  -o-animation: square-jelly-box-animate 0.6s -0.1s linear infinite;
  animation: square-jelly-box-animate 0.6s -0.1s linear infinite;
}

.la-square-jelly-box > div:nth-child(2) {
  bottom: -9%;
  height: 10%;
  background: #000;
  border-radius: 50%;
  opacity: 0.2;
  -webkit-animation: square-jelly-box-shadow 0.6s -0.1s linear infinite;
  -moz-animation: square-jelly-box-shadow 0.6s -0.1s linear infinite;
  -o-animation: square-jelly-box-shadow 0.6s -0.1s linear infinite;
  animation: square-jelly-box-shadow 0.6s -0.1s linear infinite;
}

.la-square-jelly-box.la-sm {
  width: 16px;
  height: 16px;
}

.la-square-jelly-box.la-2x {
  width: 64px;
  height: 64px;
}

.la-square-jelly-box.la-3x {
  width: 96px;
  height: 96px;
}

/*
 * Animations
 */

@-webkit-keyframes square-jelly-box-animate {
  17% {
    border-bottom-right-radius: 10%;
  }
  25% {
    -webkit-transform: translateY(25%) rotate(22.5deg);
    transform: translateY(25%) rotate(22.5deg);
  }
  50% {
    border-bottom-right-radius: 100%;
    -webkit-transform: translateY(50%) scale(1, 0.9) rotate(45deg);
    transform: translateY(50%) scale(1, 0.9) rotate(45deg);
  }
  75% {
    -webkit-transform: translateY(25%) rotate(67.5deg);
    transform: translateY(25%) rotate(67.5deg);
  }
  100% {
    -webkit-transform: translateY(0) rotate(90deg);
    transform: translateY(0) rotate(90deg);
  }
}

@-moz-keyframes square-jelly-box-animate {
  17% {
    border-bottom-right-radius: 10%;
  }
  25% {
    -moz-transform: translateY(25%) rotate(22.5deg);
    transform: translateY(25%) rotate(22.5deg);
  }
  50% {
    border-bottom-right-radius: 100%;
    -moz-transform: translateY(50%) scale(1, 0.9) rotate(45deg);
    transform: translateY(50%) scale(1, 0.9) rotate(45deg);
  }
  75% {
    -moz-transform: translateY(25%) rotate(67.5deg);
    transform: translateY(25%) rotate(67.5deg);
  }
  100% {
    -moz-transform: translateY(0) rotate(90deg);
    transform: translateY(0) rotate(90deg);
  }
}

@-o-keyframes square-jelly-box-animate {
  17% {
    border-bottom-right-radius: 10%;
  }
  25% {
    -o-transform: translateY(25%) rotate(22.5deg);
    transform: translateY(25%) rotate(22.5deg);
  }
  50% {
    border-bottom-right-radius: 100%;
    -o-transform: translateY(50%) scale(1, 0.9) rotate(45deg);
    transform: translateY(50%) scale(1, 0.9) rotate(45deg);
  }
  75% {
    -o-transform: translateY(25%) rotate(67.5deg);
    transform: translateY(25%) rotate(67.5deg);
  }
  100% {
    -o-transform: translateY(0) rotate(90deg);
    transform: translateY(0) rotate(90deg);
  }
}

@keyframes square-jelly-box-animate {
  17% {
    border-bottom-right-radius: 10%;
  }
  25% {
    -webkit-transform: translateY(25%) rotate(22.5deg);
    -moz-transform: translateY(25%) rotate(22.5deg);
    -o-transform: translateY(25%) rotate(22.5deg);
    transform: translateY(25%) rotate(22.5deg);
  }
  50% {
    border-bottom-right-radius: 100%;
    -webkit-transform: translateY(50%) scale(1, 0.9) rotate(45deg);
    -moz-transform: translateY(50%) scale(1, 0.9) rotate(45deg);
    -o-transform: translateY(50%) scale(1, 0.9) rotate(45deg);
    transform: translateY(50%) scale(1, 0.9) rotate(45deg);
  }
  75% {
    -webkit-transform: translateY(25%) rotate(67.5deg);
    -moz-transform: translateY(25%) rotate(67.5deg);
    -o-transform: translateY(25%) rotate(67.5deg);
    transform: translateY(25%) rotate(67.5deg);
  }
  100% {
    -webkit-transform: translateY(0) rotate(90deg);
    -moz-transform: translateY(0) rotate(90deg);
    -o-transform: translateY(0) rotate(90deg);
    transform: translateY(0) rotate(90deg);
  }
}

@-webkit-keyframes square-jelly-box-shadow {
  50% {
    -webkit-transform: scale(1.25, 1);
    transform: scale(1.25, 1);
  }
}

@-moz-keyframes square-jelly-box-shadow {
  50% {
    -moz-transform: scale(1.25, 1);
    transform: scale(1.25, 1);
  }
}

@-o-keyframes square-jelly-box-shadow {
  50% {
    -o-transform: scale(1.25, 1);
    transform: scale(1.25, 1);
  }
}

@keyframes square-jelly-box-shadow {
  50% {
    -webkit-transform: scale(1.25, 1);
    -moz-transform: scale(1.25, 1);
    -o-transform: scale(1.25, 1);
    transform: scale(1.25, 1);
  }
}

.loading-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #222;
  z-index: 9999;
}

.loading {
  position: absolute;
  width: 80px;
  height: 80px;
  top: 50%;
  left: 50%;
  margin-top: -15px;
  margin-left: -15px;
}

js部分

function startQuiz() {
    document.getElementById("mainPage").style.display = "none"; // 隱藏首頁
    document.getElementById("question1").style.display = "block"; // 顯示第一題
}


// 紀錄分數並跳到下一題
let scores = {
    influencer: 0,
    nature: 0,
    nostalgia: 0,
    foodie: 0
};

// 增加分數並跳轉下一題
function addScoreAndNext(currentQuestion, scoreObject) {
    // 更新分數邏輯
    scores.influencer += scoreObject.influencer;
    scores.nature += scoreObject.nature;
    scores.nostalgia += scoreObject.nostalgia;
    scores.foodie += scoreObject.foodie;

    // 跳到下一題
    nextQuestion(currentQuestion);
}

// 切換到下一題
function nextQuestion(currentQuestion) {
    const currentDiv = document.getElementById('question' + currentQuestion);
    const nextDiv = document.getElementById('question' + (currentQuestion + 1));

    if(currentDiv){
    currentDiv.style.display='none';  //隱藏當前問題  
    }
    if(nextDiv){
        nextDiv.style.display='block';//顯示下一題
    }else{
        showResult(); //如果沒有下一題顯示結果
    }

}


// 總題目數
const totalQuestions = 12;
// 當前題目編號
let currentQuestion = 0;

// 更新進度條
function updateProgress() {
    if (currentQuestion < totalQuestions) {
        currentQuestion++;
        const progressPercentage = (currentQuestion / totalQuestions) * 100;

        // 更新進度條高度
        document.getElementById('progress-bar').style.height = progressPercentage + '%';

        // 更新進度百分比文字
        document.getElementById('progress-text').textContent = Math.round(progressPercentage) + '%';
    }
}

//loading畫面
$(document).ready(function () {
    setTimeout(function () {
      $(".loading-wrapper").fadeOut(500);
    }, 1000);
  });

看更多先前的討論...收起先前的討論...

froce iT邦大師 1 級 ‧ 2024-10-11 09:09:28 檢舉

反正是互動遊戲，把loading畫面用JS寫在第10題前面。

wolfwang iT邦研究生 4 級 ‧ 2024-10-11 09:38:48 檢舉

何不說明一下為什麼只有在第9和第10之間才需要 loading的動畫？例如是因為第10題比較多東西需要載入，所以才需要 loading ？因為有時不同的前提會有不同的解法。

ccutmis iT邦高手 2 級 ‧ 2024-10-11 10:04:19 檢舉

$(document).ready(function () {
是用到 jquery 嗎? 那前面一堆 getElementById 是在... QQ?
認真的說，我覺得整個架構應該要重構成 MVC 架構...

單從樓主提問面來說，最粗暴的解法就是一開始就隱藏 .loading-wrapper (直接 hide()就好 )，寫了一個fadeOut是不是多此一舉，然後就是在第9和第10之間顯示.loading-wrapper (直接 show()就好)

一大砣沒整理的源碼說真的，會勸退很多熱心幫忙的網友，提問的智慧原文網址如下，建議您撥空研讀並試著改善自己的提問發文方式
https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way

harry xie iT邦研究生 1 級 ‧ 2024-10-11 22:51:02 檢舉

本來想幫忙看的，看前兩篇大家熱心回答都沒在回覆，算了...

wuwood iT邦新手 5 級 ‧ 2024-10-14 15:02:12 檢舉

addScoreAndNext或nextQuestion函式可以多加一個參數叫做isloading:boolean 用來判別這個步驟之間是不是需要顯示loading動畫， if true 就先顯示loading動畫再進入下一個單元
反之其他單元之前都是false就不會顯示loading動畫

example: nextQuestion
// 切換到下一題
function nextQuestion(currentQuestion) {
const currentDiv = document.getElementById('question' + currentQuestion);
const nextDiv = document.getElementById('question' + (currentQuestion + 1));

if(currentDiv){
currentDiv.style.display='none'; //隱藏當前問題
}
if(nextDiv){
if(currentQuestion === 9){

displayLoading()
setTimeout(() => {
nextDiv.style.display='block';//顯示下一題
}, "1000");

}

}else{
showResult(); //如果沒有下一題顯示結果
}

}

然後你的單元判別好像都是用場景上是否已經存在來決定
所以做起來應該有點雜亂吧？