如何改为引用 Json 文件

问题描述 投票:0回答:0

这是我的 html 脚本,它使用 JavaScript 和日程表格式来设置一天中某个时间段的计时器,有人可以帮助我将日程表链接到 Json 文件,以便更轻松地进行交换。

我该如何编写这段代码,以便当它需要时间表时,它会引用一个名为“Schedule.txt”的 txt 文件:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Class Timer</title>
<style>
    body {
        font-family: Arial, sans-serif;
        text-align: center;
    }
</style>
</head>
<body>
<h1>Class Timer</h1>
<p id="class-info"></p>
<p id="countdown"></p>

<script>
    // Schedule data, can be easily updated!
    const schedule = {
        "Monday": [
            { "class": "1/5", "start": "08:30", "end": "09:54" },
            { "class": "2/6", "start": "10:00", "end": "11:24" },
            { "class": "Advisory", "start": "11:30", "end": "12:00" },
            { "class": "Lunch A", "start": "12:00", "end": "12:30" },
            { "class": "3A/7A", "start": "12:36", "end": "14:00" },
            { "class": "3B/7B", "start": "12:06", "end": "13:30" },
            { "class": "Lunch B", "start": "13:30", "end": "14:00" },
            { "class": "4/8", "start": "14:06", "end": "15:30" }
        ],
        "Tuesday": [
            { "class": "1/5", "start": "08:30", "end": "10:03" },
            { "class": "2/6", "start": "10:09", "end": "11:42" },
            { "class": "Lunch A", "start": "11:42", "end": "12:12" },
            { "class": "3A/7A", "start": "12:18", "end": "13:51" },
            { "class": "3B/7B", "start": "11:48", "end": "13:21" },
            { "class": "Lunch B", "start": "13:21", "end": "13:51" },
            { "class": "4/8", "start": "13:57", "end": "15:30" }
        ],
        "Wednesday": [
            { "class": "1/5", "start": "09:00", "end": "10:26" },
            { "class": "2/6", "start": "10:31", "end": "11:58" },
            { "class": "Lunch A", "start": "11:58", "end": "12:28" },
            { "class": "3A/7A", "start": "12:34", "end": "13:59" },
            { "class": "3B/7B", "start": "12:04", "end": "13:29" },
            { "class": "Lunch B", "start": "13:29", "end": "13:59" },
            { "class": "4/8", "start": "14:05", "end": "15:30" }
        ],
        "Thursday": [
            { "class": "1/5", "start": "08:30", "end": "09:49" },
            { "class": "2/6", "start": "09:55", "end": "11:19" },
            { "class": "Advisory", "start": "11:25", "end": "12:10" },
            { "class": "Lunch A", "start": "12:10", "end": "12:40" },
            { "class": "3A/7A", "start": "12:46", "end": "14:06" },
            { "class": "3B/7B", "start": "12:16", "end": "13:36" },
            { "class": "Lunch B", "start": "13:36", "end": "14:06" },
            { "class": "4/8", "start": "14:12", "end": "15:30" }
        ],
        "Friday": [
            { "class": "1/5", "start": "08:30", "end": "09:49" },
            { "class": "2/6", "start": "09:55", "end": "11:19" },
            { "class": "Advisory", "start": "11:25", "end": "12:10" },
            { "class": "Lunch A", "start": "12:10", "end": "12:40" },
            { "class": "3A/7A", "start": "12:46", "end": "14:06" },
            { "class": "3B/7B", "start": "12:16", "end": "13:36" },
            { "class": "Lunch B", "start": "13:36", "end": "14:06" },
            { "class": "4/8", "start": "14:12", "end": "15:30" }
        ]
    };

    // The thing to calculate the time until the next class
    function calculateNextClass() {
        const now = new Date();
        const dayOfWeek = now.toLocaleString('en-US', { weekday: 'long' });
        const currentTime = now.getHours() * 60 + now.getMinutes();

        const classesToday = schedule[dayOfWeek];
        for (let i = 0; i < classesToday.length; i++) {
            const classStart = convertToMinutes(classesToday[i].start);
            if (classStart > currentTime) {
                const timeUntilNextClass = classStart - currentTime;
                return { class: classesToday[i].class, time: timeUntilNextClass };
            }
        }
        return { class: "No classes left for today", time: 0 };
    }

    // Function to convert time in Hours and minutes format to minutes since midnight
    function convertToMinutes(timeString) {
        const [hours, minutes] = timeString.split(":").map(Number);
        return hours * 60 + minutes;
    }

    // Function to update the timer display
    function updateTimer() {
        const nextClass = calculateNextClass();
        const hours = Math.floor(nextClass.time / 60);
        const minutes = nextClass.time % 60;
        const seconds = 60 - new Date().getSeconds(); 

        document.getElementById("class-info").textContent = `Next Class: ${nextClass.class}`;
        document.getElementById("countdown").textContent = `Time until next class: ${hours}h ${minutes}m ${seconds}s`;
    }

    // Timer Display
    setInterval(updateTimer, 1000);
</script>
</body>
</html>

我尝试使用 Chat-gpt 来帮助解决问题,但每次我尝试它所说的内容时,它都会破坏代码。

javascript html json file
© www.soinside.com 2019 - 2024. All rights reserved.