网页版时间，可全屏显示

博客园 - jack_Meng

.NET 异常处理的"暗门"：代码里被 catch 吃掉的异常，你依然能抓住它——FirstChanceException Visual Studio 插件 Gittoy ，我做了一个 vs 版的 gittoolbox 用 C 语言实现任务栏图标动画，支持使用表情包gif/webp 如何用0预算推广项目开源的 Windows 桌面整理工具被罚了500后，整个人都变老实了提取网页表格，一键导出 CSV：一个 Bookmarklet 脚本就够了从零搭建一个最小 AI Agent:Python 完整示例 + AI调用机制详解 CASIO卡西欧计算器的自检模式——2种自检方式 C#把字符串按每两个字符一组，组之间加空格 C#程序从指定路径或网络加载引用的DLL 设置程序PrivatePath，配置引用程序集的指定路径（分离exe和dll） .NET/WPF 程序密钥加密存储：使用 DPAPI 实现安全兼容一线大厂的Git规范一线大厂的数据库规范 Python自动化实战：常用的类库和使用场景工控生态之展示与交互：怎么让工业软件不再"丑" 一个 Python 项目带你入门AI应用开发课程介绍----系列文章开源好用的酷狗音乐播放器：VibeMusic PowerShell + C# 实现桌面文字提醒，类似于“激活Windows”的功能【Python】2026动态文字壁纸，一键让你的桌面加上动态效果 Python 用 tkinter 实现在 Windows 上提示文本消息的实现（模拟安卓手机上的 Toast 效果）用Python在Windows桌面弹出文字提示在Windows桌面背景上添加自定义文字常用AI提示词汇总 chrome浏览器，Google新标签页添加快捷图标油候脚本中，使用GM_info对象，打印脚本信息使用油候脚本，移除页面无法选择文字高中免费电子教辅资料合集 Windows防火墙关闭445端口：Windows在防火墙禁用echo-reply（type 0）、time-exceeded（type 11）、destination-unreachable（type 3）类型的ICMP包

网页版时间，可全屏显示

jack_Meng · 2026-06-01 · via 博客园 - jack_Meng

在网上看到有人做的一个考试时间显示的，我也参考豆包整理一个

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高亮醒目时钟</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: sans-serif;
            background: #000;
            color: #fff;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        /* 日期 */
        .date {
            font-size: 3.5vw;
            margin-bottom: 24px;
            opacity: 0.8;
            color: #cccccc; /* 日期柔和灰 */
        }
        /* 时间：超大、超粗、高亮、不晃动 */
        .time {
            font-size: 18vw;
            font-weight: 600; /* 最粗 */
            font-family: "SF Mono", "Roboto Mono", monospace;  /* 等宽字体 */
            white-space: nowrap;
            
            /* ========== 醒目颜色设置 ========== */
            color: #ffffff;           /* 纯白（最清晰）*/
            /* 可选颜色：
            color: #00ccff;         科技蓝
            color: #ff3c3c;         醒目红
            color: #39ff14;         荧光绿
            color: #ffd000;         明亮黄
            */
            
            /* 发光效果（超级醒目！） */
            text-shadow: 0 0 20px rgba(255, 255, 255, 0.8),
                         0 0 40px rgba(255, 255, 255, 0.4);
        }
    </style>
</head>
<body>
    <div class="date" id="date"></div>
    <div class="time" id="time"></div>

    <script>
        function pad(n) {
            return n < 10 ? '0' + n : n;
        }
        function update() {
            const now = new Date();
            const h = pad(now.getHours());
            const m = pad(now.getMinutes());
            const s = pad(now.getSeconds());
            document.getElementById("time").innerText = `${h}:${m}:${s}`;

            const year = now.getFullYear();
            const month = pad(now.getMonth() + 1);
            const day = pad(now.getDate());
            const week = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"][now.getDay()];
            document.getElementById("date").innerText = `${year}年${month}月${day}日 ${week}`;
        }
        update();
        setInterval(update, 1000);
    </script>
</body>
</html>

