技术工具箱 | 二：一个实时显示日期时间的网页实现（可做屏保）

甜橙の学习笔记

已于 2024-07-14 23:18:10 修改

阅读量532

点赞数 5

分类专栏：技术工具箱：这些小工具让学习、办公更轻松高效！文章标签： html git

于 2024-07-01 21:38:11 首次发布

本文链接：https://blog.csdn.net/sweetorange_/article/details/140110458

版权

技术工具箱：这些小工具让学习、办公更轻松高效！专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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>