话不多说，先上图。
成品链接
![Javascript 实现[网红] 时间轮盘](https://img.zhankr.net/chjszzwsdnz91574.png)
![Javascript 实现[网红] 时间轮盘](https://img.zhankr.net/vnqf3napjmv91575.png)
![Javascript 实现[网红] 时间轮盘](https://img.zhankr.net/u0egi4kkj4s91576.png)
大致效果如上图，接下来就开始制作吧。
HTML部分：
我们需要将容器旋转rotate使之以圆点为中心。
怎么转呢，请看图。
![Javascript 实现[网红] 时间轮盘](https://img.zhankr.net/bhridq2rrka91577.png)
将同一级的容器用一个大的容器包裹起来，绝对定位。这时，所有的子容器会重合在一起。
然后我们用360°去除以子容器个数，可以得到每个子容器的角度差，采用角度差来旋转每个容器。
效果如图：
![Javascript 实现[网红] 时间轮盘](https://img.zhankr.net/kqnj1bygmjv91578.png)
我们可以看到，他是重合在一起的，应位默认的旋转中心是容器的中心，
这时我们需要改变旋转中心点，
添加css属性 transform-origin: -50% 50%;
效果如图：
![Javascript 实现[网红] 时间轮盘](https://img.zhankr.net/mf5mzlbrgiv91579.png)
我们可以发现此时旋转过后的图形超出了父容器，所以需要改变他的位置，根据旋转可知。
图形总长度为子容器长度的3倍（中间空白处为一个子容器长度）
高度为 空白处高度加上 子容器高度的两倍
经过位置变换（再填上文字）
效果如图：
![Javascript 实现[网红] 时间轮盘](https://img.zhankr.net/en04fif4nld91580.png)
以上讲解代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>时间轮盘 一</title>
<style>
#wrapper {
width: 500px;
height: 500px;
margin: 100px auto;
background: #ccc;
}
.container {
width: 100%;
height: 100%;
position: relative;
left: 300px;
top: 210px;
}
.box {
width: 150px;
height: 30px;
background: orange;
/* border: 1px solid black; */
position: absolute;
top: 0;
left: 0;
transform-origin: -50% 50%;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="container">
<div class="box">我是1</div>
<div class="box" style="transform: rotate(45deg)">我是2</div>
<div class="box" style="transform: rotate(90deg)">我是3</div>
<div class="box" style="transform: rotate(135deg)">我是4</div>
<div class="box" style="transform: rotate(180deg)">我是5</div>
<div class="box" style="transform: rotate(225deg)">我是6</div>
<div class="box" style="transform: rotate(270deg)">我是7</div>
<div class="box" style="transform: rotate(315deg)">我是</div>
</div>
</div>
</body>
</html>
基本布局就是这样，接下来我们需要多制作几个，分别存放星期、时分秒。
成品HTML代码部分如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/TimeRoulette.css" rel="external nofollow" >
<title>时间轮盘</title>
</head>
<body>
<div class="wrapper">
<h1 class="workTitle">时间轮盘</h1>
<p class="one-text">天可补，海可填，南山可移，日月既往,不可复追。</p>
<div class="timeBox">
<div class="year-wrapper" title="点击更换背景图片">
<p></p>
</div>
<div class="week-wrapper">
<ul class="week-content"> </ul>
</div>
<div class="hours-wrapper">
<ul class="hours-content"> </ul>
</div>
<div class="minutes-wrapper">
<ul class="minutes-content"> </ul>
</div>
<div class="seconds-wrapper">
<ul class="seconds-content"> </ul>
</div>
</div>
</div>
</body>
<script src="js/jquery.js"></script>
<script src="js/TimeRoulette.js"></script>
</html>
大家可以发现，我们的hrml中并没有数据，有关星期，时分秒，的数据我们通过js生成，毕竟太多了，而且有规律可循。
这里我们使用了jquery来实现dom操作
接下来就是JS部分了！
首先我们需要几个函数，将数字转换成大写(仅做了1000以内)，将年份转化为干纪年法(显得霸气)，将24小时转化为时辰（实现一半，所以此处未加上）
// 数字大小写转换
function numberToZh(num) {
var zh = ["零","壹","贰","叁","肆","伍","陆","柒","捌","玖","拾","佰","仟","万"];
var res = "";
if(num <= 10) {
res = zh[num];
} else if(num < 20) {
var bits = num % 10;
res = zh[10] + zh[bits];
} else if(num < 100) {
var bits = num % 10;
var decade = parseInt(num / 10);
if(bits == 0) {
res = zh[decade] + zh[10] + "整";
} else {
res = zh[decade] + zh[10] + zh[bits];
}}
return res;
}// 干支纪年法
function toAncientYear(year) {
var sky = ["", "辛", "壬", "癸", "甲", "乙", "丙", "丁", "戊", "己", "庚"];
var land = ["", "酉", "戌", "亥", "子", "丑", "寅", "卯", "辰", "巳", "午", "未", "申"];// 用年份除以10得数中余数相对应的便是天干
var one = year % 10;
// 用年份除以12得数中余数相对应的便是地支
var two = year % 12;var res = sky[one] + land[two];
return res;
}//时间转时辰
function toAncientHours(num) {
var res = "";
switch(num) {
case 1 : res = "子";break;
case 2 : res = "丑";break;
case 3 : res = "寅";break;
case 4 : res = "卯";break;
case 5 : res = "辰";break;
case 6 : res = "巳";break;
case 7 : res = "午";break;
case 8 : res = "未";break;
case 9 : res = "申";break;
case 10 : res = "酉";break;
case 11 : res = "戌";break;
case 12 : res = "亥";break;
}
return res;
}
有了这几个小函数，我们就可以初始化时间轮盘了
代码：
function init() {// 更换背景图片
$(".timeBox .year-wrapper").click(function(){
$("body").css("background-image", "url(images/background"+ Math.ceil(Math.random()*4) +".jpg)")
})
// 设置文本值
setNumText();// 设置干支纪年时间
var nowYear = (new Date).getFullYear();
var acientYear = toAncientYear(nowYear);
$(".year-wrapper p").text(acientYear).attr("title","公元" + nowYear + "农历" + acientYear +"年");// 初始化内容位置，旋转到指定角度
var weekLen = $(".week-content li").length;
var weekDeg = 360/weekLen;
$(".week-content li").each(function(index) {
$(this).css({
"transform":"rotate("+index*weekDeg+"deg)",
"transform-origin":"-100% 50%",
"margin-left":parseInt($(this).css("width")) * 3 + "px",
"margin-top":parseInt($(this).css("width")) * 2 - 10 + "px"
})
})// 时
var hoursLen = $(".hours-content li").length;
var hoursDeg = 360/hoursLen;
$(".hours-content li").each(function(index) {
$(this).css({
"transform":"rotate("+index*hoursDeg+"deg)",
"transform-origin":"-250% 50%",
"margin-left":parseInt($(this).css("width")) * 6 + "px",
"margin-top":parseInt($(this).css("width")) * 3.5 - 10 + "px"
})
})//分
var minutesLen = $(".minutes-content li").length;
var minutesDeg = 360/minutesLen;
$(".minutes-content li").each(function(index) {
$(this).css({
"transform":"rotate("+index*minutesDeg+"deg)",
"transform-origin":"-400% 50%",
"margin-left":parseInt($(this).css("width")) * 9 + "px",
"margin-top":parseInt($(this).css("width")) * 5 - 10 + "px"
})
})//秒
var secondsLen = $(".seconds-content li").length;
var secondsDeg = 360/secondsLen;
$(".seconds-content li").each(function(index) {
$(this).css({
"transform":"rotate("+index*secondsDeg+"deg)",
"transform-origin":"-550% 50%",
"margin-left":parseInt($(this).css("width")) * 12 + "px",
"margin-top":parseInt($(this).css("width")) * 6.5 - 10 + "px"
})
})//每秒刷新一次
run();
}
// 设置文本内容
function setNumText(){
for(var i = 7; i > 0; i --) {
$(".week-content").append("<li data-time = "+ i +"> 星期"+ numberToZh(i) +"<li>")
}
for(var i = 12;i > 0; i --) {
$(".hours-content").append("<li data-time = "+ i +">"+ numberToZh(i) +"时<li>")
}
for(var i = 60;i > 0; i --) {
$(".minutes-content").append("<li data-time = "+ i +">"+ numberToZh(i) +"<li>")
}
for(var i = 60;i > 0; i --) {
$(".seconds-content").append("<li data-time = "+ i +">"+ numberToZh(i) +"<li>")
}
}
此时，项目的静态效果已经有了，我们需要让他动起来，也就是上面代码中的run()函数
// 刷新轮盘
function run() {
clearInterval(timer);
var date = new Date();//获取本地时间
// 分别获取时分秒年
var week = date.getDay();
var hours = date.getHours() % 12;
var minutes = date.getMinutes();
var seconds = date.getSeconds(); // 计算对应的旋转角度差
// rotateIndexH 为定义的全局变量，存储了小时的旋转圈数
// rotateIndexM、rotateIndexS 同理为分、秒的
// week
var weekRote = 360 / 7 * (week); // hours
var hoursRote = 360 / 12 * (hours) + rotateIndexH * 360; // minites secondes
var tempDeg = 360 / 60;
var minutesRote = tempDeg * (minutes) + rotateIndexM * 360;
var secondsRote = tempDeg * (seconds) + rotateIndexS * 360;
//var secondsRote = tempDeg * (seconds + 1) + rotateIndexS*360; // 加一是为了滚到位置再变色，去掉会先变色再滚到位置 // 旋转 秒 的位置
$(".seconds-wrapper").css("transform", "rotate(" + secondsRote + "deg)"); // 点亮 由于时间是从0开始计数的所以这里判断
var secondDot = seconds == 0 ? 60 : seconds;
var minuteDot = minutes == 0 ? 60 : minutes;
var hourDot = hours == 0 ? 60 : hours;
var weekDot = hours == 0 ? 7 : week;
// $(".hour-content li[data-time="+hourDot+"]").addClass("active").next("li").removeClass("active");
// $(".minutes-content li[data-time="+minuteDot+"]").addClass("active").prev("li").removeClass("active");
//$(".seconds-content li[data-time='"+secondDot+"']").addClass("active").next("li").removeClass("active"); //为了节省性能，每当秒满60时，才去指向时、分的
if (seconds == 59 || rotateIndexH == 0) {
$(".week-wrapper").css("transform", "rotate(" + weekRote + "deg)");
$(".hours-wrapper").css("transform", "rotate(" + hoursRote + "deg)");
$(".minutes-wrapper").css("transform", "rotate(" + minutesRote + "deg)"); //给当前时间的节点添加active 类 （这里 练一下选择器所以写成了一句。）
$(".week-content li[data-time=" + weekDot + "]").parents("ul:first").children("li[class='active']").removeClass("active").end().end().addClass("active");
$(".hours-content li[data-time=" + hourDot + "]").parents("ul:first").children("li[class='active']").removeClass("active").end().end().addClass("active");
$(".minutes-content li[data-time=" + minuteDot + "]").parents("ul:first").children("li[class='active']").removeClass("active").end().end().addClass("active");
} // 秒时每秒都需要更新的
$(".seconds-content li[data-time=" + secondDot + "]").parents("ul:first").children("li[class='active']").removeClass("active").end().end().addClass("active"); // 旋转圈数加一（解决360°转到0°时的bug）
hours === 11 ? rotateIndexH++ : 0;
minutes === 59 ? rotateIndexM++ : 0;
seconds === 59 ? rotateIndexS++ : 0; // 让函数一秒钟执行一次
var timer = setTimeout(run, 1000);
}
具体都做了详细的注释，这里就不多提，有个小问题，
$(".seconds-content li[data-time='"+secondDot+"']").addClass("active").next("li").removeClass("active");
不能获取，有人知道原因吗。。。。
欢迎告知。CSS部分就不多说了，看代码：
*{
padding:;
margin:;
color: #eee;
user-select: none;
}
body {
background: #bebebe;
background-image: url(../images/background2.jpg);
background-repeat: no-repeat;
background-position:top;
background-attachment:fixed;
}
ul {
list-style: none;
}
li {
position: absolute;
display: inline-block;
}
.wrapper {
overflow: hidden;
height: 100vh;
box-sizing: border-box;
padding-top: 50px;
}
.timeBox {
margin: 5px auto;
width: 800px;
height: 800px;
/* background: #ccc; */
position: relative;
}
.wrapper .workTitle {
color: #878787;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
line-height: 2em;
letter-spacing: .3em;
}
.wrapper .one-text {
color: #dbdbdb;
text-align: center;
font-size: 18px;
font-style: italic;
text-shadow: 8px 7px 4px rgba(100,150,200,0.8);
letter-spacing: .2em;
}
.timeBox .week-wrapper {
transition: 1s;
position: absolute;
width: 200px;
height: 200px;
top: 300px;
left: 300px;
z-index:;
}
.timeBox .week-wrapper .week-content li {
width: 50px;
}
.timeBox .hours-wrapper {
transition: ease 1s;
position: absolute;
width: 350px;
height: 350px;
top: 225px;
left: 225px;
z-index:;
}
.timeBox .hours-wrapper .hours-content li {
width: 50px;
}
.timeBox .minutes-wrapper {
transition: 1s;
position: absolute;
width: 500px;
height: 500px;
top: 150px;
left: 150px;
z-index:;
}
.timeBox .minutes-wrapper .minutes-content li {
width: 50px;
}
.timeBox .seconds-wrapper {
transition: all 1s linear;
position: absolute;
width: 650px;
height: 650px;
top: 75px;
left: 75px;
z-index:;
}
.timeBox .seconds-wrapper .seconds-content li {
transition: .5s;
width: 50px;
}
.timeBox .year-wrapper {
width: 80px;
height: 80px;
border-radius: 50%;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
cursor: pointer;
z-index:;
}
.timeBox .year-wrapper p {
text-align: center;
line-height: 80px;
font-size: 18px;
font-weight: bold;
}
.timeBox .year-wrapper::after {
content:"";
display: block;
width: 300px;
height: 26px;
/* background:rgba(139,90,43); */
/* border:1px solid #aaa;
border-radius: 3px; */
position: absolute;
top:27px;
left: 80px;
}
.active {
/* color: rgb(139,90,43); */
color: #FF7F00;
}
@media screen and (max-width:700px) {
.wrapper .timeBox {
transform: scale(0.5,0.5) translate(-50%,-50%);
margin: 0 auto;
}
.wrapper .timeBox ul li {
font-size:16px;
}
}
最后，附上完整的代码;
var rotateIndexH = 0;
var rotateIndexM = 0;
var rotateIndexS = 0;
init();function init() { // 更换背景图片
$(".timeBox .year-wrapper").click(function () {
$("body").css("background-image", "url(images/background" + Math.ceil(Math.random() * 4) + ".jpg)")
})
// 设置文本值
setNumText(); // 设置干支纪年时间
var nowYear = (new Date).getFullYear();
var acientYear = toAncientYear(nowYear);
$(".year-wrapper p").text(acientYear).attr("title", "公元" + nowYear + "农历" + acientYear + "年"); // 初始化内容位置，旋转到指定角度
var weekLen = $(".week-content li").length;
var weekDeg = 360 / weekLen;
$(".week-content li").each(function (index) {
$(this).css({
"transform": "rotate(" + index * weekDeg + "deg)",
"transform-origin": "-100% 50%",
"margin-left": parseInt($(this).css("width")) * 3 + "px",
"margin-top": parseInt($(this).css("width")) * 2 - 10 + "px"
})
}) // 时
var hoursLen = $(".hours-content li").length;
var hoursDeg = 360 / hoursLen;
$(".hours-content li").each(function (index) {
$(this).css({
"transform": "rotate(" + index * hoursDeg + "deg)",
"transform-origin": "-250% 50%",
"margin-left": parseInt($(this).css("width")) * 6 + "px",
"margin-top": parseInt($(this).css("width")) * 3.5 - 10 + "px"
})
}) //分
var minutesLen = $(".minutes-content li").length;
var minutesDeg = 360 / minutesLen;
$(".minutes-content li").each(function (index) {
$(this).css({
"transform": "rotate(" + index * minutesDeg + "deg)",
"transform-origin": "-400% 50%",
"margin-left": parseInt($(this).css("width")) * 9 + "px",
"margin-top": parseInt($(this).css("width")) * 5 - 10 + "px"
})
}) //秒
var secondsLen = $(".seconds-content li").length;
var secondsDeg = 360 / secondsLen;
$(".seconds-content li").each(function (index) {
$(this).css({
"transform": "rotate(" + index * secondsDeg + "deg)",
"transform-origin": "-550% 50%",
"margin-left": parseInt($(this).css("width")) * 12 + "px",
"margin-top": parseInt($(this).css("width")) * 6.5 - 10 + "px"
})
}) //每秒刷新一次
run();
}// 设置文本内容
function setNumText() {
for (var i = 7; i > 0; i--) {
$(".week-content").append("<li data-time = " + i + "> 星期" + numberToZh(i) + "<li>")
}
for (var i = 12; i > 0; i--) {
$(".hours-content").append("<li data-time = " + i + ">" + numberToZh(i) + "时<li>")
}
for (var i = 60; i > 0; i--) {
$(".minutes-content").append("<li data-time = " + i + ">" + numberToZh(i) + "<li>")
}
for (var i = 60; i > 0; i--) {
$(".seconds-content").append("<li data-time = " + i + ">" + numberToZh(i) + "<li>")
}
}// 数字大小写转换
function numberToZh(num) {
var zh = ["零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖", "拾", "佰", "仟", "万"];
var res = "";
if (num <= 10) {
res = zh[num];
} else if (num < 20) {
var bits = num % 10;
res = zh[10] + zh[bits];
} else if (num < 100) {
var bits = num % 10;
var decade = parseInt(num / 10);
if (bits == 0) {
res = zh[decade] + zh[10] + "整";
} else {
res = zh[decade] + zh[10] + zh[bits];
} }
return res;
}// 刷新轮盘
function run() {
clearInterval(timer);
var date = new Date();//获取本地时间
// 分别获取时分秒年
var week = date.getDay();
var hours = date.getHours() % 12;
var minutes = date.getMinutes();
var seconds = date.getSeconds(); // 计算对应的旋转角度差
// rotateIndexH 为定义的全局变量，存储了小时的旋转圈数
// rotateIndexM、rotateIndexS 同理为分、秒的
// week
var weekRote = 360 / 7 * (week); // hours
var hoursRote = 360 / 12 * (hours) + rotateIndexH * 360; // minites secondes
var tempDeg = 360 / 60;
var minutesRote = tempDeg * (minutes) + rotateIndexM * 360;
var secondsRote = tempDeg * (seconds) + rotateIndexS * 360;
//var secondsRote = tempDeg * (seconds + 1) + rotateIndexS*360; // 加一是为了滚到位置再变色，去掉会先变色再滚到位置 // 旋转 秒 的位置
$(".seconds-wrapper").css("transform", "rotate(" + secondsRote + "deg)"); // 点亮 由于时间是从0开始计数的所以这里判断
var secondDot = seconds == 0 ? 60 : seconds;
var minuteDot = minutes == 0 ? 60 : minutes;
var hourDot = hours == 0 ? 60 : hours;
var weekDot = hours == 0 ? 7 : week;
// $(".hour-content li[data-time="+hourDot+"]").addClass("active").next("li").removeClass("active");
// $(".minutes-content li[data-time="+minuteDot+"]").addClass("active").prev("li").removeClass("active");
//$(".seconds-content li[data-time='"+secondDot+"']").addClass("active").next("li").removeClass("active"); //为了节省性能，每当秒满60时，才去指向时、分的
if (seconds == 59 || rotateIndexH == 0) {
$(".week-wrapper").css("transform", "rotate(" + weekRote + "deg)");
$(".hours-wrapper").css("transform", "rotate(" + hoursRote + "deg)");
$(".minutes-wrapper").css("transform", "rotate(" + minutesRote + "deg)"); //给当前时间的节点添加active 类 （这里 练一下选择器所以写成了一句。）
$(".week-content li[data-time=" + weekDot + "]").parents("ul:first").children("li[class='active']").removeClass("active").end().end().addClass("active");
$(".hours-content li[data-time=" + hourDot + "]").parents("ul:first").children("li[class='active']").removeClass("active").end().end().addClass("active");
$(".minutes-content li[data-time=" + minuteDot + "]").parents("ul:first").children("li[class='active']").removeClass("active").end().end().addClass("active");
} // 秒时每秒都需要更新的
$(".seconds-content li[data-time=" + secondDot + "]").parents("ul:first").children("li[class='active']").removeClass("active").end().end().addClass("active"); // 旋转圈数加一（解决360°转到0°时的bug）
hours === 11 ? rotateIndexH++ : 0;
minutes === 59 ? rotateIndexM++ : 0;
seconds === 59 ? rotateIndexS++ : 0; // 让函数一秒钟执行一次
var timer = setTimeout(run, 1000);
}// 干支纪年法
function toAncientYear(year) {
var sky = ["", "辛", "壬", "癸", "甲", "乙", "丙", "丁", "戊", "己", "庚"];
var land = ["", "酉", "戌", "亥", "子", "丑", "寅", "卯", "辰", "巳", "午", "未", "申"]; // 用年份除以10得数中余数相对应的便是天干
var one = year % 10;
// 用年份除以12得数中余数相对应的便是地支
var two = year % 12; var res = sky[one] + land[two];
return res;
}//时间转时辰
function toAncientHours(num) {
var res = "";
switch (num) {
case 1: res = "子"; break;
case 2: res = "丑"; break;
case 3: res = "寅"; break;
case 4: res = "卯"; break;
case 5: res = "辰"; break;
case 6: res = "巳"; break;
case 7: res = "午"; break;
case 8: res = "未"; break;
case 9: res = "申"; break;
case 10: res = "酉"; break;
case 11: res = "戌"; break;
case 12: res = "亥"; break;
}
return res;
}
欢迎交流学习。
转载请注明出处，谢谢！
源码地址 提取码：aiml