保持屏幕长亮，进度条等

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高级时钟</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: sans-serif;
            background: #000;
            color: #fff;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        /* 左上角设置齿轮按钮 */
        #settingsBtn {
            position: fixed;
            top: 20px;
            left: 20px;
            font-size: 24px;
            background: transparent;
            border: none;
            color: #fff;
            opacity: 0.6;
            cursor: pointer;
            z-index: 999;
        }
        #settingsBtn:hover {
            opacity: 1;
        }

        /* 日期 */
        .date {
            font-size: 3.5vw;
            margin-bottom: 24px;
            opacity: 0.8;
            color: #cccccc;
        }

        /* 主时间样式 */
        .time {
            font-size: 18vw;
            font-weight: 600;
            font-family: "SF Mono", "Roboto Mono", monospace;
            white-space: nowrap;
            color: #ffffff;
            text-shadow: 0 0 20px rgba(255,255,255,0.8),
                         0 0 40px rgba(255,255,255,0.4);
            display: flex;
            align-items: baseline;
            gap: 0.2em;
        }
        /* AM/PM标识字号偏小 */
        .ap-text{
            font-size: 0.35em;
            opacity:0.8;
        }
        /* 秒缩小一半 */
        .second {
            font-size: 0.5em;
            margin-left: 0.1em;
        }

        /* 秒进度条 —— 已加粗 */
        .progress-wrap {
            width: 100%;
            height: 50px; /* 从10px → 20px 加粗 */
            background: #333;
            border-radius: 99px;
            margin-top: 20px;
            overflow: hidden;
            display: none;
            opacity:0.7;
        }
        .progress-bar {
            height: 100%;
            background: #fff;
            box-shadow: 0 0 12px #fff;
            width: 0%;
            transition: width 0.3s linear;
        }

        /* 设置侧边面板 */
        .panel {
            position: fixed;
            top: 0;
            left: 0;
            width: 320px;
            height: 100vh;
            background: #111;
            border-right: 1px solid #333;
            padding: 80px 30px 30px;
            transform: translateX(-100%);
            transition: transform 0.3s ease;
            z-index: 998;
        }
        .panel.open {
            transform: translateX(0);
        }
        .panel h3 {
            margin-bottom: 20px;
            font-size: 18px;
        }
        .item {
            margin: 16px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .item label {
            font-size: 16px;
        }
        .item input {
            padding: 6px 8px;
            width: 70px;
            background: #222;
            color: #fff;
            border: 1px solid #444;
            border-radius: 6px;
        }
        .save {
            margin-top: 30px;
            padding: 10px;
            width: 100%;
            background: #fff;
            color: #000;
            border: none;
            border-radius: 8px;
            font-weight: bold;
            cursor: pointer;
        }

        /* 遮罩 */
        .mask {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.5);
            z-index: 997;
            display: none;
        }
        .mask.show {
            display: block;
        }
    </style>
</head>
<body>
<!-- 齿轮设置按钮 -->
<button id="settingsBtn">⚙️</button>

<div class="date" id="date"></div>
<div class="time" id="time"></div>

<div class="progress-wrap" id="progressWrap">
    <div class="progress-bar" id="progressBar"></div>
</div>

<div class="mask" id="mask"></div>
<div class="panel" id="panel">
    <h3>时钟设置</h3>
    <div class="item">
        <label>显示秒数</label>
        <input type="checkbox" id="showSecond" checked>
    </div>
    <div class="item">
        <label>24小时制</label>
        <input type="checkbox" id="use24h" checked>
    </div>
    <div class="item">
        <label>闹钟设置</label>
        <div style="display:flex;gap:6px;">
            <input type="number" id="alarmH" placeholder="时" min="0" max="23">
            <input type="number" id="alarmM" placeholder="分" min="0" max="59">
        </div>
    </div>
    <div class="item">
        <label>开启闹钟</label>
        <input type="checkbox" id="alarmEnabled">
    </div>
    <button class="save" id="save">保存设置</button>
</div>

