自制酷酷罗盘时钟(附代码)
yuyutoo 2025-05-25 16:22 2 浏览 0 评论
复制以下代码，到txt文档，保存，后缀改为html。即可。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>罗盘时钟</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
* {
margin:0;
padding:0;
}
#wrap {
position:fixed;
left:0;
top:300px;
width:800px;
height:800px;
border:1px solid #000;
position:fixed;
left:0;
top:0;
color:gold;
font-size:14px;
position:relative;
background:#000;
line-height:20px;
}
#wrap .wrap_inner {
width:800px;
height:800px;
background:#000;
position:relative;
border-radius:50%;
}
#wrap .wrap_inner .timeout {
width:800px;
height:800px;
position:absolute;
background:transparent;
}
#wrap .wrap_inner .timeout:nth-of-type(1) {
transition:1s linear;
box-shadow:0 0 20px gold;
border-radius:50%;
}
#wrap .wrap_inner .timeout:nth-of-type(2) {
width:600px;
height:600px;
left:100px;
top:100px;
transition:1s linear;
}
#wrap .wrap_inner .timeout:nth-of-type(3) {
width:400px;
height:400px;
left:200px;
top:200px;
transition:1s linear;
}
#wrap .wrap_inner .timeout:nth-of-type(4) {
width:300px;
height:300px;
left:250px;
top:250px;
transition:1s linear;
}
#wrap .wrap_inner .timeout:nth-of-type(5) {
width:200px;
height:200px;
left:300px;
top:300px;
transition:1s linear;
}
#wrap .wrap_inner .timeout .secbox {
width:400px;
height:20px;
position:absolute;
left:400px;
top:390px;
transform-origin:left center;
}
#wrap .wrap_inner .timeout .minbox {
width:300px;
height:20px;
position:absolute;
left:300px;
top:290px;
transform-origin:left center;
}
#wrap .wrap_inner .timeout .houbox {
width:200px;
height:20px;
position:absolute;
left:200px;
top:190px;
transform-origin:left center;
}
#wrap .wrap_inner .timeout .datbox {
width:150px;
height:20px;
position:absolute;
left:150px;
top:140px;
transform-origin:left center;
}
#wrap .wrap_inner .timeout .daybox {
width:100px;
height:20px;
position:absolute;
left:100px;
top:90px;
transform-origin:left center;
}
#wrap .zhizhen {
width:400px;
height:20px;
background:rgba(255,255,255,.4);
position:absolute;
left:400px;
top:390px;
z-index:999;
}
</style>
</head>
<body>
<div id="wrap">
<div class="wrap_inner">
<div class="timeout"></div>
<div class="timeout"></div>
<div class="timeout"></div>
<div class="timeout"></div>
<div class="timeout"></div>
<div class="timeout"></div>
</div>
<div class="zhizhen"></div>
</div>
<script>
var Months = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
var Days = ['一号', '二号', '三号', '四号', '五号', '六号', '七号', '八号', '九号', '十号', '十一号', '十二号', '十三号', '十四号', '十五号', '十六号', '十七号', '十八号', '十九号', '二十号', '二十一号', '二十二号', '二十三号', '二十四号', '二十五号', '二十六号', '二十七号', '二十八号', '二十九号', '三十号', '三十一号'];
var Dates = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'];
var Hours = ['零点', '一点', '二点', '三点', '四点', '五点', '六点', '七点', '八点', '九点', '十点', '十一点', '十二点', '十三点', '十四点', '十五点', '十六点', '十七点', '十八点', '十九点', '二十点', '二十一点', '二十二点', '二十三点'];
var Minutes = ['一分', '二分', '三分', '四分', '五分', '六分', '七分', '八分', '九分', '十分', '十一分', '十二分', '十三分', '十四分', '十五分', '十六分', '十七分', '十八分', '十九分', '二十分', '二十一分', '二十二分', '二十三分', '二十四分', '二十五分', '二十六分', '二十七分', '二十八分', '二十九分', '三十分', '三十一分', '三十二分', '三十三分', '三十四分', '三十五分', '三十六分', '三十七分', '三十八分', '三十九分', '四十分', '四十一分', '四十二分', '四十三分', '四十四分', '四十五分', '四十六分', '四十七分', '四十八分', '四十九分', '五十分', '五十一分', '五十二分', '五十三分', '五十四分', '五十五分', '五十六分', '五十七分', '五十八分', '五十九分', '六十分'];
var Second = ['一秒', '二秒', '三秒', '四秒', '五秒', '六秒', '七秒', '八秒', '九秒', '十秒', '十一秒', '十二秒', '十三秒', '十四秒', '十五秒', '十六秒', '十七秒', '十八秒', '十九秒', '二十秒', '二十一秒', '二十二秒', '二十三秒', '二十四秒', '二十五秒', '二十六秒', '二十七秒', '二十八秒', '二十九秒', '三十秒', '三十一秒', '三十二秒', '三十三秒', '三十四秒', '三十五秒', '三十六秒', '三十七秒', '三十八秒', '三十九秒', '四十秒', '四十一秒', '四十二秒', '四十三秒', '四十四秒', '四十五秒', '四十六秒', '四十七秒', '四十八秒', '四十九秒', '五十秒', '五十一秒', '五十二秒', '五十三秒', '五十四秒', '五十五秒', '五十六秒', '五十七秒', '五十八秒', '五十九秒', '六十秒'];
var Otimeout = document.querySelectorAll('.timeout');
var date = new Date();
var month = date.getMonth() + 1;
var data = date.getDate();
var day = date.getDay();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
console.log(day)
console.log(data)
var nowsecond = 'rotate(' + -6 * (seconds - 1) + 'deg)'
Otimeout[0].style.transform = nowsecond;
var nowminutes = 'rotate(' + -6 * (minutes - 1) + 'deg)'
Otimeout[1].style.transform = nowminutes;
var nowhours = 'rotate(' + -15 * (hours) + 'deg)'
Otimeout[2].style.transform = nowhours;
var nowday = 'rotate(' + -51.4 * (day - 1) + 'deg)'
Otimeout[3].style.transform = nowday;
var nowdata = 'rotate(' + -11.6 * (data - 1) + 'deg)'
Otimeout[4].style.transform = nowdata;
(function() {
//秒
for (var i = 0; i < 60; i++) {
var secbox = document.createElement('div');
secbox.className = 'secbox'
var Rotate = 'rotate(' + 6 * i + 'deg)'
// console.log(Rotate)
secbox.style.transform = Rotate
secbox.innerText = Second[i]
secbox.style.textAlign = 'right'
Otimeout[0].appendChild(secbox);
}
//分
for (var i = 0; i < 60; i++) {
var minbox = document.createElement('div');
minbox.className = 'minbox'
var Rotate = 'rotate(' + 6 * i + 'deg)'
// console.log(Rotate)
minbox.style.transform = Rotate
minbox.innerText = Minutes[i]
minbox.style.textAlign = 'right'
Otimeout[1].appendChild(minbox);
}
//时
for (var i = 0; i < 24; i++) {
var houbox = document.createElement('div');
houbox.className = 'houbox'
var Rotate = 'rotate(' + 15 * i + 'deg)'
// console.log(Rotate)
houbox.style.transform = Rotate
houbox.innerText = Hours[i]
houbox.style.textAlign = 'right'
// houbox.style.textIndent = '1em'
Otimeout[2].appendChild(houbox);
}
//星期
for (var i = 0; i < 7; i++) {
var datbox = document.createElement('div');
datbox.className = 'datbox'
var Rotate = 'rotate(' + 51.4 * i + 'deg)'
// console.log(Rotate)
datbox.style.transform = Rotate
datbox.innerText = Dates[i]
datbox.style.textAlign = 'right'
Otimeout[3].appendChild(datbox);
}
//天
for (var i = 0; i < 31; i++) {
var daybox = document.createElement('div');
daybox.className = 'daybox'
var Rotate = 'rotate(' + 11.6 * i + 'deg)'
// console.log(Rotate)
daybox.style.transform = Rotate
daybox.innerText = Days[i]
daybox.style.textAlign = 'right'
Otimeout[4].appendChild(daybox);
}
(function() {
var count = seconds - 1;
var con = minutes - 1;
var cos = hours - 2;
var timer = setInterval(function() {
count++
var rotate = 'rotate(' + -6 * count + 'deg)'
Otimeout[0].style.transform = rotate
if (count % 60 == 0) {
con++;
var rotate1 = 'rotate(' + -6 * con + 'deg)'
Otimeout[1].style.transform = rotate1
if (con % 60 == 0) {
cos++;
var rotate2 = 'rotate(' + -15 * cos + 'deg)'
Otimeout[2].style.transform = rotate2
}
}
}, 1000)
})();
})()
function $(id) {
return document.querySelector(id)
}
</script>
</body>
</html>
如果不行，记得另存为时，编码格式为UTF-8
喜欢就分享给你的小伙伴吧。
相关推荐
- 12、高阶组件:魔法增幅器——React 19 HOC模式
-
一、魔法增幅器的本质"高阶组件是魔法师用咒语叠加的炼金术，"霍格沃茨魔咒研究院院长凝视着发光的增幅器，"通过函数式能量场的嵌套，让基础组件获得预言家日报式的逻辑继承！"...
- 深入理解nodejs的异步IO与事件模块机制
-
一、node为什么要使用异步I/O异步最先诞生于操作系统的底层，在底层系统中，异步通过信号量、消息等方式有广泛的应用。但在大多数高级编程语言中，异步并不多见，这是因为编写异步的程序不符合人习惯的思维逻...
- 前端时间同步利器:React + useEffect 实现高性能动态时钟
-
前言在你奋笔疾敲代码的瞬间，是不是突然一低头，发现时间像偷偷跑路的变量，一眨眼就从上午飘到下午？饭没吃、会没开、工位也快被前端猫霸占了。仿佛你写的不是代码，而是“时间穿梭机”。别慌，咱们今天就来用R...
- JavaScript 异步编程指南 - 聊聊 Node.js 中的事件循环
-
作者：五月君来源：编程界|事件循环是一种控制应用程序的运行机制，在不同的运行时环境有不同的实现，上一节讲了浏览器中的事件循环，它们有很多相似的地方，也有着各自的特点，本节讨论下Node.js中...
- 10个Vue开发技巧「实践」
-
作者：WahFung转发链接：https://juejin.im/post/5e8a9b1ae51d45470720bdfa路由参数解耦一般在组件内使用路由参数，大多数人会这样做：...
- 通过番计时器实例学习 React 生命周期函数 componentDidMount
-
大家好，今天我们将通过一个实例——番茄计时器，学习下如何使用函数生命周期的一个重要函数componentDidMount()：componentDidMount()，在组件加载完成，render之后...
- 前端必看!10 个 Vue3 救命技巧，解决你 90% 的开发难题?
-
写Vue3项目时，是不是总被数据更新延迟、组件间传值混乱、页面加载缓慢这些问题折磨得头秃？别担心！作为摸爬滚打多年的老前端，今天掏出压箱底的10个实战技巧，从性能优化到复杂逻辑处理，每一个都能...
- 如何用2 KB代码实现3D赛车游戏?2kPlus Jam大赛了解一下
-
选自frankforce作者：Frank机器之心编译参与：王子嘉、GeekAI控制复杂度一直是软件开发的核心问题之一，一代代的计算机从业者纷纷贡献着自己的智慧，试图降低程序的计算复杂度。然而，将一款...
- 证明你访问的网站是你想访问的，Safari 真的需要
-
安全研究员在Safari上找到了一个新漏洞，能让网站在浏览器的地址栏内将自己伪装成另一个网站——得益于Safari地址栏的“智能缩略”功能。在Deusen最近公开的攻击演示（PoC，P...
- 抓狂!TS 组件性能拉胯到崩溃?4 个绝杀技巧逆风翻盘!
-
前端兄弟姐妹们五一假期快乐，咱们谁还没被TypeScript组件的性能问题折磨过？页面加载转圈圈，点击按钮没反应，代码改了一轮又一轮，性能却还是原地踏步，分分钟想砸电脑！别慌，今天这4个绝杀技...
- 让小球做圆周运动，你有几种办法?
-
最近在阅读外国技术文章中无意中发现了一个神奇的CSS属性motion-path，它可以让Dom元素可以按照自定义的路径移动。又想起了很久之前参加校招面试的时候，面试官问了我一个问题“能不能不借助库实现...
- 前端基础进阶(十四):深入核心，详解事件循环机制
-
EventLoopJavaScript的学习零散而庞杂，很多时候我们学到了一些东西，但是却没办法感受到进步！甚至过了不久，就把学到的东西给忘了。为了解决自己的这个困扰，在学习的过程中，我一直在试图寻...
- 从0搭建一个WebRTC，实现多房间多对多通话，并实现屏幕录制
-
这篇文章开始会实现一个一对一WebRTC和多对多的WebRTC，以及基于屏幕共享的录制。本篇会实现信令和前端部分，信令使用fastity来搭建，前端部分使用Vue3来实现。为什么要使用WebRTCWe...
- Vue2 开发卡壳?这 10 个实战技巧专治各种不服
-
干前端开发的兄弟，谁还没被Vue2折腾过？数据不更新、组件通信乱成麻、性能差到想砸电脑……这些痛点，我都懂！今天直接甩出10个超实用的实战技巧，每一个都是从项目“血坑”里爬出来总结的，专...
欢迎 你 发表评论:
- 一周热门
-
-
前端面试:iframe 的优缺点? iframe有那些缺点
-
带斜线的表头制作好了，如何填充内容?这几种方法你更喜欢哪个?
-
漫学笔记之PHP.ini常用的配置信息
-
其实模版网站在开发工作中很重要，推荐几个参考站给大家
-
推荐7个模板代码和其他游戏源码下载的网址
-
[干货] JAVA - JVM - 2 内存两分 [干货]+java+-+jvm+-+2+内存两分吗
-
正在学习使用python搭建自动化测试框架?这个系统包你可能会用到
-
织梦(Dedecms)建站教程 织梦建站详细步骤
-
【开源分享】2024PHP在线客服系统源码(搭建教程+终身使用)
-
2024PHP在线客服系统源码+完全开源 带详细搭建教程
-
- 最近发表
-
- 12、高阶组件:魔法增幅器——React 19 HOC模式
- 深入理解nodejs的异步IO与事件模块机制
- 前端时间同步利器:React + useEffect 实现高性能动态时钟
- JavaScript 异步编程指南 - 聊聊 Node.js 中的事件循环
- 10个Vue开发技巧「实践」
- 通过番计时器实例学习 React 生命周期函数 componentDidMount
- SRE监控四大黄金指标，任何一个有异常都会是灾难……
- 前端必看!10 个 Vue3 救命技巧，解决你 90% 的开发难题?
- 如何用2 KB代码实现3D赛车游戏?2kPlus Jam大赛了解一下
- 证明你访问的网站是你想访问的，Safari 真的需要
- 标签列表
-
- mybatis plus (70)
- scheduledtask (71)
- css滚动条 (60)
- java学生成绩管理系统 (59)
- 结构体数组 (69)
- databasemetadata (64)
- javastatic (68)
- jsp实用教程 (53)
- fontawesome (57)
- widget开发 (57)
- vb net教程 (62)
- hibernate 教程 (63)
- case语句 (57)
- svn连接 (74)
- directoryindex (69)
- session timeout (58)
- textbox换行 (67)
- extension_dir (64)
- linearlayout (58)
- vba高级教程 (75)
- iframe用法 (58)
- sqlparameter (59)
- trim函数 (59)
- flex布局 (63)
- contextloaderlistener (56)