微件:CodeLoadingUI/SCF：修订间差异

来自SOKA CAFE
可视化wikitext
第60行： 第60行：
     overflow: auto;
     overflow: auto;
     white-space: pre-wrap;
     white-space: pre-wrap;
    font-family: monospace;
  }
  /* 逐行键入动画 */
  .typing {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid #fff; /* 光标效果 */
    animation: blink-caret 0.75s step-end infinite;
  }
  @keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: #fff; }
   }
   }
</style>
</style>
<!-- HTML 结构 -->
<div id="loadingOverlay">
  <div class="loader"></div>
  <div id="progressBar">
    <div></div>
  </div>
  <div id="codeDisplay"></div>
</div>


<!-- JavaScript 逻辑 -->
<!-- JavaScript 逻辑 -->
第93行： 第69行：
     var progress = 0;
     var progress = 0;
     var progressBar = document.getElementById('progressBar').querySelector('div');
     var progressBar = document.getElementById('progressBar').querySelector('div');
    var codeDisplay = document.getElementById('codeDisplay');
    // 模拟的代码行
    var codeLines = [
      "Loading system...",
      "",
      "dir /s /b shukyo_city_festival",
      "File Not Found",
      "",
      "dir /s /b *shukyo_city_festival",
      "Finding…",
      "",
      "┗ admin:File Not Found",
      "┗ adult:File Not Found",
      "┗ alternative:File Not Found",
      "┗ credit:File Not Found",
      "┗ declassified:File Not Found",
      "┗ fragment:File Not Found",
      "┗ system:File Not Found",
      "┗ thous:【合作】宗教都市祭 ~ Shukyo City Festival",
      "",
      ">/thous:【合作】宗教都市祭 ~ Shukyo City Festival"
    ];
    // 逐行显示代码
    function typeLines(index) {
      if (index < codeLines.length) {
        var line = document.createElement('div');
        line.className = 'typing';
        line.textContent = codeLines[index];
        codeDisplay.appendChild(line);
        // 模拟打字效果
        var text = codeLines[index];
        var charIndex = 0;
        var typingInterval = setInterval(function () {
          if (charIndex < text.length) {
            line.textContent = text.substring(0, charIndex + 1);
            charIndex++;
          } else {
            clearInterval(typingInterval);
            line.classList.remove('typing'); // 移除光标效果
            typeLines(index + 1); // 显示下一行
          }
        }, 50); // 每个字符的显示间隔
      }
    }
    // 开始显示代码
    typeLines(0);
    // 模拟10秒加载时间
     var interval = setInterval(function () {
     var interval = setInterval(function () {
       progress += 1; // 每秒增加1%
       progress += 5;
       progressBar.style.width = progress + '%';
       progressBar.style.width = progress + '%';
       if (progress >= 100) {
       if (progress >= 100) {
第152行： 第76行：
         document.getElementById('loadingOverlay').style.display = 'none'; // 隐藏加载界面
         document.getElementById('loadingOverlay').style.display = 'none'; // 隐藏加载界面
       }
       }
     }, 100); // 每100毫秒更新一次进度条
     }, 300);
   });
   });
</script>
</script>
<!-- HTML 结构 -->
<div id="loadingOverlay">
  <div class="loader"></div>
  <div id="progressBar">
    <div></div>
  </div>
  <div id="codeDisplay">
    Loading system...
    dir /s /b shukyo_city_festival
    File Not Found
    dir /s /b *shukyo_city_festival
    Finding…
    ┗ admin:File Not Found
    ┗ adult:File Not Found
    ┗ alternative:File Not Found
    ┗ credit:File Not Found
    ┗ declassified:File Not Found
    ┗ fragment:File Not Found
    ┗ system:File Not Found
    ┗ thous:【合作】宗教都市祭 ~ Shukyo City Festival
    >/thous:【合作】宗教都市祭 ~ Shukyo City Festival
  </div>
</div>

2025年3月2日 (日) 10:12的版本

<style> 

 /* 全屏覆盖层 */
 #loadingOverlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: #000;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   z-index: 1000;
   color: #fff;
   font-family: monospace;
 }

 /* 加载动画 */
 .loader {
   border: 5px solid #f3f3f3;
   border-top: 5px solid #3498db;
   border-radius: 50%;
   width: 50px;
   height: 50px;
   animation: spin 1s linear infinite;
 }

 @keyframes spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 }

 /* 进度条 */
 #progressBar {
   width: 200px;
   height: 10px;
   background: #444;
   margin-top: 20px;
   border-radius: 5px;
   overflow: hidden;
 }

 #progressBar div {
   height: 100%;
   width: 0;
   background: #3498db;
   transition: width 0.5s ease;
 }

 /* 模拟代码样式 */
 #codeDisplay {
   margin-top: 20px;
   background: #222;
   padding: 10px;
   border-radius: 5px;
   width: 80%;
   max-width: 600px;
   overflow: auto;
   white-space: pre-wrap;
 }

</style>

<script> 

 // 确保DOM加载完成后再执行脚本
 document.addEventListener('DOMContentLoaded', function () {
   var progress = 0;
   var progressBar = document.getElementById('progressBar').querySelector('div');
   var interval = setInterval(function () {
     progress += 5;
     progressBar.style.width = progress + '%';
     if (progress >= 100) {
       clearInterval(interval);
       document.getElementById('loadingOverlay').style.display = 'none'; // 隐藏加载界面
     }
   }, 300);
 });

</script> 

   Loading system...

   dir /s /b shukyo_city_festival
   File Not Found

   dir /s /b *shukyo_city_festival
   Finding…

   ┗ admin:File Not Found
   ┗ adult:File Not Found
   ┗ alternative:File Not Found
   ┗ credit:File Not Found
   ┗ declassified:File Not Found
   ┗ fragment:File Not Found
   ┗ system:File Not Found
   ┗ thous:【合作】宗教都市祭 ~ Shukyo City Festival

   >/thous:【合作】宗教都市祭 ~ Shukyo City Festival
取自“https://soka.cafe/index.php?title=微件:CodeLoadingUI/SCF&oldid=2013”