电子时钟html

news/2025/2/11 8:04:18/

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

  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/news/1571104.html

相关文章

2021版小程序开发5——小程序项目开发实践(2)-完

2021版小程序开发5——小程序项目开发实践(2) 学习笔记 2025 使用uni-app开发一个电商项目继续&#xff1b; 过滤器的使用 filters: {toFixed(num){return Number(num).toFixed(2)} }<!-- 通过管道符 | 使用过滤器 --> <view> {{ item.price | toFixed }}</vi…

Jenkins数据备份到windows FTP服务器

文章目录 背景1. 安装配置 FileZilla Server&#xff08;Windows&#xff09;1.1 下载并安装 FileZilla Server1.2 配置 FTP 用户和共享目录 2. 安装并配置 FTP 客户端&#xff08;CentOS&#xff09;2.1 在 CentOS 安装 lftp 3. 编写 Jenkins 备份脚本3.1 赋予执行权限3.2 测试…

在阿里云ECS上一键部署DeepSeek-R1

DeepSeek-R1 是一款开源模型&#xff0c;也提供了 API(接口)调用方式。据 DeepSeek介绍&#xff0c;DeepSeek-R1 后训练阶段大规模使用了强化学习技术&#xff0c;在只有极少标注数据的情况下提升了模型推理能力&#xff0c;该模型性能对标 OpenAl o1 正式版。DeepSeek-R1 推出…

设计模式中的关联和依赖区别

在设计模式中&#xff0c;“关联”&#xff08;Association&#xff09;和“依赖”&#xff08;Dependency&#xff09;是两种不同的关系&#xff0c;它们有着不同的含义和使用场景。以下是它们之间的区别&#xff1a; 1. 关联&#xff08;Association&#xff09; 定义&…

现在中国三大运营商各自使用的哪些band频段

现在中国三大运营商4G和5G频段分配情况&#xff1a; 中国移动 4G频段&#xff1a; TD-LTE&#xff1a; Band 39&#xff1a;1880-1920MHz&#xff0c;实际使用1885-1915MHz。 Band 40&#xff1a;2300-2400MHz&#xff0c;实际使用2320-2370MHz。 Band 41&#xff1a;2515-26…

黑马React保姆级(PPT+笔记)

一、react基础 1.进程 2、优势 封装成一个库&#xff0c;组件化开发更加方便 跨平台主要是react native等可以来写移动端如android&#xff0c;ios等 丰富生态&#xff1a;可以在很多浏览器用 3、市场 4、搭建脚手架 npx create-react-app react-basic npm start后仍然可能…

系统URL整合系列视频三(前端代码实现)

视频 系统URL整合系列视频三&#xff08;前端代码实现&#xff09; 视频介绍 &#xff08;全国&#xff09;大型分布式系统Web资源URL整合需求前端代码实现。当今社会各行各业对软件系统的web资源访问权限控制越来越严格&#xff0c;控制粒度也越来越细。安全级别提高的同时也…

iOS主要知识点梳理回顾-2-多线程

iOS的多线程主要有三种方式&#xff0c;NSThread、GCD&#xff08;Grand Central Dispatch&#xff09;NSOperationQueue 开始&#xff0c;在iOS2发布的时候&#xff0c;苹果同步推出了NSthread和NSOperation。其中NSthread比较简单&#xff0c;仅提供了创建队列、开始、取消、…