注意：不用修改文件名，替换图片即可，图片一定要和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

链接:https://pan.baidu.com/s/10TOfcUkxJxcNpsYPRItJUg?pwd=1245
提取码:1245

抖音炫酷时间罗盘，2D时间罗盘桌面（免费）用html，css和JavaScript实现相关推荐

520情人节送女朋友的3D相册礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐)
520情人节送女朋友的3D相册礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐) 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在追求的妹子一 ...
❤520情人节送女朋友的生日礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐)
❉ 520情人节送女朋友的3D相册礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐) 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在追求的妹 ...
❤女朋友生日❤ HTML+css3+js 实现抖音炫酷樱花3D相册 (含背景音乐)程序员表白必备
一年一度的/520/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现3D立体动态相册.赶紧学会了,来制作属于我们程序员的浪漫吧! ...
❤女朋友生日❤ HTML+css3+js 实现抖音炫酷樱花3D相册 (含背景音乐)程序员表白必备...
一年一度的/520/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现3D立体动态相册.赶紧学会了,来制作属于我们程序员的浪漫吧! ...
炫酷3D相册❤ 520七夕情人节表白网页制作❤(HTML+CSS+JavaScript)
师妹直呼"这也太哇塞了吧" ❤520七夕情人节表白网页制作❤(HTML+CSS+JavaScript) 520七夕节告白,也就是中国的情人节,你除了送花你还会什么?? 快来制作高端 ...
【报告分享】抖音蓝V账号定位及外化罗盘.pdf（附下载链接）
今天给大家分享的报告是字节跳动营销创业中心于2019年11月份发布的<抖音蓝V账号定位及外化罗盘.pdf>,报告从账号定位.内容表现形式/试错.内容深耕与延展等方面分析了每个抖音账号的生长 ...
纯CSS实现抖音3D酷炫旋转相册
序言最近在抖音上看到了一个酷炫3D旋转相册表白效果,博主我表示很是艳羡呐!而且博主也是做前端的,表示不能输给抖音上的小姐姐,于是我就自学了下CSS3的一些动画属性并实现了类似效果,现在分享给大家. ...
小红书用户画像分析_抖音用户画像分析及活跃时间点
今天小编来和大家分享一下,抖音用户画像的分析和抖音用户的活跃时间点, 1.重点的画像,是抖音受众人群高低线及分布率. 2.查询数据的技巧,如果是产品的话参考到阿里指数上查看,如果查行业的话,可以在百度 ...
抖音将会输给快手?时间会证明一切
"为什么快手产品的主界面上没有设置频道分类,这样带来的用户体验真的好吗?"在快手一个月之前的员工大会上,入职不久的新员工赵波提出了这个疑问. 这个问题不只是他一个人的.之前官方的解 ...

抖音炫酷时间罗盘，2D时间罗盘桌面（免费）用html，css和JavaScript实现

背景可以随意更换成自己喜欢的壁纸桌面

注意：不用修改文件名，替换图片即可，图片一定要和css文件在同级目录。

源码文件在文末

抖音炫酷时间罗盘，2D时间罗盘桌面（免费）用html，css和JavaScript实现相关推荐

最新文章

热门文章