当前位置：首页>科技>罗盘时钟怎么设置到手机桌面罗盘时钟设置为电脑桌面
发布时间：2026-07-21阅读(1)
之前的文章有一篇怎么做罗盘时钟的，有朋友问如何放电脑桌面。
上一篇文章在这：
自制酷酷罗盘时钟（附代码）
这里补充一下设置为电脑桌面的教程；
首先代码也要优化一下，因为做桌面的话，背景不能是方的，而且要居中。末尾附上最新代码吧。
1、要下载lively wallpaper。用windows自带的应用商城就可以，左下角搜索。点击进去，然后安装。
二、安装好以后，选择上一个文章制作的html。
因为win10已经不支持选择html做桌面了，但是lively wallpaper是可以的。
选择以后就可以啦。截取右边一部分大家看看。
最新代码如下：
<!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 auto;/*居中*/
padding:0;
background:#000;
}
#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 >
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
</div>
<div ></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>
Copyright © 2024 有趣生活 All Rights Reserve吉ICP备19000289号-5 TXT地图HTML地图XML地图
