Javascript 实现[网红] 时间轮盘

话不多说，先上图。

成品链接

大致效果如上图，接下来就开始制作吧。

HTML部分：

我们需要将容器旋转rotate使之以圆点为中心。

怎么转呢，请看图。

将同一级的容器用一个大的容器包裹起来，绝对定位。这时，所有的子容器会重合在一起。

然后我们用360°去除以子容器个数，可以得到每个子容器的角度差，采用角度差来旋转每个容器。

效果如图：

我们可以看到，他是重合在一起的，应位默认的旋转中心是容器的中心，

这时我们需要改变旋转中心点，

添加css属性 transform-origin: -50% 50%;

效果如图：

我们可以发现此时旋转过后的图形超出了父容器，所以需要改变他的位置，根据旋转可知。

图形总长度为子容器长度的3倍（中间空白处为一个子容器长度）

高度为空白处高度加上子容器高度的两倍

经过位置变换（再填上文字）

效果如图：

以上讲解代码如下：

<!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"><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 同理为分、秒的// weekvar weekRote = 360 / 7 * (week);// hoursvar hoursRote = 360 / 12 * (hours) + rotateIndexH * 360;// minites secondesvar 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: 0;margin: 0;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: 9;
}
.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: 8;
}
.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: 7;
}
.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: 6;
}
.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: 10;
}
.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 同理为分、秒的// weekvar weekRote = 360 / 7 * (week);// hoursvar hoursRote = 360 / 12 * (hours) + rotateIndexH * 360;// minites secondesvar 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;
}

欢迎交流学习。

转载请注明出处，谢谢！

转载于:https://www.cnblogs.com/tcxq/p/10758647.html

Javascript 实现[网红] 时间轮盘相关推荐

太空人时间HTML,基于JavaScript实现网红太空人表盘的完整代码
一.效果展示用javascript写的一个太空人表盘. 二.源代码 html代码太空人表盘 function WatchMeter() { // 初始化dom this._initDom() // ...
基于JavaScript实现网红太空人表盘
一.效果展示用javascript写的一个太空人表盘.源码请从文章末尾获取下载二.源代码 html代码 <html> <head><title>太空人表盘< ...
用JavaScript实现网红太空人表盘（绝对详细、绝对原创），附源码下载
引言:网上最近太空人表盘很火,之前看到有个兄弟用svg写的,但是我也不会这个啊,我就琢磨着用canvas写了一个,效果感觉还不错,拿出来大家唠唠! 效果图: 思路分两个画布来绘制,画布1用来放置不动 ...
抖音网红动态轮盘时钟APP
轮盘时钟是一款简单实用的手机壁纸设置软件,用户可以根据壁纸上不断移动的轮盘来看当前时间,支持炫酷的旋转功能,就像时钟指针,但是轮盘上都是分秒文字,需要的可以下载轮盘时钟使用! 轮盘时钟使用方法点击下 ...
马云怒赞的93年网红区块链工程师，教你如何用3年时间实现逆袭
摘要: 小蚂蚁说: 之前的文章里我们给大家介绍过<蚂蚁技术人 | 29岁支付宝工程师告诉你:8年,如何从菜鸟到全球化团队leader?>,名牌大学出身的他,8年时间,将自己从菜鸟修炼成了支 ...
逆战小白提升日記——网红时钟罗盘北京时间页代码
网红时钟罗盘北京时间页代码,教程请看上一篇博客,有疑问请评论留言.... **HTML架构代码** <!DOCTYPE html> <html lang="en" ...
android 时钟字体下载,网红文字时钟轮盘手机版下载-网红文字时钟work clock安卓版下载 v1.0_5577安卓网...
网红文字时钟work clock最新手机版提供,一款能够实现桌面时钟的手机壁纸.锁屏类软件,通过软件你可以让自己的手机桌面变成趣味的文字时钟哦,最近抖音和网红都在使用的壁纸APP,你也来下载使用吧! ...
网红警犬成长记：训导员“和它在一起时间比家人多”
今年3岁的"托尼"是一只东德牧羊犬,也是青藏铁路公安局西宁公安处的"网红"警犬,与铁警肖向国一起执勤时总能迎来乘客们的注视. 罗云鹏摄今年3岁的" ...
“网红” WebAssembly 与 K8s 如何实现双剑合璧？
作者 | 易立阿里巴巴资深技术专家导读:WebAssembly 技术已经走出浏览器,让计算无处不在.本文利用 containerd 的扩展机制,可以为 WebAssembly 应用提供与其他容器 ...

Javascript 实现[网红] 时间轮盘

Javascript 实现[网红] 时间轮盘相关推荐

最新文章

热门文章