电子时钟html

devtools/2025/2/19 9:18:08/

要求:
电子时钟的时间需与北京时间实时对应。
原理:

  1. 获取当地时间,我发现不用UTC+8,当地时间已经与北京时间一致。
  2. 获取时分秒,小于十的补零。
  3. 调用clock更新,这样刷新的时候还会有内容。
  4. 设置每秒钟调用一次。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>北京时间电子钟</title><style>.clock {margin: 0 auto;width: 200px;height: 200px;border: 2px solid pink;text-align: center;line-height: 200px;font-size: 30px;}</style>
</head>
<body><div class="clock"></div><script>function Clock() {//北京时间:UTC+8let bjTime = new Date()let hour = bjTime.getHours()let minute = bjTime.getMinutes()let second = bjTime.getSeconds()hour = hour < 10 ? '0' + hour : hourminute = minute < 10 ? '0' + minute : minutesecond = second < 10 ? '0' + second : secondlet Time = hour + ':' + minute + ':' + second let clock = document.querySelector('.clock')clock.textContent = Time}Clock()setInterval(Clock, 1000)</script>
</body>
</html>

视频:

电子时钟


http://www.ppmy.cn/devtools/158705.html

相关文章

hexo 魔改 | 修改卡片透明度

hexo 魔改 | 修改卡片透明度 ** 博客食物用更佳 博客地址 ** 这是笔者自己瞎倒腾的。作为前端菜鸡一枚&#xff0c;大佬们随便看看就好~ 我用的主题是 butterfly 4.12.0 分析 通过开发者工具可以看出来卡片的背景和 --card-bg 变量有关 再在 sources 下的 css 文件夹下的…

2024年12月电子学会青少年机器人技术等级考试(三级)理论综合真题

202412 青少年等级考试机器人理论真题三级 一、单选题 第 1 题 Arduino UNO/Nano主控板&#xff0c;程序模块如下&#xff0c;该模块运行后&#xff0c;引脚5输出的等效电压为0V&#xff0c;变量i对应的值是&#xff1f;&#xff08; &#xff09; A&#xff1a;0 B&#xff1…

Unity状态机的实现方法一

Unity状态机知识点整理 1. 状态机基本概念 1.1 什么是状态机 Unity常见的状态机管理分为三种&#xff1a; 枚举状态机通过实现接口的方式多态出的更加便于维护的状态机Unity Animator自带的StateMachineBehaviour 1.2 不同状态机实现方式的对比 自定义状态机&#xff08;…

Ubuntu 上安装和配置 Nexus Repository Manager

在 Ubuntu 上安装和配置 Nexus Repository Manager&#xff08;Sonatype Nexus&#xff09;通常用于管理 Maven、npm、Docker 等包的私有仓库。以下是详细步骤&#xff1a; 1. 系统准备 更新系统并安装必要依赖&#xff1a; 在终端运行以下命令&#xff1a; sudo apt update…

LabVIEW用户界面(UI)和用户体验(UX)设计

作为一名 LabVIEW 开发者&#xff0c;满足功能需求、保障使用便捷与灵活只是基础要求。在如今这个用户体验至上的时代&#xff0c;为 LabVIEW 应用程序设计直观且具有美学感的界面&#xff0c;同样是不容忽视的关键任务。一个优秀的界面设计&#xff0c;不仅能提升用户对程序的…

deepin linux UOS AI 使用 deepseek-r1 30B

我们用 ollama 下载 deepseek-r1 3B 执行命令: $ ollama pull models/unsloth/DeepSeek-R1-Distill-Qwen-32B-GGUF 下载完成后 我们就要重新更改目录和文件了 deepseek-r1/gguf (这是目录结构) 然后我把 gguf文件 更名成 DeepSeek-R1.gguf (就是目录下最大的那个文件) …

springCloud-2021.0.9 之 GateWay 示例

文章目录 前言springCloud-2021.0.9 之 GateWay 示例1. GateWay 官网2. GateWay 三个关键名称3. GateWay 工作原理的高级概述4. 示例4.1. POM4.2. 启动类4.3. 过滤器4.4. 配置 5. 启动/测试 前言 如果您觉得有用的话&#xff0c;记得给博主点个赞&#xff0c;评论&#xff0c;收…

2025年智慧城市解决方案下载:AI-超脑中台,体系架构整体设计

2025年&#xff0c;随着人工智能、物联网、大数据等新兴技术的深度融合&#xff0c;智慧城市解决方案正迈向更高层次的智能化和协同化阶段。其中&#xff0c;AI-超脑中台作为核心架构的一部分&#xff0c;为城市智能化运行提供了强大支撑。 智慧城市最新解决方案&#xff0c;标…