<audio id="alarmAudio" loop src="https://assets.mixkit.co/sfx/preview/mixkit-alarm-digital-clock-beep-989.mp3"></audio>

<script>
    //屏幕常亮
    let wakeLock = null;
    const requestWakeLock = async () => {
        try {
            wakeLock = await navigator.wakeLock.request('screen');
        } catch(e) {}
    };
    window.addEventListener('load', requestWakeLock);
    document.addEventListener('visibilitychange',()=>{
        if(wakeLock && document.visibilityState==='visible') requestWakeLock();
    })

    const settingsBtn = document.getElementById('settingsBtn');
    const panel = document.getElementById('panel');
    const mask = document.getElementById('mask');
    const save = document.getElementById('save');
    const timeEl = document.getElementById('time');
    const dateEl = document.getElementById('date');
    const progressWrap = document.getElementById('progressWrap');
    const progressBar = document.getElementById('progressBar');

    //全局配置
    let showSecond = true;
    let use24h = true;
    let alarmH = null;
    let alarmM = null;
    let alarmOn = false;

    //打开关闭侧边栏
    settingsBtn.onclick = ()=>{
        panel.classList.add('open');
        mask.classList.add('show');
    }
    mask.onclick = ()=>{
        panel.classList.remove('open');
        mask.classList.remove('show');
    }

    //保存配置
    save.onclick = ()=>{
        showSecond = document.getElementById('showSecond').checked;
        use24h = document.getElementById('use24h').checked;
        alarmH = Number(document.getElementById('alarmH').value)||null;
        alarmM = Number(document.getElementById('alarmM').value)||null;
        alarmOn = document.getElementById('alarmEnabled').checked;
        panel.classList.remove('open');
        mask.classList.remove('show');
    }

    function pad(n){
        return n<10 ? '0'+n : n;
    }

    function update(){
        const now = new Date();
        let rawH = now.getHours();
        const m = now.getMinutes();
        const s = now.getSeconds();
        let apTxt = '';
        let displayH = rawH;

        //12小时制：前面加AM/PM
        if(!use24h){
            apTxt = rawH >=12 ? 'PM' : 'AM';
            displayH = rawH %12 ||12;
        }

        const hStr = pad(displayH);
        const mStr = pad(m);
        const sStr = pad(s);

        if(showSecond){
            //时分秒模式
            if(apTxt){
                timeEl.innerHTML = `<span class="ap-text">${apTxt}</span>${hStr}:${mStr}<span class="second">:${sStr}</span>`;
            }else{
                timeEl.innerHTML = `${hStr}:${mStr}<span class="second">:${sStr}</span>`;
            }
            progressWrap.style.display = 'none';
        }else{
            //仅时分 + 底部进度条
            if(apTxt){
                timeEl.innerHTML = `<span class="ap-text">${apTxt}</span>${hStr}:${mStr}`;
            }else{
                timeEl.textContent = `${hStr}:${mStr}`;
            }
            progressWrap.style.display = 'block';
            progressBar.style.width = (s/60*100)+'%';
        }

        //日期
        const weekArr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
        dateEl.textContent = `${now.getFullYear()}年${pad(now.getMonth()+1)}月${pad(now.getDate())}日 ${weekArr[now.getDay()]}`;

        //闹钟触发
        const audio = document.getElementById('alarmAudio');
        if(alarmOn && alarmH===rawH && alarmM===m && s===0){
            audio.play();
            alert('⏰闹钟时间到！');
        }else{
            if(audio.currentTime>0) audio.pause();
        }
    }

    setInterval(update,1000);
    update();
</script>
</body>
</html>

View Code

