脚本实现倒计时

zzqincsdn

已于 2024-06-12 16:34:24 修改

阅读量1.2k

点赞数 43

文章标签： javascript 开发语言 ecmascript

于 2024-06-12 14:02:38 首次发布

本文链接：https://blog.csdn.net/zzqincsdn/article/details/139624968

版权

用 shell 实现倒计时效果

效果图：
在这里插入图片描述

#!/bin/bash

# 目标日期
target_date="2024-09-01 00:00:00"

# 将目标日期转换为时间戳
target_timestamp=$(date -j -f "%Y-%m-%d %H:%M:%S" "$target_date" "+%s")

# 当前时间戳
current_timestamp=$(date +%s)

# 如果目标日期已过去，则显示相应消息并退出脚本
if [ "$target_timestamp" -lt "$current_timestamp" ]; then
    echo "目标日期已经过去了！"
    exit 1
fi

while true; do
    # 当前时间戳
    current_timestamp=$(date +%s)

    # 计算时间差
    time_diff=$((target_timestamp - current_timestamp))

    # 计算剩余的天、时、分、秒
    days=$((time_diff / 86400))
    hours=$(( (time_diff / 3600) % 24 ))
    minutes=$(( (time_diff / 60) % 60 ))
    seconds=$((time_diff % 60))

    # 清屏
    clear

    # 显示倒计时
    printf "距离 9.1 号还有: "

    # 彩色输出
    printf "\033[1;36m%02d天\033[0m " "$days"
    printf "\033[1;35m%02d时\033[0m " "$hours"
    printf "\033[1;34m%02d分\033[0m " "$minutes"
    printf "\033[1;33m%02d秒\033[0m\n" "$seconds"

    # 等待一秒
    sleep 1
done

用 html 实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时页面</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <style>
        .countdown-item {
            margin: 0 5px;
            padding: 5px;
            background-color: #f0f0f0;
            border-radius: 5px;
            display: inline-block;
        }

        .countdown-value {
            font-size: 2rem;
            font-weight: bold;
            margin-right: 5px;
        }

        .countdown-label {
            font-size: 1.2rem;
            color: #555;
        }
    </style>
</head>
<body class="bg-gray-100 h-screen flex justify-center items-center">
<div class="text-center">
    <h1 class="text-4xl font-bold mb-4">距离 9.1 号还有</h1>
    <div id="countdown" class="flex justify-center"></div>
</div>

<script>
    // 计算并更新倒计时
    function updateCountdown() {
        // 目标日期
        const targetDate = new Date('2024-09-01T00:00:00');
        // 当前日期
        const currentDate = new Date();

        // 计算时间差（以毫秒为单位）
        let timeDiff = targetDate - currentDate;

        // 计算剩余的天、时、分、秒
        const days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
        timeDiff -= days * (1000 * 60 * 60 * 24);
        const hours = Math.floor(timeDiff / (1000 * 60 * 60));
        timeDiff -= hours * (1000 * 60 * 60);
        const minutes = Math.floor(timeDiff / (1000 * 60));
        timeDiff -= minutes * (1000 * 60);
        const seconds = Math.floor(timeDiff / 1000);

        // 更新页面上的倒计时
        document.getElementById('countdown').innerHTML = `
                <div class="countdown-item">
                    <span class="countdown-value">${days}</span>
                    <span class="countdown-label">天</span>
                </div>
                <div class="countdown-item">
                    <span class="countdown-value">${hours}</span>
                    <span class="countdown-label">时</span>
                </div>
                <div class="countdown-item">
                    <span class="countdown-value">${minutes}</span>
                    <span class="countdown-label">分</span>
                </div>
                <div class="countdown-item">
                    <span class="countdown-value">${seconds}</span>
                    <span class="countdown-label">秒</span>
                </div>
            `;

        // 每秒更新一次
        setTimeout(updateCountdown, 1000);
    }

    // 页面加载时开始倒计时
    updateCountdown();
</script>
</body>
</html>