当前位置： 首页 > news >正文

Html -- 文字时钟

news 2025/6/19 4:04:32

Html – 文字时钟

文字时钟，之前在Android上实现了相关效果，闲来无事，弄个网页版的玩玩。。。

在这里插入图片描述

直接上代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Text Clock</title><style type="text/css">html, body {margin: 0;padding: 0;background: black;}.root {display: flex;justify-content: center;}.container {display: block;background: black;}</style>
</head>
<body>
<div class="root"><canvas id="container" class="container"></canvas>
</div><script type="text/javascript">const HOURS = ["一点", "二点", "三点", "四点", "五点", "六点", "七点", "八点", "九点", "十点", "十一点", "十二点"];const MINUTES = ["一分", "二分", "三分", "四分", "五分", "六分", "七分", "八分", "九分", "十分","十一分", "十二分", "十三分", "十四分", "十五分", "十六分", "十七分", "十八分", "十九分", "二十分","二十一分", "二十二分", "二十三分", "二十四分", "二十五分", "二十六分", "二十七分", "二十八分", "二十九分", "三十分","三十一分", "三十二分", "三十三分", "三十四分", "三十五分", "三十六分", "三十七分", "三十八分", "三十九分", "四十分","四十一分", "四十二分", "四十三分", "四十四分", "四十五分", "四十六分", "四十七分", "四十八分", "四十九分", "五十分","五十一分", "五十二分", "五十三分", "五十四分", "五十五分", "五十六分", "五十七分", "五十八分", "五十九分", ""];const SECONDS = ["一秒", "二秒", "三秒", "四秒", "五秒", "六秒", "七秒", "八秒", "九秒", "十秒","十一秒", "十二秒", "十三秒", "十四秒", "十五秒", "十六秒", "十七秒", "十八秒", "十九秒", "二十秒","二十一秒", "二十二秒", "二十三秒", "二十四秒", "二十五秒", "二十六秒", "二十七秒", "二十八秒", "二十九秒", "三十秒","三十一秒", "三十二秒", "三十三秒", "三十四秒", "三十五秒", "三十六秒", "三十七秒", "三十八秒", "三十九秒", "四十秒","四十一秒", "四十二秒", "四十三秒", "四十四秒", "四十五秒", "四十六秒", "四十七秒", "四十八秒", "四十九秒", "五十秒","五十一秒", "五十二秒", "五十三秒", "五十四秒", "五十五秒", "五十六秒", "五十七秒", "五十八秒", "五十九秒", ""];const INTERVAL_UPDATE = 1000;//时间刷新间隔const mColorCenetr = "#ffffff";//中心字体颜色const mColorCur = "#ff0000";//选中字体颜色const mColorCom = "#bdbdbd";//基础色const mColorBg = "#000000";//背景颜色const mFont = "华文行楷";//字体var mWidth, mHeight;//宽高var mH, mM, mS;//当前的时分秒var mH24;//24制小时var mWeek, mDate, mTime;//星期，日期，时间var mRadiusH, mRadiusM, mRadiusS;//三个同心圆的半径var mDegreeH, mDegreeM, mDegreeS;//时分秒旋转角度var mTextSizeCom;//通用字体大小var mTextSizeCenter;//中间字体大小var mOffset;//中间文字行间隔var mCenterHeight;//文字纵向居中高度//var canvas;var cxt;var hd, md, sd, av;window.onload = function () {initial();}//适应屏幕大小变化window.onresize = function () {calcSize();}function initial() {canvas = document.getElementById("container");cxt = canvas.getContext("2d");calcSize();curTime();startTask();}function calcSize() {mWidth = window.innerWidth;mHeight = window.innerHeight;//确保为正方形mWidth = mHeight = Math.min(mWidth, mHeight);canvas.width = mWidth;canvas.height = mHeight;// console.log(mWidth + " - " + mHeight);//字体大小mTextSizeCom = mWidth / 50;//通用字体大小mTextSizeCenter = mWidth / 35;//中间字体大小mOffset = mTextSizeCenter / 2;//中间文字间隔mCenterHeight = (mHeight - mTextSizeCom) / 2;//各圆半径mRadiusH = mWidth / 6;mRadiusM = mRadiusH + 4 * mTextSizeCom;//3+1mRadiusS = mRadiusM + 5 * mTextSizeCom;//4+1// console.log(mRadiusH + " - " + mRadiusM + " - " + mRadiusS);}function startTask() {setInterval(function () {curTime();//内嵌一个有限循环var times = 0;var interval = setInterval(function () {if (times > 6) {clearInterval(interval);} else {doAnimation();times++;}}, 10)}, INTERVAL_UPDATE);}//自定义线性循环动画function doAnimation() {//+ -> 顺时针； - -> 逆时针av = av - 0.9;//总偏移量/次数if (mM === 0 && mS === 0) {mDegreeH = hd + av * 5;//时圈旋转角度是分秒的5倍，线性的旋转30°}if (mS === 0) {mDegreeM = md + av;//线性的旋转6°}mDegreeS = sd + av;//线性的旋转6°drawCanvas();}//刷新背景function updateBg() {cxt.fillStyle = mColorBg;cxt.fillRect(0, 0, mWidth, mHeight);}//绘制中间时间/日期/星期function drawCenterInfo() {cxt.save();cxt.fillStyle = mColorCenetr;cxt.font = mTextSizeCenter + "px " + mFont;//draw timevar len = (mTime.length -2) * mTextSizeCenter / 2;//数字大小只有文字的一半 //去掉两个符号cxt.fillText(mTime, (mWidth - len) / 2, mHeight / 2 - mTextSizeCenter * 3 / 2 - mOffset);//draw datevar len2 = (mDate.length-2) * mTextSizeCenter / 2;//去掉两个符号cxt.fillText(mDate, (mWidth - len2) / 2, mHeight / 2 - mTextSizeCenter / 2);//draw weekvar len3 = mWeek.length * mTextSizeCenter;cxt.fillText(mWeek, (mWidth - len3) / 2, mHeight / 2 + mTextSizeCenter / 2 + mOffset);cxt.restore();}function drawHour() {cxt.save();//只能旋转角度，以原点(0,0)cxt.translate(mWidth / 2, mHeight / 2);cxt.rotate(mDegreeH * Math.PI / 180);//* Math.PI / 180cxt.translate(-mWidth / 2, -mHeight / 2);//旋转完之后需要移回去//时针圈: 360/12 = 30度for (var i = 0; i < HOURS.length; i++) {cxt.save();cxt.translate(mWidth / 2, mHeight / 2);cxt.rotate(30 * i * Math.PI / 180);cxt.translate(-mWidth / 2, -mHeight / 2);if (i + 1 === mH || (i === 11 && mH === 0)) {//当前时cxt.fillStyle = mColorCur;} else {cxt.fillStyle = mColorCom;}cxt.font = mTextSizeCom + "px " + mFont;cxt.fillText(HOURS[i], mWidth / 2 + mRadiusH, mCenterHeight);cxt.restore();}cxt.restore();}function drawMinute() {cxt.save();//只能旋转角度，以原点(0,0)cxt.translate(mWidth / 2, mHeight / 2);cxt.rotate(mDegreeM * Math.PI / 180);//* Math.PI / 180cxt.translate(-mWidth / 2, -mHeight / 2);//旋转完之后需要移回去//分针圈: 360/60 = 6度for (var i = 0; i < MINUTES.length; i++) {cxt.save();cxt.translate(mWidth / 2, mHeight / 2);cxt.rotate(6 * i * Math.PI / 180);cxt.translate(-mWidth / 2, -mHeight / 2);if (i + 1 === mM) {//当前时cxt.fillStyle = mColorCur;} else {cxt.fillStyle = mColorCom;}cxt.font = mTextSizeCom + "px " + mFont;cxt.fillText(MINUTES[i], mWidth / 2 + mRadiusM, mCenterHeight);cxt.restore();}cxt.restore();}function drawSecond() {cxt.save();//只能旋转角度，以原点(0,0)cxt.translate(mWidth / 2, mHeight / 2);cxt.rotate(mDegreeS * Math.PI / 180);//* Math.PI / 180cxt.translate(-mWidth / 2, -mHeight / 2);//旋转完之后需要移回去//秒针圈: 360/60 = 6度for (var i = 0; i < MINUTES.length; i++) {cxt.save();cxt.translate(mWidth / 2, mHeight / 2);cxt.rotate(6 * i * Math.PI / 180);cxt.translate(-mWidth / 2, -mHeight / 2);if (i + 1 === mS) {//当前时cxt.fillStyle = mColorCur;} else {cxt.fillStyle = mColorCom;}cxt.font = mTextSizeCom + "px " + mFont;cxt.fillText(SECONDS[i], mWidth / 2 + mRadiusS, mCenterHeight);cxt.restore();}cxt.restore();}//刷新画布function drawCanvas() {updateBg();drawCenterInfo();drawHour();drawMinute();drawSecond();}//function curTime() {let date = new Date();let year = date.getFullYear();let month = date.getMonth() + 1;let day = date.getDate();let week = date.getDay();mH24 = date.getHours();mM = date.getMinutes();mS = date.getSeconds();mH = mH24 >= 12 ? mH24 - 12 : mH24;mTime = formatTime(mH24) + ':' + formatTime(mM) + ':' + formatTime(mS);mDate = year + '/' + formatTime(month) + '/' + formatTime(day);mWeek = parseWeek(week);calculateDegree();}function calculateDegree() {//逆时针旋转mDegreeH = -360 / 12 * (mH - 1);mDegreeM = -360 / 60 * (mM - 1);mDegreeS = -360 / 60 * (mS - 1);hd = mDegreeH;md = mDegreeM;sd = mDegreeS;av = 6;//每次动画总偏移量}function formatTime(fn) {return fn < 10 ? "0" + fn : fn;}function parseWeek(week) {var mWeek;switch (week) {case 1:mWeek = "星期一";break;case 2:mWeek = "星期二";break;case 3:mWeek = "星期三";break;case 4:mWeek = "星期四";break;case 5:mWeek = "星期五";break;case 6:mWeek = "星期六";break;case 7:mWeek = "星期日";break;}return mWeek;}
</script>
</body>
</html>

