网页版时间，可全屏显示

博客园 - jack_Meng

WinForm 双屏开发中屏幕适配与窗口定位高考志愿填报之计算机类专业院校报考指南（2026版） WebSocket 快速入门教程（附示例源码）自动生成项目工具--AutoBuilder，一键干掉80%的重复CRUD工作 C#/.NET/.NET Core优秀项目和框架2026年5月简报在Win10系统中，默认使用照片查看器 C#实现控制台多区域输出解决: 您的连接不是私密连接，您目前无法访问因为此网站使用了 HSTS 小说下载个人笔记本连接公共WIFI的安全措施追更 HelloGitHub 一整年，年度盘点基于Rust开发的m3u8下载器M3U8Quicker：支持断点续传、边下边播新写了个直播录制工具，可录制抖音快手斗鱼直播 bing 每日一图 --- 桌面壁纸一款基于 C# 开发的 Windows 10/11 系统增强优化工具适合个人的免费域名语雀里存了三年的笔记，导出到了本地插件----YuqueOut C# 也能像 Python 一样写脚本 | .NET 10 构建基于文件的应用 js 双击页面开始/暂停页面滚动使用bat批量给txt追加内容 Python摄像头监控：运动检测+自动录像+时间水印【译】告别繁琐查错：认识下新的 Visual Studio Debugger Agent Workflow 好消息，在 Visual Studio 中可以免费使用 GitHub Copilot 了！ [C#] 零依赖高性能跨平台 Web 胶水库 -- PicoServer 我的第一款独立产品--TaskManager 写 EF Core 查询，优化查询语句最新.NET新手入门学习网站合集（2026更新版） Avalonia UI：.NET 跨平台桌面开发的“真香”选择一个 txt 生成并保存 mp3的 Python 脚本

网页版时间，可全屏显示

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