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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/167723.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

SpringBoot+Vue实现AOP系统日志功能

SpringBoot+Vue实现AOP系统日志功能

AOP扫盲&#xff1a;Spring AOP (面向切面编程&#xff09;原理与代理模式—实例演示 logs表&#xff1a; CREATE TABLE logs (id int(11) NOT NULL AUTO_INCREMENT,operation varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT 操作名称,type varchar(255) COLL…
阅读更多...
鸿鹄工程项目管理系统 Spring Cloud+Spring Boot+Mybatis+Vue+ElementUI+前后端分离构建工程项目管理系统项目背景

鸿鹄工程项目管理系统 Spring Cloud+Spring Boot+Mybatis+Vue+ElementUI+前后端分离构建工程项目管理系统项目背景

鸿鹄工程项目管理系统 Spring CloudSpring BootMybatisVueElementUI前后端分离构建工程项目管理系统 1. 项目背景 一、随着公司的快速发展&#xff0c;企业人员和经营规模不断壮大。为了提高工程管理效率、减轻劳动强度、提高信息处理速度和准确性&#xff0c;公司对内部工程管…
阅读更多...
uniapp canvas 无法获取 webgl context 的问题解决

uniapp canvas 无法获取 webgl context 的问题解决

uniapp canvas 无法获取 webgl context 的问题解决 一、问题描述 在 uniapp 中做一个查看监控视频的页面&#xff0c;用到的是 JSMpeg 这个库&#xff0c;原理就是前后台通过 websocket 不断推送新画面内容到前端&#xff0c;前端通过这个 JSMpeg 渲染到前端页面中指定的 can…
阅读更多...
Vue2基础知识（五）插槽

Vue2基础知识（五）插槽

&#x1f48c; 所属专栏&#xff1a;【Vue2】&#x1f600; 作 者&#xff1a;长安不及十里&#x1f4bb;工作&#xff1a;目前从事电力行业开发&#x1f308;目标&#xff1a;全栈开发&#x1f680; 个人简介&#xff1a;一个正在努力学技术的Java工程师&#xff0c;专注基础和…
阅读更多...
如何打造小红书产品差异化，打造产品优势？

如何打造小红书产品差异化，打造产品优势？

其实在当今的时代&#xff0c;我们实质上已经进入到了一个产能过剩的时代&#xff0c;这意味着大量的同质化产品出现在市场上&#xff0c;选择更多了但是选择也更少了。今天为大家分享下如何打造小红书产品差异化&#xff0c;打造产品优势&#xff1f; 下面是一些产品差异化策略…
阅读更多...
动画系统的前世今生（一）

动画系统的前世今生（一）

掐指一算&#xff0c;五年没更新过我的CSDN账号啦&#xff0c;方向也从人工智能变成了计算机图形学&#xff0c;当然也依旧会关注AI的发展&#xff0c;之前在知乎上写了一些文章[传送门]&#xff0c;后续也会逐渐同步到CSDN上&#xff5e; 这个系列将包含五篇文章&#xff0c;内…
阅读更多...
栈和队列相关的OJ题

栈和队列相关的OJ题

1.栈的压入、弹出序列 题目链接 栈的压入、弹出序列_牛客题霸_牛客网 (nowcoder.com) 题目描述 题目给出两个序列&#xff0c;一个是入序列pushV&#xff0c;一个是出序列popV&#xff0c;要求判断是否匹配入栈出栈的规则顺序。 解题思路 可以用数据模拟入栈出栈&#xf…
阅读更多...
SpringBoot使用@Value获取不到yaml中配置的值

SpringBoot使用@Value获取不到yaml中配置的值

在最近的开发中遇到一个问题,使用Value获取yml文件中配置的属性时始终获取不到值,一开始我以为是没有注入的问题,或者没有写setter方法的问题,后来我发现这些都都写了然后开始百度发现获取不到属性值有这么几个原因 获取不到值的原因 1.没有使用Component注解,也就是没有注入…
阅读更多...
技术文档工具『Writerside』抢鲜体验

技术文档工具『Writerside』抢鲜体验

前言 2023 年 10 月 16 日&#xff0c;JetBrains 宣布以早期访问状态推出 Writerside&#xff0c;基于 IntelliJ 平台的 JetBrains IDE&#xff0c;开发人员可使用它编写、构建、测试和发布技术文档&#xff0c;可以作为 JetBrains IDE 中的插件使用&#xff0c;也可以作为独立…
阅读更多...
无论有没有按钮，iPhone都可以进行截屏操作！如何在iPhone上截屏

无论有没有按钮，iPhone都可以进行截屏操作！如何在iPhone上截屏

通过简单的按键组合&#xff0c;可以很容易地将iPhone屏幕的图片捕获到图像文件中&#xff0c;并保存到照片库中。以下是操作方法。 什么是屏幕截图 屏幕截图是指通常包含你在设备屏幕上看到的内容的精确副本的图像。在设备内拍摄的数字屏幕截图通常使用相机拍摄物理屏幕的照…
阅读更多...
Spring容器中同名 Bean 加载策略

Spring容器中同名 Bean 加载策略