相关文章：

Html -- 文字时钟

Html – 文字时钟 文字时钟&#xff0c;之前在Android上实现了相关效果&#xff0c;闲来无事&#xff0c;弄个网页版的玩玩。。。直接上代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><titl…...

编程日记 2023/10/23 9:35:02

快问快答：关于线上流量卡“归属地随机”几个问题！

在网上办过流量卡的朋友应该都知道&#xff0c;资费虽然便宜&#xff0c;但是归属地却是异地&#xff0c;今天小编就给大家聊一聊关于流量卡归属地的问题。 ​ 网上的流量卡都是归属地随机的卡&#xff0c;今天小编以问答的方式给大家普及一下&#xff0c;如果对于归属地有疑问…...

编程日记 2023/10/23 9:34:00

Linux常用命令——clock命令

在线Linux命令查询工具 clock 用于调整 RTC 时间。 补充说明 clock命令用于调整 RTC 时间。 RTC 是电脑内建的硬件时间&#xff0c;执行这项指令可以显示现在时刻&#xff0c;调整硬件时钟的时间&#xff0c;将系统时间设成与硬件时钟之时间一致&#xff0c;或是把系统时间…...

编程日记 2023/10/23 9:33:00

澎湃OS上线：小米告别MIUI，跟小米汽车Say Hi

