Html -- 文字时钟
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 – 文字时钟 文字时钟，之前在Android上实现了相关效果，闲来无事，弄个网页版的玩玩。。。直接上代码： <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><titl…...
快问快答：关于线上流量卡“归属地随机”几个问题！
在网上办过流量卡的朋友应该都知道，资费虽然便宜，但是归属地却是异地，今天小编就给大家聊一聊关于流量卡归属地的问题。 网上的流量卡都是归属地随机的卡，今天小编以问答的方式给大家普及一下，如果对于归属地有疑问…...
Linux常用命令——clock命令
在线Linux命令查询工具 clock 用于调整 RTC 时间。 补充说明 clock命令用于调整 RTC 时间。 RTC 是电脑内建的硬件时间，执行这项指令可以显示现在时刻，调整硬件时钟的时间，将系统时间设成与硬件时钟之时间一致，或是把系统时间…...
澎湃OS上线：小米告别MIUI，跟小米汽车Say Hi
作者 | Amy 编辑 | 德新 10月17日，雷军发博官宣，「小米将启用全新操作系统，小米澎湃OS（Xiaomi HyperOS）」。 短短几百字的微博，数次提到了「小米汽车」： 小米向人车家全生态迈进，…...
域名不部署SSL证书有什么影响？
SSL证书是保护网站数据传输安全的重要工具，通过加密用户和服务器之间的通信来确保数据的保密性和完整性。然而，如果一个域名没有部署SSL证书，会对网站和用户产生一系列的负面影响。下文中将介绍域名不部署SSL证书的影响，并提供相应…...
Delphi 编程实现拖动排序并输出到文档
介绍：实现拖动排序功能，并将排序后的内容输出到文档中。我们将使用 Delphi 的组件来创建一个界面，其中包括一个 Memo 控件用于输入内容，一个 ListBox 控件用于显示排序后的内容，并且提供按钮来触发排序和输出操作。 代…...
android利用FFmpeg进行视频转换
大致思路：首先安装FFmpeg库到windows电脑上，先测试命令行工具是否可以使用（需要先配置环境），之后再集成到android程序中。 一些命令： 转化为流文件： ffmpeg -i input.mp4 -codec copy -bsf:v …...
Python中不同进制间的转换
Python中不同进制间的转换 一、不同进制在计算机科学、数学和其他领域中具广泛的应用。以下是一些常见的应用：1. 二进制（base-2）: 在计算机系统中，数据以二进制形式存储和处理。二进制由0和1组成，是数字电子技术的基础…...
物流监管：智慧仓储数据可视化监控平台
随着市场竞争加剧和市场需求的不断提高，企业亟需更加高效、智能且可靠的仓储物流管理方式，以提升企业的物流效率，减少其输出成本，有效应对市场上的变化和挑战。 图扑自研 HT for Web 产品搭建的 2D 智慧仓储可视化平台，…...
C++对象模型（19）-- 函数语义学：成员函数
1、普通成员函数的调用 1.1 调用方式的转换 为了提高普通成员函数的调用效率，在C中，对普通成员函数的调用，会转换成对全局函数的调用。 假如有下面所示的成员函数： class Test { public:int m_i;int func(int a) {m_i a;retu…...
AI只需26秒，就可以设计一款会走路的机器人
由西北大学、麻省理工学院和佛蒙特大学组成的一支科研团队首次开发出一种可以完全自行设计机器人的 AI 算法。 这一 AI 算法不仅运行速度快，还可在个人计算机上运行，并从头开始设计全新的结构。只需告诉AI“我们想要一个可穿越陆地的机器人”，…...
简单实现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…...
详解)
STM32 HAL库函数——HAL_TIM_Base_Start_IT()详解
以STM32G030C8T6中的HAL_TIM_Base_Start_IT()函数为例，进行解释； 文章目录 一、函数原型和源代码二、函数用法详解：2.1 参数2.1.1 TIM_HandleTypeDef结构体详解 2.2 使用场景：2.3 使用方法： 三、函数使用示例ÿ…...
C语言之通讯录的实现篇优化版
目录 动态内存管理 通讯录声明 静态版本 动态版本 初始化通讯录 静态版本 动态版本 Add增加通讯录 静态版本 动态版本 Checkcapacity增容 DestroyContact释放动态空间 文件操作 SaveContact保存信息到文件中 初始化通讯录 旧版本 文件版本 LoadContact加载…...
C++17中std::string_view的使用
为了解决std::string初始化(或拷贝)成本高昂的问题，C17引入了std::string_view。std::string_view提供对现有字符串(C风格字符串、std::string、或另一个std::string_view)的只读访问，而无需进行拷贝。当想要有效地处理和操作字符串而不修改它们时&#…...
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…...
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…...
【Java 进阶篇】Java XML约束：确保数据一致性和有效性
XML（可扩展标记语言）是一种常用的数据交换格式，用于存储和交换数据。然而，为了确保数据的一致性和有效性，通常需要定义XML约束。XML约束是一种规则集，定义了XML文档的结构、元素、属性和数据类型。本篇博客…...
第一章概述
一、学习目的与要求 本章对软件测试作了概括性的介绍，目的是使学生对软件测试有个初步的认识。通过本章的学习，应使学生掌握软件测试的基本概念，了解软件测试的发展历程和行业现状，掌握软件测试技术的分类，理解软件测试…...
XCode15与iOS17/17.1 真机测试问题处理
XCode15与iOS17/17.1 真机测试问题处理，网上相关博客很多，摘录了如下实践后能起作用的地址如下：Xcode 15 报错处理 - 简书iOS17版本适配-CSDN博客 Xcode15适配-六虎 主要介绍下：Assertion failure in void _UIGraphicsBeginImag…...
League Toolkit：英雄联盟客户端全功能工具集深度解析
League Toolkit：英雄联盟客户端全功能工具集深度解析 【免费下载链接】League-Toolkit An all-in-one toolkit for LeagueClient. Gathering power 🚀. 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit League Toolkit 是一款基于 E…...
【AIAgent智能家居控制实战指南】：SITS2026一线工程师亲授3大落地陷阱与5步零代码接入法
第一章：SITS2026分享：AIAgent智能家居控制 2026奇点智能技术大会(https://ml-summit.org) 在SITS2026现场，AIAgent智能家居控制系统展示了多模态意图理解与分布式设备协同执行能力。该系统基于轻量化LLM推理引擎与本地化设备抽象层…...
智能模型视图呈现器员中的视图逻辑与数据绑定
智能模型视图呈现器是现代软件开发中的核心组件，它通过动态绑定数据与视图逻辑，实现了用户界面的高效渲染与交互。在复杂的应用场景中，视图呈现器不仅需要处理数据的实时更新，还需确保逻辑与界面的无缝衔接。本文将深入探讨其核心…...
深入解析osgearth加载3dtiles的实现原理与性能优化
1. osgearth与3DTiles技术初探 第一次接触osgearth加载3DTiles数据时，我完全被它的效果震撼到了。想象一下，你可以在一个虚拟地球场景中流畅地浏览城市级别的建筑模型，就像在玩3A游戏大作一样。这种体验背后，正是osgearth和3DTile…...
SpringBoot集成Tika实现高效文件类型安全校验
1. 为什么文件类型校验如此重要？ 记得去年我们团队接手过一个企业文档管理系统项目，客户反馈系统频繁出现存储空间异常爆满的情况。排查后发现，有用户将10GB的视频文件改名为"季度报表.pdf"上传，导致服务器磁盘空间被恶…...
C 语言面向对象风格封装的经典技巧（STM32F1 标准库实现）
“把函数装进结构体，把结构体装进函数”是 C 语言中实现 面向对象风格封装 的经典技巧。它通过结构体容纳函数指针（模拟“方法”），再通过一个工厂函数返回该结构体的实例（模拟“对象”），从而将数…...
深入解析Strapi中的媒体处理
引言 在现代Web开发中，内容管理系统（CMS）扮演着至关重要的角色。Strapi，作为一个开源的无头CMS，提供了强大的API功能来管理和展示内容。然而，初学者在使用Strapi时可能会遇到一些常见的问题，特别是在处理媒体文件方面。本文将通过一个实际案例，详细解释Strapi如何处理…...
《信息系统项目管理师教程（第4版）》监控项目工作（监控过程组）知识结构+10道真题
《信息系统项目管理师教程（第4版）》监控项目工作（监控过程组）知识结构及真题一、监控项目工作（监控过程组）知识结构1. 监控项目工作概述定义：跟踪、审查和报告项目进展，以实现项目管…...
BarrageGrab：构建15+平台实时直播数据采集的WebSocket直连架构
BarrageGrab：构建15平台实时直播数据采集的WebSocket直连架构 【免费下载链接】BarrageGrab 抖音快手bilibili直播弹幕wss直连，非系统代理方式，无需多开浏览器窗口 项目地址: https://gitcode.com/gh_mirrors/ba/BarrageGrab 在直播电…...
5分钟快速上手：MelonLoader Unity游戏模组加载器终极指南
5分钟快速上手：MelonLoader Unity游戏模组加载器终极指南 【免费下载链接】MelonLoader The Worlds First Universal Mod Loader for Unity Games compatible with both Il2Cpp and Mono 项目地址: https://gitcode.com/gh_mirrors/me/MelonLoader 你是否想为…...