日期时间显示网页

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 Face
  ctx.beginPath();
  ctx.arc(0, 0, radius, 0, 2*Math.PI);
  ctx.fillStyle = "white";
  ctx.fill();
  // Inner Bezel
  ctx.beginPath();
  ctx.lineWidth = 16;
  ctx.arc(0, 0, radius+8, 0, 2*Math.PI);
  ctx.strokeStyle = "#e5e5e5";
  ctx.stroke();
  // Outer bezel
  ctx.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 hands
  ctx.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();
    //hour
    hour=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");
    //minute
    minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
    drawHand(ctx, minute, radius*0.8, radius*0.07, "black");
    // second
    second=(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>

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

数据库定义语言（DDL）

数据库定义语言（DDL）

数据库定义语言&#xff08;DDL&#xff09; 一、数据库操作 1、 查询所有的数据库 SHOW DATABASES;效果截图&#xff1a; 2、使用指定的数据库 use 2403 2403javaee;效果截图&#xff1a; 3、创建数据库 CREATE DATABASE 2404javaee;效果截图&#xff1a; 4、删除数据…
阅读更多...
Supabase 自托管部署实践

Supabase 自托管部署实践

Supabase 是 Firebase 的开源替代品。使用 Postgres 数据库、身份验证、即时 API、边缘函数、实时订阅、存储和向量嵌入来启动您的项目。 Supabase介绍 Supabase 是一个开源的后端即服务&#xff08;BaaS&#xff09;平台&#xff0c;提供了一系列工具和服务&#xff0c;帮助…
阅读更多...
刷代码随想录有感（122）：动态规划——最长子序列

刷代码随想录有感（122）：动态规划——最长子序列

题干&#xff1a; 代码&#xff1a; class Solution { public:int lengthOfLIS(vector<int>& nums) {if(nums.size() < 1)return nums.size();vector<int>dp(nums.size(), 1);int res 0;for(int i 1; i < nums.size(); i){for(int j 0; j < i; j)…
阅读更多...
Windows 10,11 Server 2022 Install Docker-Desktop

Windows 10,11 Server 2022 Install Docker-Desktop

docker 前言 Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中，然后发布到任何流行的 Linux或Windows 机器上，也可以实现虚拟化。容器是完全使用沙箱机制，相互之间不会有任何接口。 docker-compose Compose 是用于定义和运行…
阅读更多...
14-10 AIGC 项目生命周期——第一阶段

14-10 AIGC 项目生命周期——第一阶段

生成式 AI 项目生命周期的整个过程类似于从范围、选择、调整和对齐/协调模型以及应用程序集成开始的顺序依赖过程。流程表明每个步骤都建立在前一步的基础上。有必要了解每个阶段对于项目的成功都至关重要。 下面的流程图重点介绍了生成式 AI 项目生命周期的第一阶段 1 — “范…
阅读更多...
[数据集][目标检测]水面垃圾水面漂浮物检测数据集VOC+YOLO格式3749张1类别

[数据集][目标检测]水面垃圾水面漂浮物检测数据集VOC+YOLO格式3749张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;3749 标注数量(xml文件个数)&#xff1a;3749 标注数量(txt文件个数)&#xff1a;3749 标注…
阅读更多...
问题-小技巧-专业版Win11怎么启动电脑的休眠模式？

问题-小技巧-专业版Win11怎么启动电脑的休眠模式？

专业版Win11怎么启动电脑的休眠模式&#xff1f; powercfg -a powercfg -hibernate on 启用管理员面板依次输入上述命令就可以了。
阅读更多...
Vue基础用法

Vue基础用法

Vue 定义&#xff1a; 是一套前端框架&#xff0c;免除原生JS中的DOM操作&#xff0c;简化书写&#xff0c;基于MVVM&#xff08;Model-View-ViewModel&#xff09;思想&#xff0c;实现数据的双向绑定&#xff0c;将编程的关注点放在数据上。 图来自黑马程序员网课 常用指令&…
阅读更多...
性能测试中的场景设计和测试执行

性能测试中的场景设计和测试执行

假设一个内部系统要求响应时间在 3s 以内&#xff0c;支持最大用户数为4万。根据二八原则&#xff0c;80%用户在20%时间使用系统(4w80%)/(24h20%)≈1.9点击/秒。并发数TPS&#xff08;运行时间思考时间&#xff09;1.9&#xff08;30.50.330.50.30.53&#xff09;21。 注意&am…
阅读更多...
大数据学习之Clickhouse

大数据学习之Clickhouse

Clickhouse-23.2.1.2537 学习 一、Clickhouse概述 clickhouse 官网网址&#xff1a;https://clickhouse.com/ ClickHouse是一个用于联机分析(OLAP)的列式数据库管理系统(DBMS)。 OLTP(联机事务处理系统)例如mysql等关系型数据库&#xff0c;在对于存储小数据量的时候&#xff…
阅读更多...
【论文复现|智能算法改进】基于自适应动态鲸鱼优化算法的路径规划研究

【论文复现|智能算法改进】基于自适应动态鲸鱼优化算法的路径规划研究

目录 1.算法原理2.改进点3.结果展示4.参考文献5.代码获取 1.算法原理 SCI二区|鲸鱼优化算法&#xff08;WOA&#xff09;原理及实现【附完整Matlab代码】 2.改进点 非线性收敛因子 WOA 主要通过控制系数向量 A 来决定鲸鱼是搜索猎物还是捕获猎物&#xff0c;即系数向量 A 可…
阅读更多...
C语言部分复习笔记

C语言部分复习笔记

1. 指针和数组 数组指针 和 指针数组 int* p1[10]; // 指针数组int (*p2)[10]; // 数组指针 因为 [] 的优先级比 * 高&#xff0c;p先和 [] 结合说明p是一个数组&#xff0c;p先和*结合说明p是一个指针 括号保证p先和*结合&#xff0c;说明p是一个指针变量&#xff0c;然后指…
阅读更多...
适用于高海拔地区的工业路由器产品

适用于高海拔地区的工业路由器产品

1、西藏背景 西藏&#xff0c;这个位于中国西南部的神秘之地&#xff0c;以其雄伟壮观、神奇瑰丽的自然风光和深厚的文化底蕴&#xff0c;被无数人视为心中的圣地。这里属于高原性气候&#xff0c;具有气温低、气压低&#xff0c;降水少&#xff0c;生态环境十分恶劣。西藏被誉…
阅读更多...
Coze搭建《测测你的本命宠物》

Coze搭建《测测你的本命宠物》

前言 本文讲解如何从零开始&#xff0c;使用扣子平台去搭建《测测你的本命宠物》 《测测你的本命宠物》&#xff1a;测测你的本命宠物 - 扣子 AI Bot (coze.cn) 欢迎大家去体验一下&#xff01;&#xff01;&#xff01; 正文 接下来我们开始讲解制作这个bot的流程吧&#…
阅读更多...
【后端面试题】【中间件】【NoSQL】MongoDB的优点和分片机制

【后端面试题】【中间件】【NoSQL】MongoDB的优点和分片机制

为什么要用MongoDB 两个关键&#xff1a;灵活性和横向扩展能力 MongoDB是灵活的文档模型&#xff0c;也就是说&#xff0c;如果预计我的数据可以被一个稳定的模型来描述&#xff0c;会倾向于使用MySQL等关系型数据库。而一旦我认为我的数据模型会经常变动&#xff0c;比如我很…
阅读更多...
Jenkins接口自动化项目的工程创建

Jenkins接口自动化项目的工程创建

jenkins的下载安装 jenkins下载的官网地址 https://www.jenkins.io/download/ java环境变量的配置下载 jenkins是用java语言编写的所以要配置java环境 需要安装java的JDK 推荐安装JDK17(https://blog.csdn.net/wochunyang/article/details/138520209) JDK17的下载地址 ht…
阅读更多...
CS144 Lab3 TCPSender复盘

CS144 Lab3 TCPSender复盘

一.基础概念 1.TCPSender在TCPSocket中的地位与作用 Lab0中实现了基于内存模拟的流控制-字节流&#xff08;ByteStream&#xff09;&#xff0c;底层使用std::deque实现&#xff0c;根据最大容量Capacity进行容量控制。个人理解它相当于应用层的输入输出缓存区&#xff0c;用户…
阅读更多...
什么是电航空插头插座连接器有什么作用

什么是电航空插头插座连接器有什么作用

航空插头概述 定义与功能 航空插头&#xff0c;又称航空连接器&#xff0c;是一种专门用于航空领域的电连接器&#xff0c;因其最初在航空领域得到广泛应用而得名。航空插头的主要功能是实现电源或信号的连接&#xff0c;尤其适用于芯数较多、结构复杂的线束连接&#xff0c;…
阅读更多...
QT在VS环境中使用，控件显示中文乱码解决方法

QT在VS环境中使用，控件显示中文乱码解决方法

首先来看乱码显示的效果如下&#xff1a; 上图左侧显示内容为中文&#xff0c;控件对应代码如下&#xff1a; QLabel* UserNameLabel new QLabel(QString("用户名&#xff1a;")); QLabel* NameLabel new QLabel(tr("姓名&#xff1a;"));下面我们对QL…
阅读更多...
实现高效全自动印刷：直线模组的智能化应用

实现高效全自动印刷：直线模组的智能化应用

目前&#xff0c;直线模组被广泛应用于移载、定位、喷涂、夹取、搬运、点胶、涂胶、封胶、移载、装配、检测测量、切割、上下料、钻孔、焊接、等自动化行业中&#xff0c;尤其是自动印刷行业&#xff0c;跟直线模组也是息息相关的。那么&#xff0c;如何利用直线模组实现全自动…
阅读更多...
最新文章

Copyright @ 2022~2023