SweetOrange_Clock 🕘
一、简介
1. 项目概述
这个项目包含一个 HTML 文件,其中包含页面的样式和脚本。
2. 设计主题
页面以优雅的黑白配色为主题,突出了实用性和视觉冲击力,使显示内容在视觉上更为突出和易于阅读。
3. 功能说明
这是一个日期时间显示器,通过显示当前的日期和时间,提供在网页上查看实时日期时间信息的功能。
4. 全屏模式
页面包含一个全屏按钮,以便在全屏模式下查看。
二、使用方法
💻 端浏览器访问: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.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();
drawTime(ctx, radius);
}
function drawFace(ctx, radius) {
var grad;
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2*Math.PI);
ctx.fillStyle = "white";
ctx.fill();
ctx.beginPath();
ctx.lineWidth = 16;
ctx.arc(0, 0, radius+8, 0, 2*Math.PI);
ctx.strokeStyle = "#e5e5e5";
ctx.stroke();
ctx.beginPath();
ctx.lineWidth = 8;
ctx.arc(0, 0, radius+20, 0, 2*Math.PI);
ctx.strokeStyle = "c1c1c1";
ctx.stroke();
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%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*Math.PI/30)+(second*Math.PI/(30*60));
drawHand(ctx, minute, radius*0.8, radius*0.07, "black");
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};
document.getElementById('line1').innerHTML=todayarray[3]+" 年 "+(today.getMonth()+1)+" 月 "+todayarray[2]+" 日";
document.getElementById('line2').innerHTML=tm;
}
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>