HTML页面显示时间——网页数字时钟、钟表

article/2025/9/30 15:07:57

HTML页面显示时间——网页数字时钟、钟表

一个HTML网页上动态显示系统时间，可以使用javascript的Date对象，在javascript中new 一个date对象，并且根据这个date对象获取相应的时间日期的具体日期时间，比如 年 月 日 时分秒，星期等信息。

下面从简单到复杂给出一些示例。

示例1，效果如下：

源码如下：

<html>
<head>
<meta charset="UTF-8">
<title>实时显示系统时间B</title><script>function  getD1(){var date=new Date();var d1=date.toLocaleString();document.getElementById("datetime").innerHTML =d1; }setInterval("getD1();",1000);</script> 
</head>
<body  onload = getD1()>
<div id="datetime">/div></body>
</html>

示例2，效果如下：

源码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>实时显示系统时间C</title>
<script>var i=0;function myDate(){var now=new Date();var year=now.getFullYear();var month=now.getMonth()+1;var day=now.getDate();var hours=now.getHours();var minutes=now.getMinutes();var seconds=now.getSeconds();document.getElementById("div").innerHTML=year+"年"+month+"月"+day+"日"+hours+"："+minutes+"："+seconds;}setInterval(myDate,1000);
</script>
</head>
<body>
<div id="div"></div>
</body>
</html>

示例3，效果如下：

源码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态时钟</title>
<style>
#clock{margin:100px auto;border: 5px double green;width: 400px;height: 100px;line-height: 100px;text-align: center;font: bold;color: red;
}
</style>
<script>
function showTime(clock){var now = new Date();var year = now.getFullYear();var month= now.getMonth();var day = now.getDate();var hour = now.getHours();var minu = now.getMinutes();var second = now.getSeconds();month = month+1;var arr_work = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");var week = arr_work[ now.getDay()];var time = year+"年"+month+"月"+day+"日 "+ week+" "+hour+":"+minu+":"+second;clock.innerHTML="当前时间: "+time;
}
window.onload = function(){var clock = document.getElementById("clock");window.setInterval("showTime(clock)",1000);}
</script>
</head>
<body>
<div id ="clock"></div>
</body>
</html>

示例4，效果如下：

源码如下：

<!DOCTYPE html>
<html><head><meta  charset=UTF-8"><title>动态显示当前时间的钟表</title></head><style>canvas{border: 1px solid black;}</style><script>(function(){//cavas元素对象var canvas=null;//canvas的3d上下文var ctx=null;//cavan的尺寸var cw=0;var ch=0;/*** 页面导入时的事件处理*/window.addEventListener("load",function(){canvas=document.getElementById("sample");ctx=canvas.getContext("2d");cw=parseInt(canvas.width);ch=parseInt(canvas.height);ctx.translate(cw/2, ch/2);//绘制时钟draw_watch();},false);  /*** 绘制时钟*/function draw_watch(){//清空Canvasctx.clearRect(-cw/2,-ch/2,cw,ch);//计算针的最大长度var len=Math.min(cw, ch)/2;//绘制刻度盘var tlen=len*0.85;ctx.font="14px 'Arial'";ctx.fillStyle="black";ctx.textAlign="center";ctx.textBaseLine="middle";for(var i=1; i<=12; i++){var tag1=Math.PI*2*(3-i)/12;var tx=tlen * Math.cos(tag1);var ty=-tlen * Math.sin(tag1);ctx.fillText(i,tx,ty);}//获取当前的时分秒var d=new Date();var h=d.getHours();var m=d.getMinutes();var s=d.getSeconds();if(h >12 ){h=h-12;}//绘制时针var angle1 = Math.PI * 2 *(3 - (h+ m/60))/12;var length1=len * 0.5;var width1=5;var color1="#000000";drawhand(angle1,length1,width1,color1);//绘制分针var angle2 = Math.PI * 2 *(15 - (m+ s/60))/60;var length2=len * 0.7;var width2=3;var color2="#555555";drawhand(angle2,length2,width2,color2);//绘制秒针var angle3 = Math.PI * 2 *(15 - s)/60;var length3=len * 0.8;var width3=1;var color3="#aa0000";drawhand(angle3,length3,width3,color3);//设置timersetTimeout(draw_watch,1000);}/*** 针绘制函数*/function drawhand(angle,len,width,color){//计算针端的坐标var x=len*Math.cos(angle);var y=-len * Math.sin(angle);//绘制针ctx.strokeStyle=color;ctx.lineWidth=width;ctx.lineCap="round";ctx.beginPath();ctx.moveTo(0,0);ctx.lineTo(x,y);ctx.stroke();}})();</script><body><canvas id="sample" width="150" height="150"></canvas></body>
</html>

