Android HTML Viewer中魔方计时器按钮失效、Scramble显示N/A求助

问题现象 #

PC端功能完全正常的魔方计时器网页，在Android HTML Viewer中出现以下异常：

• Scramble序列始终显示"N/A"，无法生成新的打乱序列
• 计时器的启停按钮和重置按钮点击无任何响应

问题原因 #

Android自带的HTML Viewer属于老旧WebView环境，对现代JavaScript特性支持不足，核心问题包括：

1. DOM加载顺序错误：JavaScript代码在页面DOM元素未完全渲染时就执行，导致无法获取到目标DOM节点
2. API兼容性缺失：箭头函数、String.prototype.padStart等ES6+特性在该环境中不支持

修复后的完整代码 #

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>루빅스 큐브 타이머</title>
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
            text-align: center;
            padding: 50px;
            background-color: #F0F2F5;
        }
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            width: 100%;
        }
        #scramble {
            font-size: 20px;
            margin-bottom: 20px;
            font-weight: bold;
            color: #333;
        }
        #timer {
            font-size: 48px;
            margin-bottom: 20px;
            color: #333;
        }
        #resetBtn, #startBtn {
            font-size: 24px;
            padding: 15px 30px;
            margin: 0 10px;
            border-radius: 8px;
            cursor: pointer;
            border: none;
        }
        #resetBtn {
            background-color: #F56565;
            color: white;
        }
        #startBtn {
            background-color: #48BB78;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container">
        <div id="scramble">Scramble: N/A</div>
        <div id="timer">00:00.000</div>
        <div>
            <button id="resetBtn">리셋</button>
            <button id="startBtn">시작</button>
        </div>
    </div>
    <script>
        // 替代padStart的兼容函数
        function padZero(str, length) {
            str = String(str);
            while (str.length < length) {
                str = '0' + str;
            }
            return str;
        }

        function generateScramble() {
            const moves = ["U", "F", "R", "L", "B", "D"];
            const suffixes = ["", "'", "2"];
            let scramble = "";
            let lastMove = -1;

            for (let i = 0; i < 25; i++) {
                let randomMove;
                do {
                    randomMove = Math.floor(Math.random() * 6);
                } while (randomMove === lastMove);

                lastMove = randomMove;
                scramble += moves[randomMove] + suffixes[Math.floor(Math.random() * 3)] + " ";
            }

            return scramble.trim();
        }

        let timerStatus = 0;
        let timeStart;
        let elapsedTime = 0;
        let timerInterval;

        function displayTime(ms) {
            let minutes = Math.floor(ms / (1000 * 60));
            let seconds = Math.floor((ms % (1000 * 60)) / 1000);
            let milliseconds = Math.floor(ms % 1000);
            return padZero(minutes, 2) + ":" + padZero(seconds, 2) + "." + padZero(milliseconds, 3);
        }

        function updateTimerDisplay() {
            elapsedTime = (new Date()).getTime() - timeStart;
            document.getElementById('timer').innerText = displayTime(elapsedTime);
        }

        // 等待DOM加载完成后执行初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化Scramble
            document.getElementById('scramble').innerText = "Scramble: " + generateScramble();

            // 绑定按钮事件
            document.getElementById('startBtn').addEventListener('click', function() {
                if (timerStatus === 0) {
                    timerStatus = 1;
                    timeStart = (new Date()).getTime() - elapsedTime;
                    timerInterval = setInterval(updateTimerDisplay, 10);
                } else if (timerStatus === 1) {
                    timerStatus = 0;
                    clearInterval(timerInterval);
                }
            });

            document.getElementById('resetBtn').addEventListener('click', function() {
                timerStatus = 0;
                clearInterval(timerInterval);

                elapsedTime = 0;
                document.getElementById('timer').innerText = displayTime(elapsedTime);

                document.getElementById('scramble').innerText = "Scramble: " + generateScramble();
            });
        });
    </script>
</body>
</html>

关键修复点说明 #

• DOM加载时机控制：将所有初始化和事件绑定代码放入DOMContentLoaded事件回调，确保DOM元素加载完成后再执行JS操作
• 兼容性函数替换：自定义padZero函数替代padStart，适配老旧环境
• 箭头函数替换：将所有箭头函数改为普通函数，避免兼容性问题
• 计时器显示修正：将初始计时器文本改为00:00.000，保持格式统一

内容的提问来源于stack exchange，提问作者옴걸 타임즈