iT邦幫忙

0

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

#html #css #javascript #新手求講解
0967052569 2024-10-11 01:35:48 ‧ 410 瀏覽

  • 分享至 

  • xImage

請問要怎麼限制「加載畫面」在第九題和第十題之間才會跳出?
(目前程式已完成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 檢舉
本來想幫忙看的，看前兩篇大家熱心回答都沒在回覆，算了...
登入發表討論
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友回答

立即登入回答
iThome鐵人賽
參賽組數
1056 組
團體組數
40 組
累計文章數
20587 篇
最後報名日
9/15
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 13th鐵人賽 16th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