CSS+js 做漂亮时钟.zip 53.83KB

uuplay0216需要积分:6(1积分=1元)

资源文件列表:

CSS+js 做漂亮时钟.zip 大约有5个文件

CSS+js 做漂亮时钟/clock.gif 50.49KB
CSS+js 做漂亮时钟/index.html 2.68KB
CSS+js 做漂亮时钟/style.css 5.55KB
CSS+js 做漂亮时钟/漂亮时钟.html 2.26KB
CSS+js 做漂亮时钟/

资源介绍:

CSS+js 做漂亮时钟。这是一个非常仿真的圆形时钟。通过js获取当前时间并调整时钟的指针旋转，完成时间的显示。样子也非常漂亮。 --------------------------------------------------------------------------------------------------------- 需要看看效果的，可以移步到我的专栏去看看。文章名与资源名一致。资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>用CSS+JS做漂亮的拟真时钟</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="clock">  <div class="frame-face">  <div class="digital-wrap"> <div class="digit-hours"></div> <div class="digit-minutes"></div> <div class="digit-seconds"></div> </div> <ul id="digits"> <li>3</li> <li>6</li> <li>9</li> <li>12</li> </ul>  <div class="hours-hand"></div> <div class="minutes-hand"></div> <div class="seconds-hand"></div>  <ul id="minute-marks"></ul> </div> </div> </body> </html> <script type="text/javascript"> window.onload = function () { // 生成刻度 let markWrap = document.getElementById('minute-marks') for (let index = 0; index < 60; index++) { let markItem = document.createElement('li') markItem.style.cssText = "transform:rotate(" + index * 6 + "deg) translateY(-12.7em)"; if (index % 5 == 0) { markItem.style.width = "0.3em"; markItem.style.height = "1em"; } markWrap.appendChild(markItem) } } setInterval(function () { // 获得系统当前时间 var time = new Date(); var hour = time.getHours() var minute = time.getMinutes(); var second = time.getSeconds(); var hournum; // 控制表针转动 if (hour > 12) { hournum = ((hour - 12) + minute / 60) * 30; } else { hournum = (hour + minute / 60 * 100) * 30; } var minnum = (minute + second / 60) * 6 + second / 60; var sennum = second * 6; document.getElementsByClassName("hours-hand")[0].style.transform = "rotate(" + hournum + "deg)" document.getElementsByClassName("minutes-hand")[0].style.transform = "rotate(" + minnum + "deg)" document.getElementsByClassName("seconds-hand")[0].style.transform = "rotate(" + sennum + "deg)" // 输出数字样式时间到电子表 if(hour<10){ hour="0"+parseInt(hour); } if(minute<10){ minute="0"+parseInt(minute); } if(second<10){ second="0"+parseInt(second); } //document.getElementsByClassName("digit-hours")[0].innerHTML=hour; //document.getElementsByClassName("digit-minutes")[0].innerHTML=minute; //document.getElementsByClassName("digit-seconds")[0].innerHTML=second; }, 1000); </script>

标题	大小	时间
protoc3.19的window下载安装包	1.41MB	8月前

车辆路径问题常用数据集，带时间窗约束的车辆路径规划问题(VRPTW)、容量限制的车辆路径问题(CVRP)	76.14KB	8月前
多目标鲸鱼优化算法matlab代码	13.58KB	8月前
徒步优化算法(HOA)matlab代码	3.84KB	8月前
CSS技巧专栏一日一例：20 -纯CSS实现点击时会凹陷下去的按钮特效.zip	1.68KB	8月前

阿里云MQTT新手教程	20.45MB	8月前
Linux学习笔记 1.zip	8.21MB	8月前
GD32F130最小系统板	124.63KB	8月前