如何使用JavaScript发起Http Get请求实现站点板块定时自动切换

实现思路 #

• 按顺序维护所有需要切换的板块ID列表，可根据你的实际需求增减
• 封装原生GET请求方法用于板块可用性校验，校验通过后再执行跳转
• 用定时器实现固定间隔自动轮询切换，超出列表长度后自动回到第一个板块循环

完整代码 #

<!-- 原有导航部分 -->
<div style="margin-left:25%; width: 10%; text-align: center;">   <!--min-width: min-content;-->
    <a href="#AnaSayfa" onclick="myfunction();"  style="text-decoration: none; color: black;">
        <div style="width: 100%; height: 100%; text-align: center; ">
            <div style="transform: translatey(50%); margin-top: 0px; width: auto;height: max-content; font-size: 24px; white-space: nowrap; font-family: Tahoma; color:white;">Ana Sayfa</div>
        </div>
    </a>
</div>

<!-- 原有板块部分 -->
<section style="width: 100%; height: 100%; background-color: chartreuse;" id="Anasayfa"> </section>
<section style="width: 100%; height: 100%; background-color: chartreuse;" id="Anasayfa-2"> </section>
<section style="width: 100%; height: 100%; background-color: chartreuse;" id="Anasayfa-3"> </section>

<script>
// 配置项：可根据你的需求修改
const sectionList = ['Anasayfa', 'Anasayfa-2', 'Anasayfa-3']; // 板块ID列表
const switchInterval = 3000; // 切换间隔，单位毫秒，3000即3秒
const checkApiPrefix = '/api/check-section?sectionId='; // 你的板块校验接口前缀，可自行替换

let currentIndex = 0;

// 封装GET请求校验方法
async function checkSectionAvailable(sectionId) {
    try {
        const response = await fetch(`${checkApiPrefix}${sectionId}`);
        return response.ok; // 接口返回2xx状态码即代表校验通过
    } catch (err) {
        console.error(`板块${sectionId}校验失败:`, err);
        return false;
    }
}

// 切换板块逻辑
async function switchSection() {
    // 下一个板块索引，超出长度回到0循环
    currentIndex = (currentIndex + 1) % sectionList.length;
    const targetSection = sectionList[currentIndex];
    
    // 校验通过再跳转
    const isAvailable = await checkSectionAvailable(targetSection);
    if (isAvailable) {
        window.location.hash = `#${targetSection}`;
    } else {
        // 校验失败直接切换下一个
        switchSection();
    }
}

// 页面加载完成后启动定时切换
window.addEventListener('load', () => {
    // 初始默认跳转第一个板块
    window.location.hash = `#${sectionList[0]}`;
    // 启动定时器
    setInterval(switchSection, switchInterval);
});
</script>

调整说明 #

• 如果你不需要校验逻辑，只想单纯定时切换，可以删除checkSectionAvailable相关的校验代码，直接在switchSection里修改hash即可
• 锚点跳转的滚动效果可以通过CSS的scroll-behavior: smooth属性设置平滑滚动，在html标签上添加该样式即可
• 如果你的校验规则不是调用接口，而是检查页面内板块元素是否存在，可以把checkSectionAvailable方法修改为直接判断document.getElementById(sectionId)是否存在即可

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