示例5，效果如下：

源码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>canvas_time</title><style type="text/css">div {text-align: center;margin-top: 50px;}#clock {border: 1px solid #cccccc;}</style>
</head>
<body><div><canvas id="clock" height="300px" width="300px"></canvas></div><script type="text/JavaScript" >
var dom = document.getElementById('clock');
var ctx = dom.getContext('2d');
var width = ctx.canvas.width;
var height = ctx.canvas.height;
var r = width / 2;
var rem = width/200;
function drawBackground() {ctx.save(); //存储当前环境变量；ctx.translate(r, r); //重置坐标到r，rctx.beginPath(); // 起始一条路径ctx.lineWidth = 10*rem; //设置线宽10；ctx.arc(0, 0, r - ctx.lineWidth /2, 0, 2 * Math.PI, false);ctx.stroke();var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2]; //定义数组ctx.font = 18*rem+"px Arial";ctx.textAlign = "center";ctx.textBaseline = "middle";hourNumbers.forEach(function(number, i) {var rad = 2 * Math.PI / 12 * i;var x = Math.cos(rad) * (r - 30*rem);var y = Math.sin(rad) * (r - 30*rem);ctx.fillText(number, x, y);});for (var i = 0; i < 60; i++) {var rad = 2 * Math.PI / 60 * i;var x = Math.cos(rad) * (r - 18*rem);var y = Math.sin(rad) * (r - 18*rem);ctx.beginPath();if (i % 5 === 0) {ctx.arc(x, y, 2*rem, 0, 2 * Math.PI, false);ctx.fillStyle = "#000";} else {ctx.arc(x, y, 2*rem, 0, 2 * Math.PI, false);ctx.fillStyle = "#ccc";}ctx.fill();}
}function drawHour(hour, minute) {ctx.save();ctx.beginPath();var rad = 2 * Math.PI / 12 * hour;var mrad = 2 * Math.PI / 12 / 60 * minute;ctx.rotate(rad + mrad);ctx.lineWidth = 6*rem;ctx.lineCap = "round";ctx.moveTo(0, 10*rem);ctx.lineTo(0, -r / 2);ctx.stroke();ctx.restore();}function drawMinute(minute) {ctx.save();ctx.beginPath();var rad = 2 * Math.PI / 60 * minute;ctx.rotate(rad);ctx.lineWidth = 3*rem;ctx.lineCap = "round";ctx.moveTo(0, 10*rem);ctx.lineTo(0, -r + 30*rem);ctx.stroke();ctx.restore();}function drawSecond(second) {ctx.save();ctx.beginPath();ctx.fillStyle = 'red';var rad = 2 * Math.PI / 60 * second;ctx.rotate(rad);ctx.moveTo(-2*rem, 20*rem);ctx.lineTo(2*rem, 20*rem);ctx.lineTo(1, -r + 16*rem);ctx.lineTo(-1, -r + 16*rem);ctx.fill();ctx.restore();}function drawDot() {ctx.beginPath();ctx.fillStyle = '#fff';ctx.arc(0, 0, 3*rem, 0, 2 * Math.PI, false);ctx.fill();}function draw01() {ctx.clearRect(0, 0, width, height);var now = new Date();var hour = now.getHours();var minute = now.getMinutes();var second = now.getSeconds();drawBackground();drawHour(hour, minute);drawMinute(minute);drawSecond(second);drawDot();ctx.restore();}draw01();setInterval(draw01, 1000);
</script>
</body>
</html>

示例6，效果如下：

