百度360必应搜狗淘宝本站头条
grid 设置导航栏dedecms模版移位运算context xml
当前位置：网站首页 > 文章教程 > 正文

自制酷酷罗盘时钟(附代码) 罗盘时钟代码下载

xsobi 2024-12-17 17:07 24 浏览



复制以下代码，到txt文档，保存，后缀改为html。即可。

Bash

<!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



喜欢就分享给你的小伙伴吧。

相关推荐

建站 | 从零开始打造自己的网站--以创意众筹网项目为例

文/跨界哥经过前几期的思考探索，跨界哥的创意众筹网项目的大概框架已经有了雏形，今天真正开始着手网站的建设。从零开始打造属于自己的网站，自己终于做了站长，想想还是有点小激动。简单描述下创意众筹网的核心业...

MyEclipse应用服务器教程:应用程序服务器入门指南(上)

1.定义一个新的服务器定义一个新的服务器允许您选择需要使用的服务器连接，并提供配置信息，然后选择项目部署到服务器上。（1）在服务器视图工具栏上点击new_server_icon。或者右键单击服务器视...

ABP异常为什么是403呢?

前言在ABP中使用UserFriendlyException抛出异常,HTTP状态码为什么是403?下面用这一段测试代码:[HttpPost]publicasyncTask<PeopleD...

Web自动化测试:模拟鼠标操作(ActionChains)

在日常的测试中，经常会遇到需要鼠标去操作的一些事情，比如说悬浮菜单、拖动验证码等，这一节我们来学习如何使用webdriver模拟鼠标的操作首页模拟鼠标的操作要首先引入ActionChains的包fro...

webapi 全流程

C#中的WebAPIMinimalApi没有控制器，普通api有控制器，MinimalApi是直达型，精简了很多中间代码，广泛适用于微服务架构MinimalApi一切都在组控制台应用程序类【Progr...

SpringBoot日志处理之Logback

日志处理是一个正式项目必备的功能，日志要能够根据时间、类型等要素，根据指定格式来保存指定的日志，方便我们观察程序运行情况、定位程序bug。SpringBoot中推荐使用Logback日志框架。slf4...

ASP.NET Core Web API 接口限流

一.前言ASP.NETCoreWebAPI接口限流、限制接口并发数量，我也不知道自己写的有没有问题，抛砖引玉、欢迎来喷！二.需求写了一个接口，参数可以传多个人员，也可以传单个人员，时间范围...

高德打车通用可编排订单状态机引擎设计

一背景订单状态流转是交易系统的最为核心的工作，订单系统往往都会存在状态多、链路长、逻辑复杂的特点，还存在多场景、多类型、多业务维度等业务特性。在保证订单状态流转稳定性的前提下、可扩展性和可维护性是我...

.Net6基础功能封装分享12(统一参数校验)

开发后台webapi接口，需要对接口传入的参数进行校验，如果传入的参数不符合验证规则，就直接返回参数错误，就需要封装统一参数校验过滤器；在.net6中，内置了DataAnnotations实现通过数据...

Path to prosperity for US and the world lies in cooperation, not confrontation

ThisisaneditorialfromChinaDaily.Turningadeafeartothe"handsoff"criesofprotestersnot...

C++ strategy策略模式

策略模式策略模式是一种行为设计模式，它定义了一组算法，他们可以以相同的接口共享。这种模式使用场景最多的就是在根据不同的条件选择不同的行为时，可以使用此模式进行解耦，使得你的代码更加易于维护和扩展，当然...

万字图文详解24种设计模式

一直想写一篇介绍设计模式的文章，让读者可以很快看完，而且一看就懂，看懂就会用，同时不会将各个模式搞混。自认为本文还是写得不错，花了不少心思来写这文章和做图，力求让读者真的能看着简单同时有所收获。设计模...

25000 字详解 23 种设计模式(多图 + 代码)

文章来源：https://javadoop.com/post/design-pattern目录创建型模式结构型模式行为型模式总结前言一直想写一篇介绍设计模式的文章，让读者可以很快看完，而且一看就懂，看...

C# 设计模式之-状态模式

问题引入仓库管理系统中，堆垛机任务的状态的变更，一般会引起一系列相关的的变更，如入库完成，就需要修改库位状态为：工作中；出库完成，则需要将任务对应的库位状态修改为：空闲；此时可以使用状态模式来将堆垛机...

seata-golang 接入指南

作者|刘晓敏来源|阿里巴巴云原生公众号seata-golang是一个分布式事务框架，实现了AT模式和TCC模式，AT模式相较TCC模式对代码的入侵性更小、需要开发的接口更少；但A...

一周热门
最近发表
标签列表