先上图
背景可以随意更换成自己喜欢的壁纸桌面
注意：不用修改文件名，替换图片即可，图片一定要和css文件在同级目录。
源码文件在文末
这个css代码块
* {margin: 0;padding: 0;}body {font-size: 18px;color: #ffffff;font-weight: bold;font-family: 'Microsoft YaHei', 'Times New Roman', Times, serif;background: url(bg30.jpg) no-repeat;padding: 0;margin: 0;background-size: cover;-webkit-background-size: cover;-moz-background-size: cover; }.wrap {width: 100%;height: 100%;position: fixed;left: 50%;top: 50%;}ul li {list-style: none;width: 64px;height: 64px;line-height: 64px;margin: 0;text-align: center;position: absolute;left: -32px;top: -32px;}/*元素被选中的样式*/.elementActive {color: rgb(118, 7, 155);font-weight: bold;}
下面是html的部分代码
<!DOCTYPE html><html><head><meta charset="utf-8"><title>时间罗盘</title><link href="css/style.css" rel="stylesheet"/><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/index.js"></script></head><body><div class="wrap"><div id="yearId"><ul><li class="elementActive">年</li></ul></div><div id="monthId"><ul><li>01月</li><li>02月</li><li>03月</li><li>04月</li><li>05月</li><li>06月</li><li>07月</li><li>08月</li><li>09月</li><li>10月</li><li>11月</li><li>12月</li></ul></div>
$(function () {/*** 旋转元素* @param elementId 元素Id* @param currNumber 日期数值* @param translateNumber 元素距离中心点的距离*/function rotateElement(elementId, currNumber, translateNumber) {const $id = $('#' + elementId + ' ul li');// 圆所包含的元素个数let circleSize = $id.size();// 计算平均每个角的弧度let circleDeg = 360 / circleSize;// 计算角的弧度偏差let offsetDeg = circleDeg * currNumber;// 对与当前时间匹配的元素添加样式并去除其它元素的样式$id.eq(currNumber).addClass('elementActive').siblings().removeClass('elementActive');// 渲染所有元素for (let i = 0; i < circleSize; ++i) {$id.eq(i).css({'transition': currNumber === 0 ? '' : '.8s transform','transform': 'rotate(' + (circleDeg * i - offsetDeg) + 'deg) translate(' + translateNumber + 'px, 0px)'})}}function init(callback) {let date = new Date();$("#yearId ul li").text(date.getFullYear() + "年");rotateElement('secondId', date.getSeconds(), 305);rotateElement('minusId', date.getMinutes(), 255);rotateElement('hourId', date.getHours(), 205);rotateElement('weekId', date.getDay() - 1, 155);rotateElement('dayId', date.getDate() - 1, 115);rotateElement('monthId', date.getMonth(), 65);rotateElement('yearId', date.getFullYear(), 0);(callback instanceof Function) && callback();}// 先初始化init(function () {// 循环调度setInterval(function () {init();}, 1000);});});
下期博客教大家如何更换成电脑桌面
一定要注意压缩包解压后的3个文件一定要在同一个文件夹下，下面时bai度wangpan
链接:/s/10TOfcUkxJxcNpsYPRItJUg?pwd=1245
提取码:1245
