圆形点击变色、计时器启停及无刷新交互功能实现求助

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <style>
        .VRcircle {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: #eee;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 20px 0;
        }
        .circle {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-color: #ccc;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin: 0 10px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .circle1.active {
            background-color: #2196F3;
        }
        .circle2.active {
            background-color: #FF9800;
        }
        .circle3.active {
            background-color: #f44336;
        }
        .text {
            text-align: center;
            color: white;
        }
        .text a {
            color: white;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="VRcircle">
        <div class="text">
            <h1 id="VR">VR</h1>
        </div>
    </div>
    <div class="circle circle1" onclick="handleCircleClick(this)">
        <div class="text">
            <a href="#">
                <p>Scene</p>
                <span>I</span>
            </a>
        </div>
    </div>
    <div class="circle circle2" onclick="handleCircleClick(this)">
        <div class="text">
            <a href="#">
                <p>Scene</p>
                <span>II</span>
            </a>
        </div>
    </div>
    <div class="circle circle3" onclick="handleCircleClick(this)">
        <div class="text">
            <a href="#">
                <p>Scene</p>
                <span>III</span>
            </a>
        </div>
    </div>

    <script>
        let timerInterval = null;
        let currentCount = 10;
        let activeCircle = null;

        function handleCircleClick(element) {
            const isActive = element.classList.contains('active');
            
            document.querySelectorAll('.circle').forEach(circle => {
                circle.classList.remove('active');
            });

            if (isActive) {
                stopTimer();
            } else {
                element.classList.add('active');
                activeCircle = element;
                resetAndStartTimer();
            }
        }

        function resetAndStartTimer() {
            stopTimer();
            currentCount = 10;
            document.getElementById("VR").textContent = currentCount;
            timerInterval = setInterval(() => {
                currentCount -= 1;
                document.getElementById("VR").textContent = currentCount;
                if (currentCount <= 0) {
                    stopTimer();
                    if (activeCircle) {
                        activeCircle.classList.remove('active');
                        activeCircle = null;
                    }
                }
            }, 1000);
        }

        function stopTimer() {
            if (timerInterval) {
                clearInterval(timerInterval);
                timerInterval = null;
            }
            document.getElementById("VR").textContent = "0";
            if (activeCircle) {
                activeCircle.classList.remove('active');
                activeCircle = null;
            }
        }
    </script>
</body>
</html>

问题解决细节 #

1. 点击圆形切换颜色

• 给每个.circle元素定义专属的.active类样式，通过背景色区分不同圆形的激活状态。
• 点击时先移除所有圆形的激活类，再给当前点击的元素添加激活类，确保同一时间只有一个圆形处于高亮状态。
• 加入CSS过渡效果，让颜色切换更流畅。

2. 点击同一元素启停计时器

• 统一用handleCircleClick函数处理所有圆形的点击事件，通过判断元素是否处于激活状态来执行不同逻辑：
  • 已激活（计时器运行中）：停止计时器并取消激活状态。
  • 未激活：激活当前元素，重置计数并启动计时器。
• 计时器自然结束时，自动停止并取消激活状态。

3. 无需刷新页面点击不同元素

• 点击新圆形时，先停止当前运行的计时器，清除之前的激活状态，再激活新元素并启动新计时器。
• 所有状态（计时器实例、激活元素、剩余计数）都通过JS变量在内存中管理，完全无需刷新页面即可切换。

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