日期时间显示网页

SweetOrange_Clock 🕘


在这里插入图片描述

一、简介


1、这个项目包括一个HTML文件,其中包含页面的样式和脚本。

2、页面以优雅的黑白配色为主题,突出了实用性和视觉冲击力,使得显示内容在视觉上更为突出和易于阅读。

3、这是一个日期时间显示器。通过显示当前的日期、时间提供在网页上查看实时日期时间信息的功能。

4、包含一个全屏按钮,以便在全屏模式下查看。

二、使用方法


💻端浏览器访问:[SweetOrange_Clock](https://sweetorange2022.github.io/SweetOrange_Clock/ )

1、点击页面底部的“全屏”按钮,页面将进入全屏模式。

2、在全屏模式下,您可以继续查看当前的日期、时间和倒计时。按钮还在同一位置,但是全屏下鼠标未经过按钮时候按钮会隐藏,提升观感。

3、要退出全屏模式,请按Esc键或再次点击按钮。

非常建议收藏做壁纸 💯

三、附代码

<!DOCTYPE html>
<html manifest="index.appcache">
<head>
<meta name="description" content="Web Clock">
<meta name="author" content="sweetorange2021@163.coml.com">
<meta name="web-clock" content="yes">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--link rel="apple-touch-icon" href="clock.png" /-->
<title>甜橙的时钟</title><style>
* {box-sizing: border-box;}
#line1 {font-size:3vw; text-align:center; font-family:arial black, Arial, Helvetica, sans-serif; width:100%; height:100%;}
#line2 {font-size:17vw; line-height:95%; text-align:center; font-family:arial black, Arial, Helvetica, sans-serif; width:100%; height:100%}
#line3 {font-size:10vw; text-align:center; font-family:arial black, Arial, Helvetica, sans-serif;}
body {margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;}
div  {margin-top: 20px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;}
</style>
</head><body onload="color();topofpage()">
<div id="line1" onclick="color();"> </div>
<div id="line2" onclick="color();"> </div>
<div id="line3" onclick="color();">
<canvas id="clockcanvas" width="360" height="360" style="background-color=#d1d4c2"></canvas></div>
</body><script style="LEFT:-180px; WIDTH: 800px; POSITION: relative; TOP: 90px">
var myVar = setInterval(function(){digitalclockTime()},1000);
var colorindex=0;var canvas = document.getElementById("clockcanvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.80
setInterval(function(){drawClock(ctx,radius)}, 1000);function drawClock() {drawFace(ctx, radius);drawNumbers(ctx, radius);minticks();hourticks();//minticks(ctx, radius);drawTime(ctx, radius);
}function drawFace(ctx, radius) {var grad;// Clock Facectx.beginPath();ctx.arc(0, 0, radius, 0, 2*Math.PI);ctx.fillStyle = "white";ctx.fill();// Inner Bezelctx.beginPath();ctx.lineWidth = 16;ctx.arc(0, 0, radius+8, 0, 2*Math.PI);ctx.strokeStyle = "#e5e5e5";ctx.stroke();// Outer bezelctx.beginPath();ctx.lineWidth = 8;ctx.arc(0, 0, radius+20, 0, 2*Math.PI);ctx.strokeStyle = "c1c1c1";ctx.stroke();// Circle in center of clock for handsctx.beginPath();ctx.arc(0, 0, radius*0.08, 0, 2*Math.PI);ctx.fillStyle = '#333';ctx.fill();
}function drawNumbers(ctx, radius) {var ang;var num;ctx.font = radius*0.25 + "px arial black";ctx.textBaseline="middle";ctx.textAlign="center";for(num = 1; num < 13; num++){ang = num * Math.PI / 6;ctx.rotate(ang);ctx.translate(0, -radius*0.79);ctx.rotate(-ang);ctx.fillText(num.toString(), 0, 0);ctx.rotate(ang);ctx.translate(0, radius*0.79);ctx.rotate(-ang);}
}function minticks() {for (var i = 0; i < 60; i++) {var length=8;var angle = (i - 3) * (Math.PI * 2) / 60;ctx.lineWidth = 2;ctx.beginPath();var x1 = Math.cos(angle) * (radius);var y1 = Math.sin(angle) * (radius);var x2 = Math.cos(angle) * (radius-length);var y2 = Math.sin(angle) * (radius-length);ctx.moveTo(x1, y1);ctx.lineTo(x2, y2);ctx.strokeStyle = '#466B76';ctx.stroke();}
}function hourticks() {for (var i = 0; i < 12; i++) {var length=8;ctx.lineWidth = 5;var angle = (i - 3) * (Math.PI * 2) / 12;ctx.beginPath();var x1 = Math.cos(angle) * (radius);var y1 = Math.sin(angle) * (radius);var x2 = Math.cos(angle) * (radius-length);var y2 = Math.sin(angle) * (radius-length);ctx.moveTo(x1, y1);ctx.lineTo(x2, y2);ctx.strokeStyle = '#466B76';ctx.stroke();}
}function drawTime(ctx, radius){var now = new Date();var hour = now.getHours();var minute = now.getMinutes();var second = now.getSeconds();//hourhour=hour%12;hour=(hour*Math.PI/6)+    (minute*Math.PI/(6*60))+    (second*Math.PI/(360*60));drawHand(ctx, hour, radius*0.5, radius*0.07, "black");//minuteminute=(minute*Math.PI/30)+(second*Math.PI/(30*60));drawHand(ctx, minute, radius*0.8, radius*0.07, "black");// secondsecond=(second*Math.PI/30);drawHand(ctx, second, radius*0.92, radius*0.02, "red");
}function drawHand(ctx, pos, length, width, color) {ctx.beginPath();ctx.strokeStyle = color;ctx.lineWidth = width;ctx.lineCap = "round";ctx.moveTo(0,0);ctx.rotate(pos);ctx.lineTo(0, -length);ctx.stroke();ctx.rotate(-pos);
}var fg1=['white'];
var bg1=['black'];function digitalclockTime()
{
var today = new Date();var datestr = new Date().toDateString();
var todayarray=today.toString().split(" ");var tm=todayarray[4];//时间
var gt=todayarray[5];//时区
var tz=today.toString().split("(");
var hour=today.getHours();
var min=today.getMinutes();
if (min < 10) {min = "0"+min};
//write data to 3 div lines
document.getElementById('line1').innerHTML=todayarray[3]+" 年 "+(today.getMonth()+1)+" 月 "+todayarray[2]+" 日";
document.getElementById('line2').innerHTML=tm;//t=setTimeout(function(){clockTime()},500);
}
function color() {document.getElementById("line1").style.color=fg1[colorindex];document.getElementById("line1").style.backgroundColor=bg1[colorindex];document.getElementById("line2").style.color=fg1[colorindex];document.getElementById("line2").style.backgroundColor=bg1[colorindex];document.getElementById("clockcanvas").style.backgroundColor=bg1[colorindex];document.body.style.background = bg1[colorindex];}// 全屏切换代码
var FullscreenFlag = false;
$('#toggle-fullscreen').click(function () {if (FullscreenFlag) {ExitFullscreen();$(this).attr('title','全屏显示');$(this).html('<i class="fa fa-expand"></i>');FullscreenFlag = false;} else {EnterFullscreen();$(this).attr('title','退出全屏');$(this).html('<i class="fa fa-compress"></i>');FullscreenFlag = true;}
});</script>
</html>

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

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

相关文章

高通源代码版本ADK工具版本源代码release版本MDE版本介绍

0 Preface/Foreword 1 版本介绍 高通代码存放在chipcode中&#xff0c;网址URL&#xff1a;Chipcode 1.1 高通源代码版本 Bluetooth Audo芯片的高通源代码版本号&#xff08;类似于分类的类名&#xff09;&#xff1a;ADK.SRC.1.0 &#xff08;最新qcc307x系列及之后的芯片如…

Pycharm安装依赖

1. IDE集成的错误解决 鼠标悬停,点击 install 2. 配置环境 ctrlalts 3. 终端运行pip (要求有先有一个pip) 最好用最简单

NSE and KGE

NSE&#xff08;Nash-Sutcliffe Efficiency&#xff09;&#xff1a; 解释&#xff1a;NSE 是衡量水文模型模拟结果与观测值之间拟合程度的指标。它计算模拟值与观测值之间的均方误差&#xff0c;并将其与观测值的方差进行比较。NSE 的取值范围为-∞至 1&#xff0c;值越接近 1…

切片的基础知识

文章目录 ● Slice 的底层实现原理&#xff1f;● array 和 Slice 的区别&#xff1f;● 拷贝大切片一定比小切片代价大吗&#xff1f;● Slice 深拷贝和浅拷贝&#xff1f;● 零切片、空切片、nil切片&#xff1f;● Slice 的扩容机制&#xff1f;● Slice 为什么不是线程安全…

WCCI 2024开幕,横滨圣地巡礼,畅游动漫与美食的世界

惊喜&#xff01;WCCI 2024开幕&#xff0c;横滨圣地巡礼&#xff01;畅游动漫与美食的世界 会议之眼 快讯 会议介绍 IEEE WCCI&#xff08;World Congress on Computational Intelligence&#xff09;2024&#xff0c;即2024年IEEE世界计算智能大会&#xff0c;于6月30日至…

windows USB 设备驱动开发-Host端和Device端

Windows 中的 USB 宿主端驱动程序 下图显示了适用于 Windows 的 USB 驱动程序堆栈的体系结构框图。 此图显示了适用于 USB 2.0 和 USB 3.0 的单独 USB 驱动程序堆栈。 当设备连接到 xHCI 控制器时&#xff0c;Windows 加载 USB 3.0 驱动程序堆栈。 Windows 为连接到 EHCI、OHC…

星辰计划01-动态代理

会话1: 什么是动态代理? &#x1f467; 什么是代理啊&#xff1f;&#x1f468;来来来&#xff0c;听我细细来说 代理这个词在不同的上下文中有不同的含义&#xff0c;主要可以归纳为以下几类解释&#xff1a; 计算机网络中的代理服务器&#xff08;Proxy Server&#xff0…

跨平台Ribbon UI组件QtitanRibbon全新发布v6.7.0——支持Qt 6.6.3

没有Microsoft在其办公解决方案中提供的界面&#xff0c;就无法想象现代应用程序&#xff0c;这个概念称为Ribbon UI&#xff0c;目前它是使应用程序与时俱进的主要属性。QtitanRibbon是一款遵循Microsoft Ribbon UI Paradigm for Qt技术的Ribbon UI组件&#xff0c;QtitanRibb…

Linux_生产消费模型_Block_Queue

目录 一、互斥锁 1.1 错误的抢票 1.1.1 类的成员函数与构造 1.1.2 start 函数 1.1.3 线程的回调函数 1.1.4 main 函数 1.1.5 结果 1.2 概念 1.3 相关系统调用 1.3.1 锁的创建 1.3.2 锁的初始化 1.3.2.1 动态初始化 1.3.2.2 静态初始化 1.3.3 锁的销毁 1.3.4…

看不懂懂车大爆炸,你就错过了国产小车的王炸!

咦&#xff1f;咋的啦&#xff1f;咱中国自己的汽车品牌前几天在汽车工业协会公布的数据里一跃而起&#xff0c;真的是威风凛凛啊&#xff01;2023年咱们自家的乘用车品牌市场份额硬生生地占了个56%&#xff0c;这可是半壁江山啊&#xff01;特别是那些10万块钱以下的家用小车&…

32.哀家要长脑子了!

1.299. 猜数字游戏 - 力扣&#xff08;LeetCode&#xff09; 公牛还是挺好数的&#xff0c;奶牛。。。妈呀&#xff0c;一朝打回解放前 抓本质抓本质&#xff0c;有多少位非公牛数可以通过重新排列转换公牛数字&#xff0c;意思就是&#xff0c;当这个数不是公牛数字时&#x…

C++多态~~的两个特殊情况

目录 1.多态的概念 2.简单认识 &#xff08;1&#xff09;一个案例 &#xff08;2&#xff09;多态的两个满足条件 &#xff08;3&#xff09;虚函数的重写 &#xff08;4&#xff09;两个特殊情况 1.多态的概念 &#xff08;1&#xff09;多态就是多种形态&#xff1b; …

SQL 29 计算用户的平均次日留存率题解

问题截图如下&#xff1a; SQL建表代码&#xff1a; drop table if exists user_profile; drop table if exists question_practice_detail; drop table if exists question_detail; CREATE TABLE user_profile ( id int NOT NULL, device_id int NOT NULL, gender varchar…

小白也能懂:逆向分析某网站加速乐Cookie参数流程详解

加速乐作为一种常见的反爬虫技术&#xff0c;在网络上已有大量详尽深入的教程可供参考。然而&#xff0c;对于那些初次接触的人来说&#xff0c;直接面对它可能仍会感到困惑。 声明 本文仅用于学习交流&#xff0c;学习探讨逆向知识&#xff0c;欢迎私信共享学习心得。如有侵权…

【区块链+基础设施】珠三角征信链 | FISCO BCOS应用案例

“珠三角征信链”是中国人民银行广州分行、中国人民银行深圳市中心支行按照中国人民银行总行工作部署&#xff0c;积 极贯彻珠三角一体化发展、粤港澳大湾区建设等国家战略而建设的跨区域征信一体化数据中心枢纽&#xff0c;以 FISCO BCOS 为底链构建应用平台&#xff0c;并由微…

springboot接口防抖【防重复提交】

什么是防抖 所谓防抖&#xff0c;一是防用户手抖&#xff0c;二是防网络抖动。在Web系统中&#xff0c;表单提交是一个非常常见的功能&#xff0c;如果不加控制&#xff0c;容易因为用户的误操作或网络延迟导致同一请求被发送多次&#xff0c;进而生成重复的数据记录。要针对用…

Docker 镜像导出和导入

docker 镜像导出 # 导出 docker 镜像到本地文件 docker save -o [输出文件名.tar] [镜像名称[:标签]] # 示例 docker save -o minio.tar minio/minio:latest-o 或 --output&#xff1a;指定导出文件的路径和名称[镜像名称[:标签]]&#xff1a;导出镜像名称以及可选的标签 dock…

【Python画图-驯化01】一文叫你搭建python画图最优环境配置

【Python画图-循环01】一文叫你搭建python画图最优环境配置 本次修炼方法请往下查看 &#x1f308; 欢迎莅临我的个人主页 &#x1f448;这里是我工作、学习、实践 IT领域、真诚分享 踩坑集合&#xff0c;智慧小天地&#xff01; &#x1f387; 免费获取相关内容文档关注&#…

Windows/Linux/Mac 系统局域网服务发现协议及传输速度比较

简介 分析 / 验证对比常见局域网服务发现协议在 Windows/Linux/Mac 等不同系统下的支持和表现 在使用不同系统的智能硬件时&#xff0c;如常见的树莓派 / Openwrt 路由器 / Debian/Fedora/Windows/Mac 等系统是&#xff0c;系统间相互发现以及网络共享本应是系统的基础服务&a…

探秘 Django 专业之道

一、Django项目开发 1.web框架底层 1.1 网络通信 注意&#xff1a;局域网 个人一般写程序&#xff0c;想要让别人访问&#xff1a;阿里云、腾讯云。 去云平台租服务器&#xff08;含公网IP&#xff09;程序放在云服务器 先以局域网为例 我的电脑【服务端】 import sock…