源码如下：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>带日期的时钟</title><style>h1 {text-align: center;}div {width: 400px;height: 400px;margin: 10px auto;padding: 0;}</style></head><body><div><canvas id="c1" width="400px" height="400px"></canvas></div><script type="text/javascript">var clock = document.getElementById("c1").getContext("2d");// var clock = $("#huabu").get(0).getContext("2d"); //$中使用画布function play() {clock.clearRect(0, 0, 400, 400);clock.save();clock.translate(200, 200); //把画布中心转移到canvas中间biaopan();run();clock.restore();}setInterval(function() {play();}, 1000);function biaopan() {//绘制表盘clock.strokeStyle = " #9932CC";clock.lineWidth = 5;clock.beginPath();clock.arc(0, 0, 195, 0, 2 * Math.PI);clock.stroke();//刻度(小时)clock.strokeStyle = "#9932CC";clock.lineWidth = 5;for(var i = 0; i < 12; i++) {clock.beginPath();clock.moveTo(0, -190);clock.lineTo(0, -170);clock.stroke();clock.rotate(2 * Math.PI / 12);}//刻度(分钟)clock.strokeStyle = "#9932CC";clock.lineWidth = 3;for(var i = 0; i < 60; i++) {clock.beginPath();clock.moveTo(0, -190);clock.lineTo(0, -180);clock.stroke();clock.rotate(2 * Math.PI / 60);}//绘制文字clock.textAlign = "center";clock.textBaseline = "middle";clock.fillStyle = "#6495ED";clock.font = "20px 微软雅黑"for(var i = 1; i < 13; i++) {clock.fillText(i,Math.sin(2*Math.PI /12*i)*150,Math.cos(2*Math.PI/12*i)*-150);}}function run() {var date = new Date();var h = date.getHours();var m = date.getMinutes();var s = date.getSeconds();
// if(h > 12) {
//  h = h - 12;
// }//日期var week = date.getDay();var month = date.getMonth() + 1;var day = date.getDate();switch (week){case 1: week = "星期一";break;case 2: week = "星期二";break;case 3: week = "星期三";break;case 4: week = "星期四";break;case 5: week = "星期五";break;case 6: week = "星期六";break;default: week = "星期天";break;}clock.save();clock.textAlign = "center";clock.textBaseline = "middle";clock.fillStyle = "black";clock.font = "16px"clock.fillText(week,-2,-118);clock.fillText(month+" 月",-90,2);clock.fillText(day+" 号",90,0);clock.stroke();clock.restore();//时针//分针60格 分针5格 clock.save();clock.rotate(2 * Math.PI / 12 * h + (2 * Math.PI / 60 * m + 2 * Math.PI / 60 * s / 60) / 12);clock.strokeStyle = "black";clock.lineWidth = 7;clock.beginPath();clock.moveTo(0, 0);clock.lineTo(0, -80);clock.lineCap = "round";clock.stroke();clock.restore();//分针//秒针60格 分针一格clock.save();clock.beginPath();clock.strokeStyle = "#D2691E";clock.lineWidth = 5;clock.rotate(2 * Math.PI / 60 * m + 2 * Math.PI / 60 * s / 60);clock.moveTo(0, 0);clock.lineTo(0, -110);clock.lineCap = "round";clock.stroke();clock.restore();//秒针clock.strokeStyle = "red";clock.rotate(2 * Math.PI / 60 * s);clock.lineWidth = 4;clock.beginPath();clock.moveTo(0, 0);clock.lineTo(0, -120);clock.lineCap = "round";clock.stroke();//中心clock.fillStyle = " #CCFFFF";clock.lineWidth = 5;clock.beginPath();clock.arc(0, 0, 10, 0, 2 * Math.PI);clock.fill();clock.strokeStyle = "cadetblue";clock.stroke();}</script></body></html>

 OK!


http://chatgpt.dhexx.cn/article/n27HFly9.shtml

相关文章

怎么将计算机工具栏时间去除,电脑任务栏不显示日期只显示时间的详细处理方法...

怎么将计算机工具栏时间去除,电脑任务栏不显示日期只显示时间的详细处理方法...

通常情况下&#xff0c;电脑右下角是会同时显示日期和时间的&#xff0c;这样可以方便我们查看。可是最近有用户在使用电脑时&#xff0c;却遇到了任务栏不显示日期只显示时间的问题&#xff0c;不知道怎么回事&#xff0c;更加不清楚如何解决&#xff0c;那么对于这一情况&…
阅读更多...
Linux之history命令显示时间和IP