作者 | Amy 编辑 | 德新 10月17日&#xff0c;雷军发博官宣&#xff0c;「小米将启用全新操作系统&#xff0c;小米澎湃OS&#xff08;Xiaomi HyperOS&#xff09;」。 短短几百字的微博&#xff0c;数次提到了「小米汽车」&#xff1a; 小米向人车家全生态迈进&#xff0c;…...

编程日记 2023/10/23 9:31:58

域名不部署SSL证书有什么影响？

SSL证书是保护网站数据传输安全的重要工具&#xff0c;通过加密用户和服务器之间的通信来确保数据的保密性和完整性。然而&#xff0c;如果一个域名没有部署SSL证书&#xff0c;会对网站和用户产生一系列的负面影响。下文中将介绍域名不部署SSL证书的影响&#xff0c;并提供相应…...

编程日记 2023/10/23 9:30:57

Delphi 编程实现拖动排序并输出到文档

介绍&#xff1a;实现拖动排序功能&#xff0c;并将排序后的内容输出到文档中。我们将使用 Delphi 的组件来创建一个界面&#xff0c;其中包括一个 Memo 控件用于输入内容&#xff0c;一个 ListBox 控件用于显示排序后的内容&#xff0c;并且提供按钮来触发排序和输出操作。 代…...

