使用JavaScript实现的预加载动画无法运行问题求助

问题原因分析 #

• 选择器错误：获取方块元素的选择器写错了，原代码使用.preloader .block .block，但实际DOM结构是.preloader > .blocks > .block，导致没有选中任何元素，JS动画逻辑根本没执行。
• 函数定义语法错误：let preload = function () => {混合了函数表达式和箭头函数语法，属于语法错误，浏览器会直接报错，导致preload()无法触发。
• 初始位置与动画逻辑不匹配：每个方块的初始CSS位置和position变量初始值不对应，第一次切换位置时没有视觉变化。
• 缺少过渡效果：JS修改元素位置时没有添加CSS过渡属性，位置变化瞬间完成，看起来像没动作。

修复步骤 #

1. 修正选择器：将获取方块的选择器改为.preloader .blocks .block，正确选中目标元素。
2. 修复函数定义：把错误的函数定义改为标准箭头函数let preload = () => {。
3. 匹配初始位置与position值：根据每个方块的初始CSS位置，设置对应的初始position值，确保第一次动画触发时有视觉变化。
4. 添加过渡动画：给.block类添加transition: all 0.3s ease;，让位置变化有平滑效果。
5. 移除重复ID：删除三个block元素的重复id="block"，符合DOM规范。

修复后的完整代码 #

<center>
<head>
    <title>RapidClicker</title>
</head>
<body onLoad="kickStart()">
    
        <div class="preloader" id="preloader">
    <div class="blocks" id="blocks">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
    <h4 id="loadingText">Loading</h4>
    </div>
    
    <div>
    <h1 id="amount"> 0 </h1>
   <button class="main" onClick="clicked()">Click Me!</button><br><br>
    <button onClick="upgrade2()">Increase Earnings +1<p id="upCost2">100</p></button><br><br>
    <button onClick="upgrade()">Double Earnings<p id="upCost1">200</p></button><br><br>
    <button onClick="upgrade3()">Increase Earnings +4<p id="upCost3">500</p></button><br><br>
    <button onClick="upgrade4()">Auto Clicker<p id="upCost4">1000</p></button><br><br>
    </div>
    
    
    <div>
    <b>
    <p>Statistics</p><br><br>
        <p>Clicks</p>
    <p id="clickamount">0</p><br>
        <p>Upgrades</p>
    <p id="upgradeamount">0</p><br>
        <p>Money Earned</p>
    <p id="moneyamount">0</p><br>
        <p>Ticks</p>
    <p id="ticks">0</p>
    </b>
    </div>
    
    
    <div>
        <p> Settings </p>
        <br>
    <button onClick="rel()">Reset</button><br><br>
            <button onClick="resetmoney()">Set money to 0</button><br><br>
    <p>2023 - ClickerMe by GroupSSalt<br></p>
        <h2> Version </h2>
        <h1 id="version">2</h1>
    </div>
    <br>
    <audio controls autoplay>
  <source src="audio/Track1.mp3" type="audio/ogg">
</audio>

    
<script>    
    "use strict";
    
    var money = 0;
    var upgradeCost1 = 200;
    var clicks = 0;
    var statAdd = 1;
    var upgrades = 0;
    var moneyEarned = 0;
    var moneyAdd = 1;
    var times2 = 2;
    var add1 = 1;
    var upgradeCost2 = 100;
    var upgradeCost3 = 500;
    var add4 = 4;
    var upgradeCost4 = 1000;
    var ticksamt = 0;
  var autoAdd = 1;
    
    var version = "2";
    
    var clicksOutput = document.getElementById('clickamount');
    var upgradesOutput = document.getElementById('upgradeamount');
    var moneyEarnedOutput = document.getElementById('moneyamount');
    var amount = document.getElementById('amount');
    var upCost1 = document.getElementById('upCost1');
    var versionDisplay = document.getElementById('version');
    var upCost2 = document.getElementById('upCost2');
    var upCost3 = document.getElementById('upCost3');
    var upCost4 = document.getElementById('upCost4');
   var autoUpCost = document.getElementById('autoUpCost');
    var ticks = document.getElementById('ticks');
    
    function clicked() {
        money += moneyAdd;
        clicks += statAdd;
        moneyEarned += moneyAdd;
        amount.innerHTML = money;
        clicksOutput.innerHTML = clicks;
        moneyEarnedOutput.innerHTML = moneyEarned;
        setInterval(tickspersec, 1);
    }
    function upgrade() {
        if (money >= upgradeCost1) {
            money -= upgradeCost1;
            upgradeCost1 *= times2;
            moneyAdd *= times2;
            upgrades += statAdd;
            upgradesOutput.innerHTML = upgrades;
            amount.innerHTML = money;
            upCost1.innerHTML = upgradeCost1;
        }
    }
    function upgrade2() {
        if (money >= upgradeCost2) {
            money -= upgradeCost2;
            upgradeCost2 *= times2;
            moneyAdd += add1;
            upgrades += statAdd;
            upgradesOutput.innerHTML = upgrades;
            amount.innerHTML = money;
            upCost2.innerHTML = upgradeCost2;
        }
    }
    function upgrade3() {
        if (money >= upgradeCost3) {
            money -= upgradeCost3;
            upgradeCost3 *= times2;
            moneyAdd += add4;
            upgrades += statAdd;
            upgradesOutput.innerHTML = upgrades;
            amount.innerHTML = money;
            upCost3.innerHTML = upgradeCost3;
        }
    }
        function upgrade4() {
        if (money >= upgradeCost4) {
            money -= upgradeCost4;
            upgradeCost4 *= times2;
            upgrades += statAdd;
            autoAdd += add1;
            upgradesOutput.innerHTML = upgrades;
            amount.innerHTML = money;
            upCost4.innerHTML = upgradeCost4;
            setInterval(upgrade4function, 5000);
        }
    }
    function upgrade4function() {
        money += autoAdd;
        clicks += statAdd;
        moneyEarned += moneyAdd;
        upgradesOutput.innerHTML = upgrades;
        amount.innerHTML = money;
        clicksOutput.innerHTML = clicks;
        upCost4.innerHTML = upgradeCost4;
        moneyEarnedOutput.innerHTML = moneyEarned;
    }
    function rel() {
        location.reload();
    }
    function resetmoney() {
        money = 0;
        amount.innerHTML = money;
    }
    function kickStart() {
        versionDisplay.innerHTML = version;
    }
    function tickspersec() {
        ticksamt += add1;
        ticks.innerHTML = ticksamt;
    }
    document.onkeydown = function (e) {
        return false;
};
    
    // Loading
    
let preload = () => {
    const blocks = document.querySelectorAll('.preloader .blocks .block');
    
    let interval = 0;
    blocks.forEach((block, i) => {
        setTimeout(() => {
            animate(block, i);
    }, interval);
    interval += 500;
});
    
    function animate(block, index) {
        // 根据初始位置设置对应的position值
        let position = index === 0 ? 1 : index === 1 ? 2 : 3;
        setInterval(() => {
            switch (position) {
                case 0:
                    block.style.top = "40px";
                    position = 3;
                    break;
                case 1:
                    block.style.left = "0px";
                    position = 0;
                    break;
                case 2:
                    block.style.top = "40px";
                    position = 1;
                    break;
                case 3:
                    block.style.left = "40px";
                    position = 2;
                    break;
                      }
        }, 1500);
    }
}
    preload();
</script>
    
    
    <style>
        body {
           background-image: url('Halloween-bkgrnd.png');
            background-attachment: fixed;
            background-size: 100% 100%;
            margin: 0;
            padding: 0;
        }
        
        
        div {
            border: 3px solid white;
            width: 300px;
        }
        
        
        input {
            border: 3px solid white;
            background-color: transparent;
        }
        
        
h1 {
    color: white;
}
        
        
h2 {
    color: white;
}
        
        
h3 {
    color: white;
}
        
        
h4 {
    color: white;
}
        
        
h5 {
    color: white;
}
        
        
h6 {
    color: white;
}
        
        
p {
    color: white;
}
        
        
a {
    border: 2px solid white;
   color: white;
    background-color: transparent;
    width: 50%;
}
        
        
button {
    border: 3px solid white;
   color: white;
    width: 250px;
    background-color: transparent;
}
        .preloader {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            
            display: flex;
            justify-content: center;
            align-items: center;
            flex-flow: column;
            
            width: 100vw;
            height: 100vh;
            
            background-color: black;
            border: 0px solid black;
            
            transition: all 0.5s ease-out;
        }
        
        .preloader .loadingText {
            color: white;
            
            font-size: 70px;
            font-weight: 500;
        }
        
        .preloader .blocks {
            position: relative;
            
            width: 78px;
            height: 78px;
            border-radius: 5px;
            border: 0px solid black;
            
            animation: rotate 5s ease-in-out infinite;
        }
        
        .preloader .blocks .block {
            position: absolute;
            
            border-radius: 5px;
            width: 20px;
            height: 20px;
            
            border-color: orange;
            background-color: orange;
            /* 添加过渡效果 */
            transition: all 0.3s ease;
        }
        
        .preloader .blocks .block:nth-child(1) {
            top: 0;
            left: 40px;
        }
        .preloader .blocks .block:nth-child(2) {
            top: 0;
            left: 0;
        }
        .preloader .blocks .block:nth-child(3) {
            top: 40px;
            left: 0;
        }
        
        @keyframes rotate {
            0% { transform: rotate(0deg) }
            100% { transform: rotate(360deg) }
        }
    </style>
</center>

内容的提问来源于stack exchange，提问作者CHRISTIAN BONE