下载资源前端资源详情
CSS+js 做漂亮时钟.zip
大小:53.83KB
价格:21积分
下载量:0
评分:
5.0
上传者:uuplay0216
更新日期:2025-09-22

CSS+js 做漂亮时钟.zip

资源文件列表(大概)

文件名
大小
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>

用户评论 (0)

发表评论

captcha

相关资源

protoc3.19的window下载安装包

protoc3.19的window下载安装包

1.41MB28积分

车辆路径问题常用数据集，带时间窗约束的车辆路径规划问题(VRPTW)、容量限制的车辆路径问题(CVRP)

CVRP问题是一类在特定约束条件下优化车辆行驶路线的NP-hard问题。它要求在满足一系列客户点的需求且不超过车辆容量的前提下，安排适当的车辆行驶路线，旨在最小化总成本，包括车辆启动成本和行驶成本。CVRP问题是运筹学和物流管理中的一个重要课题，直接关联到物流配送的成本效益和服务质量。Solomon数据集是用于研究车辆路径问题（VRPTW、CVRP）的一系列标准测试实例，由Solomon于1987年提出。Solomon数据集在CVRPLIB中被广泛采用，其中包含一个起始点（CUST NO.==0）和100个客户点，所有的常量都为整数。该数据集包括最大可派遣车辆数K、每辆车的最大载重量Q、各节点的横纵坐标XCOORD和YCOOR以及节点之间的距离视为运输成本、节点处的需求量DEMAND、服务最早开始时间READY TIME和服务截止时间DUE TIME等信息。

76.14KB50积分

多目标鲸鱼优化算法matlab代码

多目标鲸鱼优化算法（Non-Dominated Sorting Whale Optimization Algorithm，NSWOA）是一种基于鲸鱼优化算法（Whale Optimization Algorithm，WOA）的改进算法，专门用于解决多目标优化问题。多目标鲸鱼优化算法在原有WOA的基础上引入了非支配排序、拥挤度计算和精英保留策略等概念，以提高算法处理多目标问题的性能。WOA模拟座头鲸捕食行为，通过收缩包围、螺旋更新和随机搜索三个阶段来不断更新个体位置。然而，原始的WOA无法直接处理多目标优化问题。为了将WOA应用于多目标优化，NSWOA引入了非支配排序的概念。该排序方法将种群中的个体按照其适应度进行分级，支配等级越低的个体越优秀。通过这种方式，算法能够有效筛选出优秀的非支配个体，引导种群进化。

13.58KB43积分

徒步优化算法(HOA)matlab代码

徒步优化算法（Hiking Optimization Algorithm，HOA)是一种受徒步旅行经历启发的元启发式优化算法。徒步旅行者试图登顶山峰、丘陵或岩石的过程中，徒步者有意或无意地考虑到地形的陡峭程度，这是一种流行的娱乐活动，它认识到优化问题的搜索景观与徒步旅行者所穿越的山区地形之间的相似性。HOA的数学模型以Tobler徒步函数为前提，该函数通过考虑地形的高程和行走距离来确定徒步者(即agent)的步行速度。在求解优化问题的过程中，利用Tobler徒步函数（THF）来确定徒步者的位置。

3.84KB10积分