之前的文章有一篇怎么做罗盘时钟的，有朋友问如何放电脑桌面。

上一篇文章在这：

自制酷酷罗盘时钟（附代码）

这里补充一下设置为电脑桌面的教程；

首先代码也要优化一下，因为做桌面的话，背景不能是方的，而且要居中。末尾附上最新代码吧。

1、要下载lively wallpaper。用windows自带的应用商城就可以，左下角搜索。点击进去，然后安装。

罗盘时钟怎么设置到手机桌面（罗盘时钟设置为电脑桌面）(1)

罗盘时钟怎么设置到手机桌面（罗盘时钟设置为电脑桌面）(2)

罗盘时钟怎么设置到手机桌面（罗盘时钟设置为电脑桌面）(3)

二、安装好以后，选择上一个文章制作的html。

因为win10已经不支持选择html做桌面了，但是lively wallpaper是可以的。

罗盘时钟怎么设置到手机桌面（罗盘时钟设置为电脑桌面）(4)

选择以后就可以啦。截取右边一部分大家看看。

罗盘时钟怎么设置到手机桌面（罗盘时钟设置为电脑桌面）(5)

最新代码如下：

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

,