&#x1f4e2;&#x1f4e2;&#x1f4e2;&#x1f4e3;&#x1f4e3;&#x1f4e3; 哈喽&#xff01;大家好&#xff0c;我是「奇点」&#xff0c;江湖人称 singularity。刚工作几年&#xff0c;想和大家一同进步&#x1f91d;&#x1f91d; 一位上进心十足的【Java ToB端大厂…
阅读更多...
【vSphere 8 自签名证书】企业 CA 签名证书替换 vSphere Machine SSL 证书Ⅳ—— 替换默认证书

【vSphere 8 自签名证书】企业 CA 签名证书替换 vSphere Machine SSL 证书Ⅳ—— 替换默认证书

目录 博文摘要6. 使用企业 CA 签发的 SSL 证书 替换 vSphere 默认 SSL 证书6.1 确认证书文件6.2 替换默认 vSphere 证书6.3 验证自签名证书6.4 补充说明 关联博文参考资料 博文摘要 博文主要描述了在 vCenter Server 8 上通过实用工具 certificate-manager 将 vSphere 默认 Ma…
阅读更多...
差分时钟与DDR3

差分时钟与DDR3

Zynq上的存储器接口 所有 Zynq-7000 AP芯片上的存储器接口单元包括一个动态存储器控制器和几个 静态存储器接口模块。动态存储器控制器可以用于 DDR3、DDR3L、DDR2 和 LPDDR2。 静态存储器控制器支持一个 NAND 闪存接口、一个 Quad-SPI 闪存接口、一个并行数 据总线和并行 NOR …
阅读更多...
力扣刷题 day52：10-22

力扣刷题 day52：10-22

1.数组拆分 给定长度为 2n 的整数数组 nums &#xff0c;你的任务是将这些数分成 n 对, 例如 (a1, b1), (a2, b2), ..., (an, bn) &#xff0c;使得从 1 到 n 的 min(ai, bi) 总和最大。 返回该 最大总和 。 方法一&#xff1a;排序 #方法一&#xff1a;排序 def arrayPai…
阅读更多...
uniapp开发微信小程序，webview内嵌h5，h5打开pdf地址，解决方案

uniapp开发微信小程序，webview内嵌h5，h5打开pdf地址，解决方案

根据公司要求&#xff0c;让我写一个h5&#xff0c;后续会嵌入到合作公司的微信小程序的webview中&#xff0c;如果是自己公司微信小程序&#xff0c;可以采取先下载下来pdf&#xff0c;然后通过wx.openDocument&#xff0c;进行单纯的预览操作&#xff0c;这个可以根据这个老哥…
阅读更多...
工具让公众号推送变得轻而易举

工具让公众号推送变得轻而易举

公众号运营的关键在于定期向用户推送内容&#xff0c;但手动推送过程繁琐且浪费时间。现在&#xff0c;有了乔拓云公众号助手工具&#xff0c;你可以轻松实现公众号的自动推送功能。让我们一起来看看如何操作吧&#xff01; 首先&#xff0c;你需要注册一个乔拓云公众号助手工具…
阅读更多...
【Rust】4 一文讲解重点 pattern matching | trait | 生命周期 | 闭包 | 迭代器 | 智能指针 | 并发与并行

【Rust】4 一文讲解重点 pattern matching | trait | 生命周期 | 闭包 | 迭代器 | 智能指针 | 并发与并行

文章目录 一、pattern matching二、trait2.1 常见 trait2.1.1 Copy 和 Clone2.1.2 PartialEq 和 Eq2.1.3 PartialOrd 和 Ord2.1.4 Hash2.1.5 From, Into, TryFrom, TryInto 2.2 概念2.2.1 关联类型2.2.2 关联常量2.3.3 泛型关联类型2.3.3.1 示例: 用泛型关联类型, 创建集合工厂…
阅读更多...
【Docker从入门到入土 2】Docker数据管理、网络通信和网络模式 1.0

【Docker从入门到入土 2】Docker数据管理、网络通信和网络模式 1.0

Part2 一、Docker网络模式&#xff08;面试高频&#xff09;1.1 Docker 网络实现原理1.2 host模式1.3 container模式1.4 none模式1.5 bridge模式1.6 自定义网络 二、Docker网络通信2.1 端口映射2.2 容器互联 三、Docker资源控制3.1 Cgroup简介3.2 CPU资源控制3.2.1 设置CPU使用…
阅读更多...
Android C/C++ native编程NDK开发中logcat的使用

Android C/C++ native编程NDK开发中logcat的使用

Android C/C native编程NDK开发中logcat的使用 前言具体用法 前言 在NDK开发过程中&#xff0c;C/C层&#xff0c;需要对代码进行一些调试&#xff0c;日志打印是我们解决异常或崩溃的重要手段&#xff0c;这里我就简单介绍下日志打印三步走。 首先我们先看下官方文档关于日志…
阅读更多...
QSlider 类使用教程

QSlider 类使用教程

文章目录 1、简介2 、公共类型3、属性4、functions4.1、访问属性相关 function4.2、公共槽4.3、Signal4.4、其他方法 5、设置样式 QT 官方文档参考地址&#xff1a;https://doc.qt.io/qt-5/qslider.html 1、简介 QSlider是垂直或水平滑块条控件&#xff0c;最常见的应用就是视…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023