怎么设置桌面罗盘时间（罗盘时钟设置为电脑桌面）
怎么设置桌面罗盘时间（罗盘时钟设置为电脑桌面）选择以后就可以啦。截取右边一部分大家看看。因为win10已经不支持选择html做桌面了，但是lively wallpaper是可以的。首先代码也要优化一下，因为做桌面的话，背景不能是方的，而且要居中。末尾附上最新代码吧。1、要下载lively wallpaper。用windows自带的应用商城就可以，左下角搜索。点击进去，然后安装。二、安装好以后，选择上一个文章制作的html。
之前的文章有一篇怎么做罗盘时钟的，有朋友问如何放电脑桌面。
上一篇文章在这：
自制酷酷罗盘时钟（附代码）
这里补充一下设置为电脑桌面的教程；
首先代码也要优化一下，因为做桌面的话，背景不能是方的，而且要居中。末尾附上最新代码吧。
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 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>
