详情
评论
问答

一个动态的HTML时钟样式【HTML时钟样式】

04815

效果：

图片[1]-欢迎各位,本站专注于收集分享各种最新资源、技术教程、绿色软件、还有来自全网的网站模板、网站源码分享以及各种去广告软件下载一个动态的HTML时钟样式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QFY侧栏时钟</title>
    <style>
        .dynamic-clock {
            background: linear-gradient(135deg, #6e8efb, #a777e3);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            margin: 20px auto;
            max-width: 500px;
            color: white;
            font-family: 'Microsoft YaHei', sans-serif;
            position: relative;
            overflow: hidden;
        }
        .dynamic-clock::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
            animation: rotate 20s linear infinite;
            z-index: 0;
        }
        @keyframes rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .clock-container { position: relative; z-index: 1; }
        .year-display {
            text-align: center;
            font-size: 1.3em;
            margin-bottom: 5px;
            font-weight: 600;
            display: flex;
            justify-content: center;
            gap: 15px;
        }
        .time-section { text-align: center; margin-bottom: 15px; }
        .time-display {
            font-size: 3.5em;
            font-weight: 300;
            letter-spacing: 2px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .time-display span { margin: 0 5px; }
        .colon {
            animation: pulse 1s infinite;
            position: relative;
            top: -5px;
        }
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        .date-section {
            display: flex;
            justify-content: space-between;
            margin: 15px 0;
            font-size: 1.1em;
            background: rgba(255, 255, 255, 0.15);
            padding: 12px;
            border-radius: 10px;
            backdrop-filter: blur(5px);
        }
        .date-item { text-align: center; flex: 1; }
        .date-label {
            font-size: 0.8em;
            opacity: 0.8;
            margin-bottom: 5px;
        }
        .date-value { font-weight: 600; }
        .greeting-section {
            text-align: center;
            margin: 20px 0 10px;
            padding-top: 15px;
            border-top: 1px solid rgba(255, 255, 255, 0.2);
        }
        .greeting-text {
            font-size: 1.5em;
            font-weight: 500;
            margin-bottom: 8px;
        }
        .greeting-tip {
            font-size: 0.95em;
            opacity: 0.9;
            line-height: 1.5;
            margin-bottom: 15px;
        }
        .next-festival {
            background: rgba(0, 0, 0, 0.1);
            padding: 10px;
            border-radius: 8px;
            font-size: 0.95em;
            margin-top: 10px;
        }
        .festival-message { font-weight: 600; }
        body.dark-theme  .dynamic-clock {
            background: linear-gradient(135deg, #434343, #000000);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
        }
    </style>
</head>
<body>
    <div class="dynamic-clock">
        <div class="clock-container">
            <div class="year-display">
                <span>2025年</span>
                <span>乙巳年</span>
                <span>蛇年</span>
            </div>
            
            <div class="time-section">
                <div class="time-display">
                    <span id="hours">13</span>
                    <span class="colon">:</span>
                    <span id="minutes">36</span>
                    <span class="colon">:</span>
                    <span id="seconds">00</span>
                </div>
            </div>
            
            <div class="date-section">
                <div class="date-item">
                    <div class="date-label">公历日期</div>
                    <div class="date-value" id="solar-date">9月26日</div>
                </div>
                <div class="date-item">
                    <div class="date-label">农历日期</div>
                    <div class="date-value" id="lunar-date">八月初五</div>
                </div>
                <div class="date-item">
                    <div class="date-label">星期</div>
                    <div class="date-value" id="weekday">星期五</div>
                </div>
            </div>
            
            <div class="greeting-section">
                <div class="greeting-text" id="greeting">下午好</div>
                <div class="greeting-tip" id="tip">金秋时节，愿您收获满满</div>
                <div class="next-festival" id="next-festival">
                    <div class="festival-message">距离国庆节还有5天</div>
                </div>
            </div>
        </div>
    </div>
 
    <script>
        // 2025年重要节日（国家授时中心数据）
        const festivals = [
            { name: "国庆节", date: new Date(2025, 9, 1), message: "🇨🇳 国庆快乐！盛世华诞，普天同庆" },
            { name: "中秋节", date: new Date(2025, 9, 6), message: "🎑 中秋快乐！月圆人团圆" },
            { name: "元旦", date: new Date(2026, 0, 1), message: "🎉 元旦快乐！新年新气象" },
            { name: "春节", date: new Date(2026, 1, 17), message: "🧧 春节快乐！乙巳年大吉" }
        ];
 
        function updateTime() {
            const now = new Date();
            const hours = now.getHours(); 
            
            // 更新时间显示 
            document.getElementById('hours').textContent  = hours.toString().padStart(2,'0'); 
            document.getElementById('minutes').textContent  = now.getMinutes().toString().padStart(2,'0'); 
            document.getElementById('seconds').textContent  = now.getSeconds().toString().padStart(2,'0'); 
            
            // 更新日期显示 
            document.getElementById('solar-date').textContent  = `${now.getMonth()+1} 月${now.getDate()} 日`;
            document.getElementById('weekday').textContent  = ['日','一','二','三','四','五','六'][now.getDay()];
            
            // 更新问候语 
            updateGreeting(hours);
            // 更新节日提醒 
            updateFestivalReminder(now);
        }
 
        function updateGreeting(hours) {
            let greeting, tip;
            if (hours < 5) {
                greeting = "深夜好";
                tip = "夜深人静，注意休息";
            } else if (hours < 8) {
                greeting = "清晨好";
                tip = "晨光熹微，一日之计在于晨";
            } else if (hours < 11) {
                greeting = "上午好";
                tip = "精力充沛，工作顺利";
            } else if (hours < 13) {
                greeting = "中午好";
                tip = "午间小憩，补充能量";
            } else if (hours < 18) {
                greeting = "下午好";
                tip = "金秋时节，愿您收获满满";
            } else if (hours < 22) {
                greeting = "晚上好";
                tip = "华灯初上，享受闲暇时光";
            } else {
                greeting = "夜深了";
                tip = "早睡早起，养生之道";
            }
            document.getElementById('greeting').textContent  = greeting;
            document.getElementById('tip').textContent  = tip;
        }
 
        function updateFestivalReminder(now) {
            const oneDay = 24 * 60 * 60 * 1000;
            let nextFestival = null;
            let minDays = Infinity;
            
            // 找出最近的未来节日 
            festivals.forEach(fest  => {
                const diffDays = Math.ceil((fest.date  - now) / oneDay);
                if (diffDays >= 0 && diffDays < minDays) {
                    minDays = diffDays;
                    nextFestival = fest;
                }
            });
            
            // 更新显示 
            const festivalEl = document.getElementById('next-festival'); 
            if (nextFestival) {
                if (minDays === 0) {
                    festivalEl.innerHTML  = `<div class="festival-message">${nextFestival.message}</div>`; 
                } else {
                    festivalEl.innerHTML  = `<div class="festival-message">距离${nextFestival.name} 还有${minDays}天</div>`;
                }
            } else {
                festivalEl.style.display  = 'none';
            }
        }
 
        // 初始化 
        document.addEventListener('DOMContentLoaded',  () => {
            updateTime();
            setInterval(updateTime, 1000);
            
            // 暗色模式适配 
            if (window.matchMedia('(prefers-color-scheme:  dark)').matches) {
                document.body.classList.add('dark-theme'); 
            }
        });
    </script>
</body>
</html>

效果：

图片[2]-欢迎各位,本站专注于收集分享各种最新资源、技术教程、绿色软件、还有来自全网的网站模板、网站源码分享以及各种去广告软件下载一个动态的HTML时钟样式
图片[3]-欢迎各位,本站专注于收集分享各种最新资源、技术教程、绿色软件、还有来自全网的网站模板、网站源码分享以及各种去广告软件下载一个动态的HTML时钟样式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QFY侧栏时钟</title>
<style>
.dynamic-clock {
background: white;
border-radius: 20px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
margin: 20px auto;
max-width: 500px;
color: #333;
font-family: 'Microsoft YaHei', sans-serif;
position: relative;
overflow: hidden;
}
.dynamic-clock::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 70%);
animation: rotate 20s linear infinite;
z-index: 0;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.clock-container { position: relative; z-index: 1; }
.year-display {
text-align: center;
font-size: 1.3em;
margin-bottom: 5px;
font-weight: 600;
display: flex;
justify-content: center;
gap: 15px;
}
.time-section { text-align: center; margin-bottom: 15px; }
.time-display {
font-size: 3.5em;
font-weight: 300;
letter-spacing: 2px;
display: flex;
justify-content: center;
align-items: center;
}
.time-display span { margin: 0 5px; }
.colon {
animation: pulse 1s infinite;
position: relative;
top: -5px;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.date-section {
display: flex;
justify-content: space-between;
margin: 15px 0;
font-size: 1.1em;
background: rgba(0, 0, 0, 0.03);
padding: 12px;
border-radius: 10px;
}
.date-item { text-align: center; flex: 1; }
.date-label {
font-size: 0.8em;
opacity: 0.8;
margin-bottom: 5px;
}
.date-value { font-weight: 600; }
.greeting-section {
text-align: center;
margin: 20px 0 10px;
padding-top: 15px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.greeting-text {
font-size: 1.5em;
font-weight: 500;
margin-bottom: 8px;
}
.greeting-tip {
font-size: 0.95em;
opacity: 0.9;
line-height: 1.5;
margin-bottom: 15px;
}
.next-festival {
padding: 10px;
border-radius: 8px;
font-size: 0.95em;
margin-top: 10px;
}
.festival-message { font-weight: 600; }
body.dark-theme  .dynamic-clock {
background: linear-gradient(135deg, #434343, #000000);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
color: white;
}
body.dark-theme  .date-section {
background: rgba(255, 255, 255, 0.15);
}
body.dark-theme  .greeting-section {
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
body.dark-theme  .next-festival {
background: rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="dynamic-clock">
<div class="clock-container">
<div class="year-display">
<span>2025年</span>
<span>乙巳年</span>
<span>蛇年</span>
</div>
 
<div class="time-section">
<div class="time-display">
<span id="hours">13</span>
<span class="colon">:</span>
<span id="minutes">36</span>
<span class="colon">:</span>
<span id="seconds">00</span>
</div>
</div>
 
<div class="date-section">
<div class="date-item">
<div class="date-label">公历日期</div>
<div class="date-value" id="solar-date">9月26日</div>
</div>
<div class="date-item">
<div class="date-label">农历日期</div>
<div class="date-value" id="lunar-date">八月初五</div>
</div>
<div class="date-item">
<div class="date-label">星期</div>
<div class="date-value" id="weekday">星期五</div>
</div>
</div>
 
<div class="greeting-section">
<div class="greeting-text" id="greeting">下午好</div>
<div class="greeting-tip" id="tip">金秋时节，愿您收获满满</div>
<div class="next-festival" id="next-festival">
<div class="festival-message">距离国庆节还有5天</div>
</div>
</div>
</div>
</div>
 
<script>
// 2025年重要节日（国家授时中心数据）
const festivals = [
{ name: "国庆节", date: new Date(2025, 9, 1), message: "🇨🇳 国庆快乐！盛世华诞，普天同庆" },
{ name: "中秋节", date: new Date(2025, 9, 6), message: "🎑 中秋快乐！月圆人团圆" },
{ name: "元旦", date: new Date(2026, 0, 1), message: "🎉 元旦快乐！新年新气象" },
{ name: "春节", date: new Date(2026, 1, 17), message: "🧧 春节快乐！乙巳年大吉" }
];
 
function updateTime() {
const now = new Date();
const hours = now.getHours(); 
 
// 更新时间显示
document.getElementById('hours').textContent  = hours.toString().padStart(2,'0'); 
document.getElementById('minutes').textContent  = now.getMinutes().toString().padStart(2,'0'); 
document.getElementById('seconds').textContent  = now.getSeconds().toString().padStart(2,'0'); 
 
// 更新日期显示
document.getElementById('solar-date').textContent  = `${now.getMonth()+1}  月${now.getDate()}  日`;
document.getElementById('weekday').textContent  = ['日','一','二','三','四','五','六'][now.getDay()];
 
// 更新问候语
updateGreeting(hours);
// 更新节日提醒
updateFestivalReminder(now);
}
 
function updateGreeting(hours) {
let greeting, tip;
if (hours < 5) {
greeting = "深夜好";
tip = "夜深人静，注意休息";
} else if (hours < 8) {
greeting = "清晨好";
tip = "晨光熹微，一日之计在于晨";
} else if (hours < 11) {
greeting = "上午好";
tip = "精力充沛，工作顺利";
} else if (hours < 13) {
greeting = "中午好";
tip = "午间小憩，补充能量";
} else if (hours < 18) {
greeting = "下午好";
tip = "金秋时节，愿您收获满满";
} else if (hours < 22) {
greeting = "晚上好";
tip = "华灯初上，享受闲暇时光";
} else {
greeting = "夜深了";
tip = "早睡早起，养生之道";
}
document.getElementById('greeting').textContent  = greeting;
document.getElementById('tip').textContent  = tip;
}
 
function updateFestivalReminder(now) {
const oneDay = 24 * 60 * 60 * 1000;
let nextFestival = null;
let minDays = Infinity;
 
// 找出最近的未来节日 
festivals.forEach(fest  => {
const diffDays = Math.ceil((fest.date  - now) / oneDay);
if (diffDays >= 0 && diffDays < minDays) {
minDays = diffDays;
nextFestival = fest;
}
});
 
// 更新显示 
const festivalEl = document.getElementById('next-festival'); 
if (nextFestival) {
if (minDays === 0) {
festivalEl.innerHTML  = `<div class="festival-message">${nextFestival.message}</div>`; 
} else {
festivalEl.innerHTML  = `<div class="festival-message">距离${nextFestival.name}  还有${minDays}天</div>`;
}
} else {
festivalEl.style.display  = 'none';
}
}
 
// 初始化
document.addEventListener('DOMContentLoaded',  () => {
updateTime();
setInterval(updateTime, 1000);
 
// 暗色模式适配
if (window.matchMedia('(prefers-color-scheme:  dark)').matches) {
document.body.classList.add('dark-theme'); 
}
});
</script>
</body>
</html>
温馨提示： 本文最后更新于2025-09-27 06:36:10，某些文章具有时效性，若有错误或已失效，请在下方 留言或联系 小哥互联 。
© 版权声明
版权声明 1 本网站名称：小哥互联
2 本站永久网址：https://www.899778.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ147736299进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
THE END
网站代码
# HTML# 动态# 时钟样式
喜欢就支持一下吧
点赞15 分享
小哥互联的头像-欢迎各位,本站专注于收集分享各种最新资源、技术教程、绿色软件、还有来自全网的网站模板、网站源码分享以及各种去广告软件下载小哥互联钻石会员
子比主题美化-文章列表移入上浮蓝色边框扫动效果【浮蓝色边框扫动效果】-欢迎各位,本站专注于收集分享各种最新资源、技术教程、绿色软件、还有来自全网的网站模板、网站源码分享以及各种去广告软件下载小哥互联
子比主题美化-文章列表移入上浮蓝色边框扫动效果【浮蓝色边框扫动效果】
子比主题美化-文章列表移入上浮蓝色边框扫动效果【浮蓝色边框扫动效...
43天前 132
Windows系统自带软件深度卸载指南【深度卸载】-欢迎各位,本站专注于收集分享各种最新资源、技术教程、绿色软件、还有来自全网的网站模板、网站源码分享以及各种去广告软件下载小哥互联
Windows系统自带软件深度卸载指南【深度卸载】
Windows系统自带软件深度卸载指南【深度卸载】
3个月前 126
如何通过控制面板卸载软件【电脑知识】-欢迎各位,本站专注于收集分享各种最新资源、技术教程、绿色软件、还有来自全网的网站模板、网站源码分享以及各种去广告软件下载小哥互联
如何通过控制面板卸载软件【电脑知识】
如何通过控制面板卸载软件【电脑知识】
3个月前 126
手机锁屏密码忘记了怎么解锁【手机解锁】-欢迎各位,本站专注于收集分享各种最新资源、技术教程、绿色软件、还有来自全网的网站模板、网站源码分享以及各种去广告软件下载小哥互联
手机锁屏密码忘记了怎么解锁【手机解锁】
手机锁屏密码忘记了怎么解锁【手机解锁】
3个月前 122
360有钱联盟 推广软件赚佣金【软件赚佣金】-欢迎各位,本站专注于收集分享各种最新资源、技术教程、绿色软件、还有来自全网的网站模板、网站源码分享以及各种去广告软件下载小哥互联
360有钱联盟 推广软件赚佣金【软件赚佣金】
360有钱联盟 推广软件赚佣金【软件赚佣金】
3个月前 111
2025最新去水印小程序，免服务器，带流量主和安装教程！【去水印小程序】-欢迎各位,本站专注于收集分享各种最新资源、技术教程、绿色软件、还有来自全网的网站模板、网站源码分享以及各种去广告软件下载小哥互联
2025最新去水印小程序，免服务器，带流量主和安装教程！【去水印小程序】
2025最新去水印小程序，免服务器，带流量主和安装教程！【去水印小程...
3个月前 105
相关推荐
子比主题美化-文章列表移入上浮蓝色边框扫动效果【浮蓝色边框扫动效果】-欢迎各位,本站专注于收集分享各种最新资源、技术教程、绿色软件、还有来自全网的网站模板、网站源码分享以及各种去广告软件下载小哥互联
子比主题美化-文章列表移入上浮蓝色边框扫动效果【浮蓝色边框扫动效果】
子比主题美化-文章列表移入上浮蓝色边框扫动效果【浮蓝色边框扫动效果】
43天前 132
子比主题美化 – 文章详情页Tab切换栏目【情页Tab切换栏目】-欢迎各位,本站专注于收集分享各种最新资源、技术教程、绿色软件、还有来自全网的网站模板、网站源码分享以及各种去广告软件下载小哥互联
子比主题美化 – 文章详情页Tab切换栏目【情页Tab切换栏目】
子比主题美化 – 文章详情页Tab切换栏目【情页Tab切换栏目】
54天前 94
子比主题增加私密评论【私密评论】-欢迎各位,本站专注于收集分享各种最新资源、技术教程、绿色软件、还有来自全网的网站模板、网站源码分享以及各种去广告软件下载小哥互联
子比主题增加私密评论【私密评论】
子比主题增加私密评论【私密评论】
34天前 88
给网站添加每次首次访问欢迎语音 网站添加欢迎语教程【欢迎语教程】-欢迎各位,本站专注于收集分享各种最新资源、技术教程、绿色软件、还有来自全网的网站模板、网站源码分享以及各种去广告软件下载小哥互联
给网站添加每次首次访问欢迎语音 网站添加欢迎语教程【欢迎语教程】
给网站添加每次首次访问欢迎语音 网站添加欢迎语教程【欢迎语教程】
1个月前 81
子比主题侧边栏seo组件【边栏seo组件】-欢迎各位,本站专注于收集分享各种最新资源、技术教程、绿色软件、还有来自全网的网站模板、网站源码分享以及各种去广告软件下载小哥互联
子比主题侧边栏seo组件【边栏seo组件】
子比主题侧边栏seo组件【边栏seo组件】
13天前 75
 子比主题文字广告小工具【广告小工具】-欢迎各位,本站专注于收集分享各种最新资源、技术教程、绿色软件、还有来自全网的网站模板、网站源码分享以及各种去广告软件下载小哥互联
 子比主题文字广告小工具【广告小工具】
 子比主题文字广告小工具【广告小工具】
12天前 55
评论 抢沙发

请登录后发表评论

    暂无评论内容

默认头像
   
子比主题美化-文章列表移入上浮蓝色边框扫动效果-欢迎各位,本站专注于收集分享各种最新资源、技术教程、绿色软件、还有来自全网的网站模板、网站源码分享以及各种去广告软件下载小哥互联
132人已阅读
子比主题美化-文章列表移入上浮蓝色边框扫动效果【浮蓝色边框扫动效...
TOP1
Windows系统自带软件深度卸载指南-欢迎各位,本站专注于收集分享各种最新资源、技术教程、绿色软件、还有来自全网的网站模板、网站源码分享以及各种去广告软件下载小哥互联
Windows系统自带软件深度卸载指南【深度卸载】
3个月前126人已阅读
TOP2
如何通过控制面板卸载软件-欢迎各位,本站专注于收集分享各种最新资源、技术教程、绿色软件、还有来自全网的网站模板、网站源码分享以及各种去广告软件下载小哥互联
如何通过控制面板卸载软件【电脑知识】
3个月前126人已阅读
TOP3
手机锁屏密码忘记了怎么解锁-欢迎各位,本站专注于收集分享各种最新资源、技术教程、绿色软件、还有来自全网的网站模板、网站源码分享以及各种去广告软件下载小哥互联
手机锁屏密码忘记了怎么解锁【手机解锁】
3个月前122人已阅读
TOP4
360有钱联盟 推广软件赚佣金-欢迎各位,本站专注于收集分享各种最新资源、技术教程、绿色软件、还有来自全网的网站模板、网站源码分享以及各种去广告软件下载小哥互联
360有钱联盟 推广软件赚佣金【软件赚佣金】
3个月前111人已阅读
TOP5
2025最新去水印小程序，免服务器，带流量主和安装教程！-欢迎各位,本站专注于收集分享各种最新资源、技术教程、绿色软件、还有来自全网的网站模板、网站源码分享以及各种去广告软件下载小哥互联
2025最新去水印小程序，免服务器，带流量主和安装教程！【去水印小程序】
3个月前105人已阅读
TOP6
搜索
开启精彩搜索
标签云
硬件配置 (1)deepseek (1)本地部署 (1)版本激活 (1)几个区比较好 (1)硬盘 (1)分区 (1)帖子标签 (1)论坛系统 (1)解析模板 (1)汽水音乐 (1)下拉菜单 (1)插件 (1)时钟样式 (1)动态 (1)网页代码 (1)HTML (2)美化网页 (1)java代码 (1)网页特效 (1)拦截 (1)

暂无成员