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.mzph.cn/news/116965.shtml

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

相关文章

功能基础篇8——图形用户界面

功能基础篇8——图形用户界面

图形用户界面 Graphics User Interface&#xff0c;GUI&#xff0c;图形用户界面 Ubuntu GUI Command Line Interface&#xff0c;CLI&#xff0c;命令行界面 Centos CLI tkinter GUI&#xff0c;Python标准库 from tkinter import ttk, Tkroot Tk() frm ttk.Frame(…
阅读更多...
Appium移动端自动测试框架，如何入门？

Appium移动端自动测试框架，如何入门？

Appium是一个开源跨平台移动应用自动化测试框架。 既然只是想学习下Appium如何入门&#xff0c;那么我们就直奔主题。文章结构如下&#xff1a; 1、为什么要使用Appium&#xff1f; 2、如何搭建Appium工具环境?(超详细&#xff09; 3、通过demo演示Appium的使用 4、Appium如何…
阅读更多...
[Ubuntu 18.04] 搭建文件夹共享之Samba服务器

[Ubuntu 18.04] 搭建文件夹共享之Samba服务器

Samba是一个开源项目，允许Windows用户在Linux和Unix系统上进行文件共享。 Samba服务器是一个可以让Linux或Unix系统在网络上充当Windows NT/2000/XP/2003等网络操作系统的共享资源的软件。它允许用户通过SMB/CIFS协议在Linux或Unix系统与Windows共享资源。 Samba服务器的主要…
阅读更多...
EtherCAT从站转modbus RTU协议转换网关用modbus slave测试的方法

EtherCAT从站转modbus RTU协议转换网关用modbus slave测试的方法

远创智控YC-ECT-RTU通讯网关具有EtherCAT从站功能&#xff0c;主要功能是将EtherCAT网络和Modbus-RTU网络连接起来。在使用方面&#xff0c;本网关可以连接到EtherCAT总线中作为从站使用&#xff0c;也可以连接到Modbus-RTU总线中作为主站或从站使用。这款通讯网关还支持多种不…
阅读更多...
c++ qt连接操作sqlite

c++ qt连接操作sqlite

qt客户端编程，用到数据库的场景不多，但是部分项目还是需要数据库来保存同步数据，客户端用到的数据库，一般是sqlite。 Qt提供了数据库模块，但是qt本身的数据库模块并不好用，会有各种问题, 建议大家不要，可以自己封装数据库的操作。本篇博客介绍qt连接操作sqlite。 sqlit…
阅读更多...
nmp、yarn、yeoman、bower是什么东西？

nmp、yarn、yeoman、bower是什么东西？

1&#xff1a;npm&#xff08;Node Package Manager&#xff09;&#xff1a;npm 是 Node.js 的包管理器&#xff0c;用于安装、管理和共享 JavaScript 包。它是 JavaScript 生态系统中最常用的包管理工具&#xff0c;可以轻松地安装和管理项目的依赖项。 2&#xff1a;Yarn&a…
阅读更多...
apk反编译修改教程系列-----任意修改apk版本号 版本名 防止自动更新【二】

apk反编译修改教程系列-----任意修改apk版本号 版本名 防止自动更新【二】

往期教程 apk反编译修改教程系列-----修改apk应用名称 任意修改名称 签名【一】 上期演示了下如何修改apk的名称。相信只要用心的友友都会操作了。这次讲解下如何修改软件的版本号与版本名字的操作 名词浅释&#xff1a; 在apk反编译中的VersionCode---是版本号的意思.是一…
阅读更多...
基于斑点鬣狗算法的无人机航迹规划-附代码

基于斑点鬣狗算法的无人机航迹规划-附代码

基于斑点鬣狗算法的无人机航迹规划 文章目录 基于斑点鬣狗算法的无人机航迹规划1.斑点鬣狗搜索算法2.无人机飞行环境建模3.无人机航迹规划建模4.实验结果4.1地图创建4.2 航迹规划 5.参考文献6.Matlab代码 摘要&#xff1a;本文主要介绍利用斑点鬣狗算法来优化无人机航迹规划。 …
阅读更多...
Java 基础 面试 多线程

Java 基础 面试 多线程

1.多线程 1.1 线程&#xff08;Thread&#xff09; 线程时一个程序内部的一条执行流程&#xff0c;java的main方法就是由一条默认的主线程执行 1.2 多线程 多线程是指从软硬件上实现的多条执行流程的技术&#xff08;多条线程由CPU负责调度执行&#xff09; 许多平台都离不开多…
阅读更多...
动手学深度学习—网络中的网络NiN（代码详解）

动手学深度学习—网络中的网络NiN（代码详解）

目录 1. NiN块2. NiN模型3. 训练模型 LeNet、AlexNet和VGG都有一个共同的设计模式&#xff1a; 通过一系列的卷积层与汇聚层来提取空间结构特征&#xff1b;然后通过全连接层对特征的表征进行处理。 如果在过程的早期使用全连接层&#xff0c;可能会完全放弃表征的空间结构。 …
阅读更多...
Day 1 Vue 页面框架