进度条根据时间变化

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高级时钟</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: sans-serif;
            background: #000;
            color: #fff;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        /* 左上角设置齿轮按钮 */
        #settingsBtn {
            position: fixed;
            top: 20px;
            left: 20px;
            font-size: 24px;
            background: transparent;
            border: none;
            color: #fff;
            opacity: 0.6;
            cursor: pointer;
            z-index: 999;
        }
        #settingsBtn:hover {
            opacity: 1;
        }

        /* 日期 */
        .date {
            font-size: 3.5vw;
            margin-bottom: 24px;
            opacity: 0.8;
            color: #cccccc;
        }

        /* 主时间样式 */
        .time {
            font-size: 18vw;
            font-weight: 600;
            font-family: "SF Mono", "Roboto Mono", monospace;
            white-space: nowrap;
            color: #ffffff;
            text-shadow: 0 0 20px rgba(255,255,255,0.8),
                         0 0 40px rgba(255,255,255,0.4);
            display: flex;
            align-items: baseline;
            gap: 0.2em;
        }
        /* AM/PM标识字号偏小 */
        .ap-text{
            font-size: 0.35em;
            opacity:0.8;
        }
        /* 秒缩小一半 */
        .second {
            font-size: 0.5em;
            margin-left: 0.1em;
        }

        /* 秒进度条 加粗20px */
        .progress-wrap {
            width: 100%;
            height: 50px; /* 从10px → 20px 加粗 */
            background: #333;
            border-radius: 99px;
            margin-top: 20px;
            overflow: hidden;
            display: none;
            opacity:0.7;
        }
        .progress-bar {
            height: 100%;
            border-radius: 99px;
            width: 0%;
            transition: width 0.3s linear;
        }

        /* 设置侧边面板 */
        .panel {
            position: fixed;
            top: 0;
            left: 0;
            width: 320px;
            height: 100vh;
            background: #111;
            border-right: 1px solid #333;
            padding: 80px 30px 30px;
            transform: translateX(-100%);
            transition: transform 0.3s ease;
            z-index: 998;
        }
        .panel.open {
            transform: translateX(0);
        }
        .panel h3 {
            margin-bottom: 20px;
            font-size: 18px;
        }
        .item {
            margin: 16px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .item label {
            font-size: 16px;
        }
        .item input {
            padding: 6px 8px;
            width: 70px;
            background: #222;
            color: #fff;
            border: 1px solid #444;
            border-radius: 6px;
        }
        .save {
            margin-top: 30px;
            padding: 10px;
            width: 100%;
            background: #fff;
            color: #000;
            border: none;
            border-radius: 8px;
            font-weight: bold;
            cursor: pointer;
        }

        /* 遮罩 */
        .mask {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.5);
            z-index: 997;
            display: none;
        }
        .mask.show {
            display: block;
        }
    </style>
</head>
<body>
<!-- 齿轮设置按钮 -->
<button id="settingsBtn">⚙️</button>

<div class="date" id="date"></div>
<div class="time" id="time"></div>

<div class="progress-wrap" id="progressWrap">
    <div class="progress-bar" id="progressBar"></div>
</div>

<div class="mask" id="mask"></div>
<div class="panel" id="panel">
    <h3>时钟设置</h3>
    <div class="item">
        <label>显示秒数</label>
        <input type="checkbox" id="showSecond" checked>
    </div>
    <div class="item">
        <label>24小时制</label>
        <input type="checkbox" id="use24h" checked>
    </div>
    <div class="item">
        <label>闹钟设置</label>
        <div style="display:flex;gap:6px;">
            <input type="number" id="alarmH" placeholder="时" min="0" max="23">
            <input type="number" id="alarmM" placeholder="分" min="0" max="59">
        </div>
    </div>
    <div class="item">
        <label>开启闹钟</label>
        <input type="checkbox" id="alarmEnabled">
    </div>
    <button class="save" id="save">保存设置</button>
</div>

<audio id="alarmAudio" loop src="https://assets.mixkit.co/sfx/preview/mixkit-alarm-digital-clock-beep-989.mp3"></audio>