编程日记 2023/10/23 9:29:57

android利用FFmpeg进行视频转换

大致思路&#xff1a;首先安装FFmpeg库到windows电脑上&#xff0c;先测试命令行工具是否可以使用&#xff08;需要先配置环境&#xff09;&#xff0c;之后再集成到android程序中。 一些命令&#xff1a; 转化为流文件&#xff1a; ffmpeg -i input.mp4 -codec copy -bsf:v …...

编程日记 2023/10/23 9:28:55

Python中不同进制间的转换

Python中不同进制间的转换 一、不同进制在计算机科学、数学和其他领域中具广泛的应用。以下是一些常见的应用&#xff1a;1. 二进制&#xff08;base-2&#xff09;: 在计算机系统中&#xff0c;数据以二进制形式存储和处理。二进制由0和1组成&#xff0c;是数字电子技术的基础…...

编程日记 2023/10/23 9:27:55

物流监管：智慧仓储数据可视化监控平台

随着市场竞争加剧和市场需求的不断提高&#xff0c;企业亟需更加高效、智能且可靠的仓储物流管理方式&#xff0c;以提升企业的物流效率&#xff0c;减少其输出成本&#xff0c;有效应对市场上的变化和挑战。 图扑自研 HT for Web 产品搭建的 2D 智慧仓储可视化平台&#xff0c…...

编程日记 2023/10/23 9:26:53

C++对象模型（19）-- 函数语义学：成员函数

1、普通成员函数的调用 1.1 调用方式的转换 为了提高普通成员函数的调用效率&#xff0c;在C中&#xff0c;对普通成员函数的调用&#xff0c;会转换成对全局函数的调用。 假如有下面所示的成员函数&#xff1a; class Test { public:int m_i;int func(int a) {m_i a;retu…...

编程日记 2023/10/23 9:25:52

AI只需26秒，就可以设计一款会走路的机器人

由西北大学、麻省理工学院和佛蒙特大学组成的一支科研团队首次开发出一种可以完全自行设计机器人的 AI 算法。 这一 AI 算法不仅运行速度快&#xff0c;还可在个人计算机上运行&#xff0c;并从头开始设计全新的结构。只需告诉AI“我们想要一个可穿越陆地的机器人”&#xff0c…...

编程日记 2023/10/23 9:24:52

简单实现spring的set依赖注入

Maven依赖: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/POM/4.0…...

编程日记 2023/10/23 9:22:50

STM32 HAL库函数——HAL_TIM_Base_Start_IT()详解

以STM32G030C8T6中的HAL_TIM_Base_Start_IT()函数为例&#xff0c;进行解释&#xff1b; 文章目录 一、函数原型和源代码二、函数用法详解&#xff1a;2.1 参数2.1.1 TIM_HandleTypeDef结构体详解 2.2 使用场景&#xff1a;2.3 使用方法&#xff1a; 三、函数使用示例&#xff…...

编程日记 2023/10/23 9:21:49

C语言之通讯录的实现篇优化版

目录 动态内存管理 通讯录声明 静态版本 动态版本 ​初始化通讯录 静态版本 动态版本 Add增加通讯录 静态版本 动态版本 Checkcapacity增容 DestroyContact释放动态空间 文件操作 SaveContact保存信息到文件中 初始化通讯录 旧版本 文件版本 LoadContact加载…...

编程日记 2023/10/23 9:20:49

C++17中std::string_view的使用

为了解决std::string初始化(或拷贝)成本高昂的问题&#xff0c;C17引入了std::string_view。std::string_view提供对现有字符串(C风格字符串、std::string、或另一个std::string_view)的只读访问&#xff0c;而无需进行拷贝。当想要有效地处理和操作字符串而不修改它们时&#…...

编程日记 2023/10/23 9:19:45

C#，数值计算——分类与推理Phylo_nj的计算方法与源程序

