HTML页面显示时间——网页数字时钟、钟表
2024-05-16 01:11:16
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!
HTML页面显示时间——网页数字时钟、钟表相关推荐
- 运行项目页面显示“该网页无法正常运作”的解决办法 - 前端篇
文章目录 config/index.js build/webpack.dev.conf.js 接到项目源码,运行时,发现项目正常起服务,但是网页里打不开页面.下面介绍一下我的解决步骤 config/i ...
- vue 运行项目浏览器页面显示“该网页无法正常运作”
项目运行成功并自动弹出 但是页面上显示: 确定问题: 检查build/webpack.dev.conf.js文件中是否存在下面代码: disableHostCheck: true, https: tr ...
- H5页面在iOS网页数字颜色自动被改变成蓝色
造成该问题的原因在于Safari浏览器的问题: 解决该问题只需在head标签中添加如下代码即可解决 <meta name = "format-detection" conte ...
- 人体时钟android,来自独立开发者作品的冷高轮时间数字时钟app《小人人体形状造型数字手势数字麻将数字扑克数字》时钟...
冷高轮时间动态数字时钟APP 这款软件为用户提供了这是一款由(动态小人人形人体造型时钟/手势时钟/麻将时钟/扑克时钟)四种风格时钟样式打造的手机全屏桌面动态时钟app 冷高轮时间app 冷高轮时间图片 ...
- 基于 FPGA 实现滑动显示、多功能数字时钟【设置年月日时分秒以及闹钟】
目录 一.数码管原理 二.基础篇 2.1 原理及代码 2.2 验证结果 三.进阶篇 3.1 原理及代码 3.2 验证结果 四.数字时钟 4.1 原理及代码 4.2 验证结果 本文内容:基于 FPGA ...
- 数码管在c语言中显示时间,如何利用单片机数码管程序模拟是时钟显示时间？...
数码管是一种半导体发光器件,其基本单元是发光二极管.数码管按段数可分为七段数码管和八段数码管,八段数码管比七段数码管多一个发光二极管单元,也就是多一个小数点(DP)这个小数点可以更精确的表示数码管想要 ...
- android开发时钟xml,android模拟时钟和数字时钟的例子
android.widget.AnalogClock和android.widget.DigitalClock类提供了显示模拟和数字时钟的功能. Android模拟和数字时钟用于在Android应用程序 ...
- FPGA学习之 状态机实现数码管的数字时钟
FPGA学习之 状态机实现数字时钟 开发板型号:EP4CE6F17C8 六位数码管原理图: 由图可知,数码管段选和片选均为低电平有效. 由于人眼的视觉残留,我们控制一定频率对每一位数码管进行刷新,就能 ...
- Verilog数字系统设计——数字时钟（带暂停和任意位置位）
verilog数字时钟设计 功能说明 问题分析及模块实现 模24计数器 模60计数器 模6计数器 模10计数器 模60计数器 数码管驱动电路 11位控制位说明 分频器 数字时钟 顶层文件实现 写在后面 ...
- 在网页中显示数字时钟
<html> <head> <title>实时走动的数字时钟</title> </head> <script> function ...
最新文章
- DataSet 去除重复的行
- HDUOJ-----4510 小Q系列故事——为什么时光不能倒流
- 电商前台模板中文html5_跨境电商平台上产品如何上传？虾皮新版批量上传工具使用指南分享...
- 制作centos安装u盘
- 【报告分享】2022年零售行业消费趋势新主张-京东+罗兰贝格.pdf（附下载链接）...
- 都是打工的，为啥职场中存在着那么多勾引斗角？
- .NET，你忘记了么？（六）——再谈String
- 7.13 Python循环语句（2）、number、字符串
- python画图matlab,matlab plot画图
- python录音转文字软件_录音提取转文字
- iOS base64解码失败
- python learning note
- 中国软件业的机会——抓住机遇、挑战未来
- 区块链的硬分叉、软分叉介绍
- EXCEL文件（xlsx）的读取与data的写入
- 红帽子linux网络播放器,redhat默认播放器（totem）解码包安装
- Hamming Weight的算法分析
- Kafka推送数据方法
- zoj 1010 Area【线段相交问题】
- 汽车+大数据=变形金刚？解读汽车大数据价值