<script>
    //屏幕常亮
    let wakeLock = null;
    const requestWakeLock = async () => {
        try {
            wakeLock = await navigator.wakeLock.request('screen');
        } catch(e) {}
    };
    window.addEventListener('load', requestWakeLock);
    document.addEventListener('visibilitychange',()=>{
        if(wakeLock && document.visibilityState==='visible') requestWakeLock();
    })

    const settingsBtn = document.getElementById('settingsBtn');
    const panel = document.getElementById('panel');
    const mask = document.getElementById('mask');
    const save = document.getElementById('save');
    const timeEl = document.getElementById('time');
    const dateEl = document.getElementById('date');
    const progressWrap = document.getElementById('progressWrap');
    const progressBar = document.getElementById('progressBar');

    //全局配置
    let showSecond = true;
    let use24h = true;
    let alarmH = null;
    let alarmM = null;
    let alarmOn = false;

    //打开关闭侧边栏
    settingsBtn.onclick = ()=>{
        panel.classList.add('open');
        mask.classList.add('show');
    }
    mask.onclick = ()=>{
        panel.classList.remove('open');
        mask.classList.remove('show');
    }

    //保存配置
    save.onclick = ()=>{
        showSecond = document.getElementById('showSecond').checked;
        use24h = document.getElementById('use24h').checked;
        alarmH = Number(document.getElementById('alarmH').value)||null;
        alarmM = Number(document.getElementById('alarmM').value)||null;
        alarmOn = document.getElementById('alarmEnabled').checked;
        panel.classList.remove('open');
        mask.classList.remove('show');
    }

    function pad(n){
        return n<10 ? '0'+n : n;
    }

    //根据秒数获取渐变颜色：0绿→30黄→60红
    function getColor(sec){
        let r=0,g=0,b=0;
        if(sec<=30){
            //0~30：绿→黄
            g=255;
            r=Math.round((sec/30)*255);
        }else{
            //30~60：黄→红
            r=255;
            g=Math.round(255 - ((sec-30)/30)*255);
        }
        return {r,g,b};
    }

    function update(){
        const now = new Date();
        let rawH = now.getHours();
        const m = now.getMinutes();
        const s = now.getSeconds();
        let apTxt = '';
        let displayH = rawH;

        //12小时制：前面加AM/PM
        if(!use24h){
            apTxt = rawH >=12 ? 'PM' : 'AM';
            displayH = rawH %12 ||12;
        }

        const hStr = pad(displayH);
        const mStr = pad(m);
        const sStr = pad(s);

        if(showSecond){
            //时分秒模式
            if(apTxt){
                timeEl.innerHTML = `<span class="ap-text">${apTxt}</span>${hStr}:${mStr}<span class="second">:${sStr}</span>`;
            }else{
                timeEl.innerHTML = `${hStr}:${mStr}<span class="second">:${sStr}</span>`;
            }
            progressWrap.style.display = 'none';
        }else{
            //仅时分 + 底部进度条 + 动态变色
            if(apTxt){
                timeEl.innerHTML = `<span class="ap-text">${apTxt}</span>${hStr}:${mStr}`;
            }else{
                timeEl.textContent = `${hStr}:${mStr}`;
            }
            progressWrap.style.display = 'block';
            const per = (s/60*100);
            progressBar.style.width = per+'%';
            //设置颜色+发光
            const c = getColor(s);
            const rgb = `rgb(${c.r},${c.g},${c.b})`;
            progressBar.style.background = rgb;
            progressBar.style.boxShadow = `0 0 12px ${rgb}`;
        }

        //日期
        const weekArr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
        dateEl.textContent = `${now.getFullYear()}年${pad(now.getMonth()+1)}月${pad(now.getDate())}日 ${weekArr[now.getDay()]}`;

        //闹钟触发
        const audio = document.getElementById('alarmAudio');
        if(alarmOn && alarmH===rawH && alarmM===m && s===0){
            audio.play();
            alert('⏰闹钟时间到！');
        }else{
            if(audio.currentTime>0) audio.pause();
        }
    }

    setInterval(update,1000);
    update();
</script>
</body>
</html>

View Code

出处：参考豆包

参考：https://www.cnblogs.com/cup11/p/20207070

此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。原文来自 — 版权归原作者所有。

推荐订阅源

博客园 - jack_Meng