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

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

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



复制以下代码，到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



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

相关推荐

js向对象中添加元素(对象，数组) js对象里面添加元素

一、添加一个元素对象名["属性名"]=值(值:可以是一个值,可以是一个对象,也可以是一个数组)这样添加进去的元素,就是一个值或对象或数组...

JS小技巧，如何去重对象数组?(一)

大家好，关于数组对象去重的业务场景，想必大家都遇到过类似的需求吧，这对这样的需求你是怎么做的呢。下面我就先和大家分享下如果是基于对象的1个属性是怎么去重实现的。方法一：使用.filter()和....

「C/C++」之数组、vector对象和array对象的比较

数组学习过C语言的，对数组应该都不会陌生，于是这里就不再对数组进行展开介绍。模板类vector模板类vector类似于string，也是一种动态数组。能够在运行阶段设置vector对象的长度，可以在末...

如何用sessionStorage保存对象和数组

背景：在工作中，我将[{},{}]对象数组形式，存储到sessionStorage，然后ta变成了我看不懂的形式，然后我想取之用之，发现不可能了～记录这次深刻的教训。$clickCouponIndex...

JavaScript Array 对象 javascript的array对象

Array对象Array对象用于在变量中存储多个值:varcars=["Saab","Volvo","BMW"];第一个数组元素的索引值为0，第二个索引值为1，以此类推。更多有...

JavaScript中的数组Array(对象) js array数组

1:数组Array:-数组也是一个对象-数组也是用来存储数据的-和object不同，数组中可以存储一组有序的数据，-数组中存储的数据我们称其为元素（element）-数组中的每一个元素都有一...

数组和对象方法&amp;数组去重 数组去重的5种方法前端

列举一下JavaScript数组和对象有哪些原生方法？数组：arr.concat(arr1,arr2,arrn);--合并两个或多个数组。此方法不会修改原有数组，而是返回一个新数组...

C++ 类如何定义对象数组?初始化数组?linux C++第43讲

对象数组学过C语言的读者对数组的概念应该很熟悉了。数组的元素可以是int类型的变量，例如int...

ElasticSearch第六篇:复合数据类型-数组，对象

在ElasticSearch中，使用JSON结构来存储数据，一个Key/Value对是JSON的一个字段，而Value可以是基础数据类型，也可以是数组，文档（也叫对象），或文档数组，因此，每个JSON...

第58条:区分数组对象和类数组对象

示例设想有两个不同类的API。第一个是位向量：有序的位集合varbits=newBitVector;bits.enable(4);bits.enable([1,3,8,17]);b...

八皇后问题解法(Common Lisp实现)

如何才能在一张国际象棋的棋盘上摆上八个皇后而不致使她们互相威胁呢？这个著名的问题可以方便地通过一种树搜索方法来解决。首先，我们需要写一个函数来判断棋盘上的两个皇后是否互相威协。在国际象棋中，皇后可以沿...

visual lisp修改颜色的模板函数 怎么更改visual studio的配色

（defunBF-yansemokuai(tuyuanyanse/ss)...

用中望CAD加载LISP程序技巧 中望cad2015怎么加载燕秀

1、首先请加载lisp程序，加载方法如下：在菜单栏选择工具——加载应用程序——添加，选择lisp程序然后加载，然后选择添加到启动组。2、然后是添加自定义栏以及图标，方法如下（以...

图的深度优先搜索和广度优先搜索(Common Lisp实现)

为了便于描述，本文中的图指的是下图所示的无向图。搜索指：搜索从S到F的一条路径。若存在，则以表的形式返回路径；若不存在，则返回nil。...

两个有助于理解Common Lisp宏的例子

在Lisp中，函数和数据具有相同的形式。这是Lisp语言的一个重大特色。一个Lisp函数可以分析另一个Lisp函数；甚至可以和另一个Lisp函数组成一个整体，并加以利用。Lisp的宏，是实现上述特色的...

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