Linux之history命令显示时间和IP

文章目录 一、需求说明二、配置步骤1、临时显示操作时间2、永久设置 三、补充说明1、HISTFILESIZE和HISTSIZE2、显示命令执行用户3、格式化输出参数配置4、历史命令保存位置 一、需求说明 系统运维工作中我们有时候需要查看历史命令&#xff0c;可以通过history命令查看&#x…
阅读更多...
cmd长ping记录日志和时间_ping命令结果中如何显示时间

cmd长ping记录日志和时间_ping命令结果中如何显示时间

展开全部 可以62616964757a686964616fe78988e69d8331333431373266通过批处理实现&#xff0c;在后面加上时间。 echo off d: for /l %%i in (1,1,%999999999%) do ( ping %1192.168.1.1 -n 1% && echo %% >>ping.txt date /t >>ping.txt time /t >>p…
阅读更多...
Vue中如何动态显示时间?

Vue中如何动态显示时间?

1&#xff1a;先上效果图&#xff1a; 2&#xff1a;注意点&#xff1a; &#xff08;1&#xff09;created( ) 与 mounted( )的区别就是&#xff1a; created 在模板渲染成html前调用&#xff0c;即通常初始化某些属性值&#xff0c;然后再渲染成视图 mounted在…
阅读更多...
QT学习 实时显示时间

QT学习 实时显示时间

今天完成一个实时显示时间的小demo 先上DJ先上DJ 先看一下效果 以两种形式显示当前具体时间 先附上代码&#xff0c;再总结一下核心代码 &#xff08;1&#xff09; myweather.ui文件 创建一个Label&#xff0c;ObjectName值为text&#xff1b;创建一个LCD Number&#xff…
阅读更多...
安卓实时显示时间

安卓实时显示时间

安卓开发过程中&#xff0c;有时候会用到实时的显示当前时间的功能&#xff0c;比如&#xff1a;自定义的状态栏就需要实时的更新当前时间&#xff0c;看下面图就是自定义的状态栏实时的更新时间&#xff1a; 实时显示更新时间代码&#xff1a;TimeThread.java import android.…
阅读更多...
Linux中history命令显示时间

Linux中history命令显示时间

项目场景&#xff1a; 编写Linux shell自动判卷脚本过程中&#xff0c;使用到history命令时&#xff0c;如何显示命令执行时间问题的解决。 问题描述 Linux中的history命令默认只会显示两列&#xff0c;序号和命令&#xff0c;无法显示时间&#xff0c;如下所示&#xff1a; …
阅读更多...
使用LCD1602显示温度或切换显示时间

使用LCD1602显示温度或切换显示时间

项目名称&#xff1a;测温过温报警系统及时钟系统 此系统主要由AT89C51、DS18B20温度模块、LCD1602、喇叭组成。大致的原理是DS18B20温度采集到的数据传送给AT89C51的P3.4&#xff0c;最后通过LCD1602显示当前的实时温度&#xff0c;根据中断按键判断显示时间还是温度。 复习使…
阅读更多...
vue项目中动态显示时间

vue项目中动态显示时间

vue项目中动态显示时间 前言一、js源代码二、效果图1.修改2.html与style的修改3.修改后效果图 总结 前言 在vue项目中动态显示时间&#xff0c;并且按日期、时间、星期一列排列。 我们想要的是下图时间显示方法。 一、js源代码 声明变量 export default {data() {return {ti…
阅读更多...
51单片机lcd1602显示时间日期

51单片机lcd1602显示时间日期

实验内容&#xff1a; 使用51单片机控制LCD1602液晶显示屏显示 时间/日期/星期/温度 信息&#xff0c;并可通过按键设置值。 仿真效果展示&#xff1a; proteus仿真图&#xff1a; 硬件测试图&#xff1a; 说明&#xff1a; 硬件测试按键使用左侧的四个独立按键 key…
阅读更多...
计算机怎么在桌面显示时间,怎么设置使电脑即显示时间有显示日期

计算机怎么在桌面显示时间,怎么设置使电脑即显示时间有显示日期

