日期时间显示网页

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>