1 文本格式 using System; using System.Collections.Generic; namespace Legalsoft.Truffer { public class Phylo_nj : Phylagglom { public double[] u; public override void premin(double[,] d, int[] nextp) { i…...

编程日记 2023/10/23 9:18:43

element-ui 图片压缩上传

picture.js export const compressImgNew (file) > {return new Promise(resolve > {const reader new FileReader()const image new Image()image.onload (imageEvent) > {const canvas document.createElement(canvas) // 创建画布const context canvas.getCo…...

编程日记 2023/10/23 9:17:42

【Java 进阶篇】Java XML约束：确保数据一致性和有效性

XML&#xff08;可扩展标记语言&#xff09;是一种常用的数据交换格式&#xff0c;用于存储和交换数据。然而&#xff0c;为了确保数据的一致性和有效性&#xff0c;通常需要定义XML约束。XML约束是一种规则集&#xff0c;定义了XML文档的结构、元素、属性和数据类型。本篇博客…...

编程日记 2023/10/23 9:16:41

第一章概述

一、学习目的与要求 本章对软件测试作了概括性的介绍&#xff0c;目的是使学生对软件测试有个初步的认识。通过本章的学习&#xff0c;应使学生掌握软件测试的基本概念&#xff0c;了解软件测试的发展历程和行业现状&#xff0c;掌握软件测试技术的分类&#xff0c;理解软件测试…...

编程日记 2023/10/23 9:15:40

XCode15与iOS17/17.1 真机测试问题处理

XCode15与iOS17/17.1 真机测试问题处理&#xff0c;网上相关博客很多&#xff0c;摘录了如下实践后能起作用的地址如下&#xff1a;Xcode 15 报错处理 - 简书iOS17版本适配-CSDN博客 Xcode15适配-六虎 主要介绍下&#xff1a;Assertion failure in void _UIGraphicsBeginImag…...

编程日记 2023/10/23 9:14:39

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明&#xff1a; 想象一下&#xff0c;你正在用eNSP搭建一个虚拟的网络世界&#xff0c;里面有虚拟的路由器、交换机、电脑&#xff08;PC&#xff09;等等。这些设备都在你的电脑里面“运行”&#xff0c;它们之间可以互相通信&#xff0c;就像一个封闭的小王国。 但是&#…...

编程新知 2025/6/17 14:22:49

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤： 1）请求大小调整：首先，malloc 需要调整用户请求的大小，以适应内部数据结构（例如，可能需要存储额外的元数据）。通常，这包括对齐调整，确保分配的内存地址满足特定硬件要求（如对齐到8字节或16字节边界）。 2）空闲…...

编程新知 2025/6/18 0:49:30

ES6从入门到精通：前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

编程新知 2025/6/15 16:19:15

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

编程新知 2025/6/19 3:56:13

基于Springboot+Vue的办公管理系统

角色&#xff1a; 管理员、员工 技术&#xff1a; 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能&#xff1a; 该办公管理系统是一个综合性的企业内部管理平台&#xff0c;旨在提升企业运营效率和员工管理水…...

编程新知 2025/6/15 10:37:05

基于Java+VUE+MariaDB实现（Web）仿小米商城

仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意&#xff1a;运行前…...

编程新知 2025/6/15 2:27:19

十九、【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建

【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建 前言准备工作第一部分：回顾 Django 内置的 `User` 模型第二部分：设计并创建 `Role` 和 `UserProfile` 模型第三部分：创建 Serializers第四部分：创建 ViewSets第五部分：注册 API 路由第六部分：后端初步测…...

编程新知 2025/6/16 10:02:12

stm32wle5 lpuart DMA数据不接收

配置波特率9600时&#xff0c;需要使用外部低速晶振...

编程新知 2025/6/17 5:35:09

【Kafka】Kafka从入门到实战：构建高吞吐量分布式消息系统

Kafka从入门到实战：构建高吞吐量分布式消息系统 一、Kafka概述 Apache Kafka是一个分布式流处理平台，最初由LinkedIn开发，后成为Apache顶级项目。它被设计用于高吞吐量、低延迟的消息处理，能够处理来自多个生产者的海量数据，并将这些数据实时传递给消费者。 Kafka核心特…...

编程新知 2025/6/16 13:20:37

sshd代码修改banner

sshd服务连接之后会收到字符串&#xff1a; SSH-2.0-OpenSSH_9.5 容易被hacker识别此服务为sshd服务。 是否可以通过修改此banner达到让人无法识别此服务的目的呢&#xff1f; 不能。因为这是写的SSH的协议中的。 也就是协议规定了banner必须这么写。 SSH- 开头&#xff0c…...

编程新知 2025/6/16 0:15:32