Day 1 Vue 页面框架

现在前端框架越来越像后端了&#xff0c;特别是TypeScript这样的语言出现后&#xff0c;开发前端的体验跟后端渐渐接近了。当然&#xff0c;作为一个后端&#xff0c;直接上手前端&#xff0c;还是有很多坑要填的。 本次开发&#xff0c;前端页面框架直接选择Vue。原因很简单&…
阅读更多...
深入浅出排序算法之归并排序

深入浅出排序算法之归并排序

目录 1. 归并排序的原理 1.1 二路归并排序执行流程 2. 代码分析 2.1 代码设计 3. 性能分析 4. 非递归版本 1. 归并排序的原理 “归并”一词的中文含义就是合并、并入的意思&#xff0c;而在数据结构中的定义是将两个或者两个以上的有序表组合成一个新的有序表。 归并排序…
阅读更多...
Python-pptx教程之一从零开始生成PPT文件

Python-pptx教程之一从零开始生成PPT文件

简介 python-pptx是一个用于创建、读取和更新PowerPoint&#xff08;.pptx&#xff09;文件的python库。 典型的用途是根据动态内容&#xff08;如数据库查询、分析数据等&#xff09;&#xff0c;将这些内容自动化生成PowerPoint演示文稿&#xff0c;将数据可视化&#xff0c…
阅读更多...
【IDEA配置】IDEA配置

【IDEA配置】IDEA配置

参考视频&#xff1a;【idea必知必会】优化设置 告别卡顿 1. 显示内存 右击底下空白区域&#xff0c;出现memory indicator内存指示器&#xff0c;点击勾选即可显示。有的是在Settings->Appearance->Window Options里&#xff0c;如图所示&#xff1a; 2. 内存设置 …
阅读更多...
虚拟世界游戏定制开发：创造独一无二的虚拟体验

虚拟世界游戏定制开发：创造独一无二的虚拟体验

在游戏开发领域&#xff0c;虚拟世界游戏定制开发是一项引人注目的任务&#xff0c;旨在满足客户独特的需求和愿景&#xff0c;创造一个完全个性化的虚拟世界游戏。这种类型的游戏开发需要专业的技能、深刻的游戏开发知识和密切的与客户合作&#xff0c;以确保游戏满足客户的期…
阅读更多...
CI2454 2.4g无线MCU芯片应用

CI2454 2.4g无线MCU芯片应用

Ci2454集成MCU芯片 | Ci2454是一款集成无线收发器和 8 位 RISC&#xff08;精简指令集&#xff09;MCU 的SOC芯片。 #Ci2454芯片 集成MCU芯片# 中国芯片# 无线收发器特性&#xff1a; 工作在 2.4GHz ISM 频段 调制方式&#xff1a;GFSK/FSK 数据速率&#xff1a;2Mbps/1Mbps…
阅读更多...
数据库基础（一）【MySQL】

数据库基础（一）【MySQL】

文章目录 安装 MySQL修改密码连接和退出数据库服务器使用 systemctl 管理服务器进程配置数据库从文件角度看待数据库查看连接情况 安装 MySQL 这是在 Linux 中安装 MySQL 的教程&#xff1a;Linux 下 MySQL 安装。本系列测试用的 MySQL 版本是 5.7&#xff0c;机器是 centOS7.…
阅读更多...
LabVIEW中将枚举与条件结构一起使用

LabVIEW中将枚举与条件结构一起使用

LabVIEW中将枚举与条件结构一起使用 枚举是一个具有相应数值的字符串标签型列表。在LabVIEW&#xff08;U8 &#xff0c; U16-默认值和U32&#xff09;中以无符号整数形式应用。 例如&#xff0c;可以有一个枚举保存四个季节&#xff0c;在这种情况下&#xff0c;每个字符串都…
阅读更多...
Go之流程控制大全: 细节、示例与最佳实践

Go之流程控制大全: 细节、示例与最佳实践

引言 在计算机编程中&#xff0c;流程控制是核心的组成部分&#xff0c;它决定了程序应该如何根据给定的情况执行或决策。以下是Go语言所支持的流程控制结构的简要概览&#xff1a; 流程控制类型代码if-else条件分支if condition { } else { }for循环for initialization; con…
阅读更多...
GoLong的学习之路（一）语法之变量与常量

GoLong的学习之路（一）语法之变量与常量

目录 GoLang变量批量声明变量的初始化类型推导短变量声明匿名变量 常量iota&#xff08;特殊&#xff09;&#xff08;需要重点记忆&#xff09; GoLang go的诞生为了解决在21世纪多核和网络化环境越来越复杂的变成问题而发明的Go语言。 go语言是从Ken Thomepson发明的B语言和…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023