欢迎您访问 最编程 本站为您分享编程语言代码，编程技术文章！

热门搜索/Hot Search

您现在的位置是： 首页

制作简单时钟的 HTML

最编程 2024-05-06 09:43:11
...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Myclock</title> <style> *{ margin: 0; padding: 0; } /* 时钟表盘位置*/ .clock{ width: 400px; height: 400px; margin-top: 50px; margin-left: auto; margin-right: auto; overflow: hidden; } /* 表盘样式*/ .clockTable{ width: 300px; height: 300px; background-color: rgba(0,0,255,0.5); border: 1px rgba(0,0,0,0.5) solid; margin: 50px; position: relative; border-radius: 100%; overflow: hidden; } /* 时针样式*/ .hour{ position: absolute; height: 85px; box-sizing: border-box; border: 1px #000 solid; top: 148px; left: 148px; transform-origin: top; border-radius: 50px; } /* 分针样式*/ .minute{ position: absolute; height: 100px; box-sizing: border-box; border: 1px #000 solid; left: 148px; top: 148px; transform-origin: top; border-radius: 50px; } /* 秒针样式*/ .second{ position: absolute; height: 115px; box-sizing: border-box; border: 1px #000 solid; left: 148px; top: 148px; transform-origin: top; border-radius: 50px; } .numClock{ width: 300px; height: 50px; text-align: center; line-height: 50px; margin: 0 auto; font-size: 20px; } </style> </head> <body> <section class="clock"> <section class="clockTable" id="circle"> <div class="hour"></div> <div class="minute"></div> <div class="second"></div> </section> </section> <section class="numClock"></section> <!-- 引入jQuery 联网使用--> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <!-- 引入jQuery 本地文件，注意文件路径 --> <script src="jquery.js"></script> <!-- 两种jQuery引入方式都可以，第一种引入是使用网络上的文件，因此需要联网使用 第二种是将网络上的文件下载到本地使用，不需要进行联网使用 --> <script> //使用数组存放时钟上的希腊字母 var array = ['Ⅰ','Ⅱ','Ⅲ','Ⅳ','Ⅴ','Ⅵ','Ⅶ','Ⅷ','Ⅸ','Ⅹ','Ⅺ','Ⅻ'] var cir = document.getElementById("circle") //显示表盘上的刻度 for(var i=0;i<60;i++){ var mark = '<div style="transform-origin: bottom;left: 147px;position: absolute;width: 2px;height: 150px;transform:rotateZ('+((i+1)*6)+'deg);">' if((i+1)%5==0){ //第一个div使表盘上出现刻度，第二个div将前面旋转过的内容旋转回来 mark += ('<div style="box-sizing: border-box;height: 15px;width: 2px;background-color: #000000;"></div>'+'<div style="position: absolute;width: 20px;left: -10px;height: 20px;transform:rotateZ('+(-(((i+1)/5))*30)+'deg);text-align: center;">'+array[(((i+1)/5)-1)]+'</div>'+'</div>') }else{ mark += ('<div style="box-sizing: border-box;height: 10px;width: 2px;background-color: #000000;"></div>'+'</div>') } cir.innerHTML+=mark } // 获取当前系统时间并改变指针位置 function Time(){ // 获取系统时间 var time = new Date() var y = time.getFullYear() var month = time.getMonth()+1 // JQ获取系统月份时需要多加1 var d = time.getDate() // 不能使用getDay()的方式获取当前日期 var h = time.getHours() var m = time.getMinutes() var s = time.getSeconds() //将不足两位的数字通过字符串拼接成两位 if(month < 10){ month = '0' + month } if(d < 10){ d = '0' + d } if(h < 10){ h = '0' + h } if(m < 10){ m = '0' + m } if(s < 10){ s = '0' + s } // 数字时钟显示，放在24小时制转化成12小时制前，避免小时大于12时变成小于12的时间 $(".numClock").html(y+'-'+month+'-'+d+'&ensp;'+h+':'+m+':'+s) // 将24小时制转化成12小时制 if(h > 12){ h = h - 12 }else{ h = h } // 开始时指针指向Ⅵ，因此多增加180deg使指针指向Ⅻ $(".hour").css({ // 共12个时针刻度，用获取的小时(h*30)作为当前时针旋转的角度；分针每转360deg，时针转60deg，因此分针小刻度间跳转时时针角度多增加(m/2)deg "transform": "rotateZ("+((h*30+180)+(m/2)+"deg)" }) $(".minute").css({ // 共60个分针刻度，用获取的分钟(m*6)作为当前分针旋转的角度；秒针每转360deg，分针转6deg，因此秒针小刻度间跳转时分针角度多增加(s/10)deg "transform": "rotateZ("+((m*6+180)+(s/10))+"deg)" }) $(".second").css({ // 共60个秒针刻度，用获取的秒(s*6)作为当前秒针旋转的角度 "transform": "rotateZ("+(s*6+180)+"deg)" }) } // 实时调用获取系统时间 window.onload=function(){ setInterval("Time()",500); // 定时器，设置500ms的时间间隔以提高准确性 } </script> </body> </html>

上一篇： Vue3 大型活动管理系统

下一篇： 行业突破！四个字母实现 100ms 内低延迟摄像机弱网络状态实时传输

推荐阅读