怎么设置使电脑即显示时间有显示日期以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！ 怎么设置使电脑即显示时间有显示日期 单击“开始→控制面板区域和语言选项”，在“区域选项”选项卡中单击“自定义”按钮打开…
阅读更多...
1.Vue显示实时时间

1.Vue显示实时时间

实时显示时间&#xff0c;代码如下&#xff1a; <div id"app">{{date}}</div><script>var appnew Vue({el:"#app",data:{date:new Date()},mounted:function(){var _thisthis;this.timersetInterval(function(){_this.datenew Date();}…
阅读更多...
Linux、Oracle、MySQL命令提示符显示时间

Linux、Oracle、MySQL命令提示符显示时间

前言&#xff1a;测试环境Oracle DG开启了FLASHBACK有遇到过to timestamp的恢复场景&#xff0c;因为这个问题有了在sqlplus命令提示符前显示时间的需求&#xff0c;顺着也了解了下怎么在Linux、MySQL命令提示符前显示时间。 1. Linux命令提示符显示时间 PS1是Linux终端用户的一…
阅读更多...
Linux命令之显示日期时间date

Linux命令之显示日期时间date

概述 date 可以用来显示或设定系统的日期与时间。 语法 该命令的语法如下&#xff1a; date [选项] [日期时间格式]该命令支持的选项有&#xff1a; 选项说明-d <时间字符串>显示指定的“时间字符串”表示的时间&#xff0c;而非当前时间。注意用双引号把字符串引起…
阅读更多...
Java之Redis分片机制

Java之Redis分片机制

1. Redis分片机制 1.1 分片机制说明 前提说明: redis可以通过修改内存的大小 实现数据的保存.但是内存的资源不易设置的过大,因为很多的时间都浪费在内存的寻址中. 需求: 如果有海量的数据,需要redis存储 问:应该如何处理? 解决方案: 可以采用Redis分片机制 实现内存数据的扩…
阅读更多...
Redis分片+Redis哨兵

Redis分片+Redis哨兵

Redis分片机制 Redis分片前提:Redis可以通过修改内存的大小实现数据的保存,但是不能设置的过大 解决方案:可以采用Redis分片机制来实现内存数据的扩容,使用Redis分片的主要目的就是为了内存扩容,解决海量数据的存储问题 Redis每个分片内的数据都是不相同的 Redis分片搭建步骤…
阅读更多...
flea-cache使用之Redis分片模式接入

flea-cache使用之Redis分片模式接入

Redis分片模式接入 1. 参考2. 依赖3. 基础接入3.1 定义Flea缓存接口3.2 定义抽象Flea缓存类3.3 定义Redis客户端接口类3.4 定义Redis客户端命令行3.5 定义分片模式Redis客户端实现类3.6 定义Redis分片连接池3.7 Redis配置文件3.8 定义Redis Flea缓存类3.9 定义抽象Flea缓存管理…
阅读更多...
java如何实现redis分片存储_Redis的分片机制

java如何实现redis分片存储_Redis的分片机制

前言：大家都知道redis单台的默认内存大小一般是10M.如果现在需要我们将1G的数据保存到内存中。这该如何做到呢？比如我们就用单台redis，但是一味的扩大单台redis内存则直接影响执行的效率，会有一种得不偿失的感觉。于是呢，我们就得采用分片策略实现数据保存，通过多台redis…
阅读更多...
Redis分片的实现

Redis分片的实现

1.为什么使用分片 1.1 说明: 虽然redis可以扩展内存空间的大小,但是如果需要存储海量的数据,一味地去扩大内存,其实效率不高. 1.2 分片的介绍 准备多台redis,共同为用户提供缓存服务,在保证效率的前提下,实现了内存的扩容. 用户在使用分片机制时,将多台redis当做一个整体来…
阅读更多...
使用DockerCompose部署Redis分片集群——整合SpringBoot

使用DockerCompose部署Redis分片集群——整合SpringBoot

今天来记录一下使用DockerCompose部署Redis分片集群的过程&#xff0c;前面写了几篇关于redis的博客了&#xff0c;这里就不再过多介绍了&#xff0c;直接上配置就好了 version: "3.0"services:redisServer1:image: redis:6.2.4container_name: redis_server1volume…
阅读更多...
推荐文章

Copyright @ 2022~2023