改进版本事件记录器

最新推荐文章于 2024-09-14 18:04:00 发布
//爷傲灬奈我何
最新推荐文章于 2024-09-14 18:04:00 发布
阅读量242
点赞数 4
文章标签： js html
本文链接：https://blog.csdn.net/qq_56168825/article/details/140736459
版权
增加了考研倒计时的功能。以及显示当前时间的功能。
代码如下
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时间计算页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f8f9fa;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        input[type="text"] {
            padding: 10px;
            border: 1px solid #ced4da;
            border-radius: 5px;
            font-size: 16px;
        }

        button {
            padding: 10px 20px;
            border-radius: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            cursor: pointer;
            font-size: 16px;
        }

        button:hover {
            background-color: #0056b3;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        table th,
        table td {
            border: 1px solid #dee2e6;
            padding: 10px;
            text-align: left;
        }

        p#totalDuration {
            font-size: 18px;
            font-weight: bold;
            margin-top: 20px;
            color: yellow;  /* 黄色字体 */
            text-align: center;
            font-family: '华文行楷';
            -webkit-text-stroke: 1px orange;  /* 橙色描边，适用于webkit内核浏览器 */
            text-stroke: 1px orange;  /* 橙色描边，通用 */
        }
        /*考研倒计时标题*/
        #countdown {
            font-size: 25px;
            font-weight: bold;
            margin-top: 20px;
            color: #4CAF50;
            text-align: center;
            font-family: '宋体';
        }
    </style>
</head>

<body>
<h1 id="currentTime"></h1>
<p id="countdown"></p>
<table border="1">
    <tr>
        <td>开始时间</td>
        <td>结束时间</td>
        <td>科目</td>
        <td>操作</td>
        <td>持续时间</td>
    </tr>
    <tr>
        <td><input type="text" id="startTime1" pattern="\d{2}\.\d{2}"></td>
        <td><input type="text" id="endTime1" pattern="\d{2}\.\d{2}"></td>
        <td><input type="text" id="subject1"></td>
        <td><button onclick="calculateDuration(1)">计算</button></td>
        <td><input type="text" id="duration1" readonly></td>
    </tr>
</table>
<p id="totalDuration">总持续时间：0 小时 0 分钟</p>

<script>

    // 新增计算考研倒计时的函数
    function calculateCountdown() {
        const targetDate = new Date(2024, 11, 21); // 注意：月份是从 0 开始计数，11 代表 12 月
        const now = new Date();
        const timeDifference = targetDate - now;

        const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
        const hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);

        const countdownText = ` 距离2025考研还有${days} 天 ${hours} 小时 ${minutes} 分钟 ${seconds} 秒`;
        document.getElementById('countdown').innerHTML = countdownText;
    }

    // 每隔 1 秒更新倒计时
    setInterval(calculateCountdown, 1000);

    function updateCurrentTime() {
        const now = new Date();
        const daysOfWeek = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
        const months = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
        const dayOfWeek = daysOfWeek[now.getDay()];
        const month = months[now.getMonth()];
        const day = now.getDate();
        const year = now.getFullYear();
        const hours = now.getHours().toString().padStart(2, '0');  // 确保小时数为两位，不足补 0
        const minutes = now.getMinutes().toString().padStart(2, '0');  // 确保分钟数为两位，不足补 0
        const seconds = now.getSeconds().toString().padStart(2, '0');  // 确保秒数为两位，不足补 0
        const formattedTime = `${year}年${month}${day}日${hours}:${minutes}:${seconds}  ${dayOfWeek}`;
        document.getElementById('currentTime').innerHTML = formattedTime;
        document.getElementById('currentTime').style.textAlign = "center";
        document.getElementById('currentTime').style.fontFamily = "楷体";
        document.getElementById('currentTime').style.color = "#4CAF50";
    }
    setInterval(updateCurrentTime, 1000);

    function calculateDuration(rowNumber) {
        let startTime = document.getElementById(`startTime${rowNumber}`).value;
        let endTime = document.getElementById(`endTime${rowNumber}`).value;

        // 处理输入格式，若不足两位数字则补 0
        if (startTime.split('.')[0].length === 1) {
            startTime = '0' + startTime;
        }
        if (endTime.split('.')[0].length === 1) {
            endTime = '0' + endTime;
        }

        // 验证输入格式
        if (!/^\d{2}\.\d{2}$/.test(startTime) ||!/^\d{2}\.\d{2}$/.test(endTime)) {
            alert('输入格式应为两位数字.两位数字，请重新输入！');
            return;
        }

        let startTokens = startTime.split('.');
        let endTokens = endTime.split('.');

        let startHours = parseInt(startTokens[0]);
        let startMinutes = parseInt(startTokens[1]);

        let endHours = parseInt(endTokens[0]);
        let endMinutes = parseInt(endTokens[1]);

        // 处理跨凌晨的情况
        if (startHours > endHours || (startHours === endHours && startMinutes > endMinutes)) {
            endHours += 24;
        }

        let startTotalMinutes = startHours * 60 + startMinutes;
        let endTotalMinutes = endHours * 60 + endMinutes;

        let durationMinutes = endTotalMinutes - startTotalMinutes;

        let durationHours = Math.floor(durationMinutes / 60);
        let remainingMinutes = durationMinutes % 60;

        document.getElementById(`duration${rowNumber}`).value = `${durationHours}.${remainingMinutes}`;

        let totalMinutes = 0;
        for (let i = 1; i <= rowNumber; i++) {
            let duration = document.getElementById(`duration${i}`).value.split('.');
            totalMinutes += parseInt(duration[0]) * 60 + parseInt(duration[1]);
        }

        let totalHours = Math.floor(totalMinutes / 60);
        let totalRemainingMinutes = totalMinutes % 60;

        document.getElementById('totalDuration').innerHTML = `总持续时间：${totalHours} 小时 ${totalRemainingMinutes} 分钟`;

        // 检查是否存在空行，如果不存在才添加新行
        let hasEmptyRow = false;
        for (let i = rowNumber + 1; i < document.querySelectorAll('tr').length; i++) {
            let startInput = document.getElementById(`startTime${i}`);
            let endInput = document.getElementById(`endTime${i}`);
            if (!startInput.value &&!endInput.value) {
                hasEmptyRow = true;
                break;
            }
        }

        if (!hasEmptyRow) {
            let newRow = document.createElement('tr');
            newRow.innerHTML = `
                <td><input type="text" id="startTime${rowNumber + 1}" pattern="\d{2}\.\d{2}"></td>
                <td><input type="text" id="endTime${rowNumber + 1}" pattern="\d{2}\.\d{2}"></td>
                <td><input type="text" id="subject${rowNumber + 1}"></td>
                <td><button onclick="calculateDuration(${rowNumber + 1})">计算</button></td>
                <td><input type="text" id="duration${rowNumber + 1}" readonly></td>
            `;
            document.querySelector('table').appendChild(newRow);
        }
    }
</script>
</body>

</html>