JS版罗盘时钟
2019-11-08 本文已影响0人
青山旁小溪边
无聊刷抖音，看到罗盘时钟壁纸很炫酷，无奈只会点js皮毛的我就想着试试能不能把这玩意搞出个js版本的出来我玩玩。
先上个图看看效果？
哇塞！是不是挺酷的，难？其实一点都不难
这个没有依赖任何插件库，纯js+html+css组成
技术要点就是每个生成的dom的坐标计算好
实现过程
先创建一个clock.html,内容如下：
<!--
* @Description: 罗盘时钟
* @Author: Jasper
* @Github: https://github.com/yuanxinfeng
* @Date: 2019-11-07 15:41:09
* @LastEditors: Jasper
* @LastEditTime: 2019-11-08 10:25:41
-->
<!DOCTYPE html>
<html lang="z-cn">
<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>
<link rel="stylesheet" href="./clock.css" />
</head>
<body>
<div class="fullScreen">
<button onclick="toggleFullScreen()">全屏</button>
</div>
<div id="clock"></div>
</body>
<script src="./clock.js"></script>
<script src="./fullScreen.js"></script>
</html>
这里我添加了一个 全屏功能，先说下这个
这个要判断好浏览器的兼容性
/*
* @Description: fullScreen
* @Author: Jasper
* @Github: https://github.com/yuanxinfeng
* @Date: 2019-11-08 09:55:02
* @LastEditors: Jasper
* @LastEditTime: 2019-11-08 09:55:24
*/
let fullscreen = false;
function toggleFullScreen() {
let element = document.documentElement;
let btn = document.querySelector("button");
// 判断是否已经是全屏
// 如果是全屏，退出
if (fullscreen) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
// console.log('已还原！');
btn.innerText = "全屏";
} else {
// 否则，进入全屏
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
// IE11
element.msRequestFullscreen();
}
// console.log('已全屏！');
btn.innerText = "退出";
}
fullscreen = !fullscreen;
}
样式方面这里只是做一些基础
* {
margin: 0;
padding: 0;
background: #c1c1c7;
}
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
#clock {
position: relative;
width: 100%;
height: 100%;
}
.label {
display: inline-block;
text-align: center;
padding: 0 2px;
font-size: 12px;
font-family: 楷体;
transition: left 1s, top 1s;
transform-origin: 0 0;
}
.fullScreen{
position: fixed;
width: 10wh;
}
button{
border: none;
padding: 10px;
margin: 10px;
position: relative;
left: 20px;
top: 20px;
font-size: 18px;
cursor: pointer;
}
button:focus{
outline: none;
}
重头戏来了js实现逻辑
首页要先把需要用到的一些基本数据做处理
let monthText = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
let dayText = [ "一号", "二号", "三号", "四号", "五号", "六号", "七号", "八号", "九号", "十号", "十一号", "十二号", "十三号", "十四号", "十五号", "十六号", "十七号", "十八号", "十九号", "二十号", "二十一号", "二十二号", "二十三号", "二十四号", "二十五号", "二十六号", "二十七号", "二十八号", "二十九号", "三十号", "三十一号"];
let weekText = [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
let hourText = [ "零点", "一点", "两点", "三点", "四点", "五点", "六点", "七点", "八点", "九点", "十点", "十一点", "十二点", "十三点", "十四点", "十五点", "十六点", "十七点", "十八点", "十九点", "二十点", "二十一点", "二十二点", "二十三点"];
let minuteText = [ "零分", "一分", "二分", "三分", "四分", "五分", "六分", "七分", "八分", "九分", "十分", "十一分", "十二分", "十三分", "十四分", "十五分", "十六分", "十七分", "十八分", "十九分", "二十分", "二十一分", "二十二分", "二十三分", "二十四分", "二十五分", "二十六分", "二十七分", "二十八分", "二十九分", "三十分", "三十一分", "三十二分", "三十三分", "三十四分", "三十五分", "三十六分", "三十七分", "三十八分", "三十九分", "四十分", "四十一分", "四十二分", "四十三分", "四十四分", "四十五分", "四十六分", "四十七分", "四十八分", "四十九分", "五十分", "五十一分", "五十二分", "五十三分", "五十四分", "五十五分", "五十六分", "五十七分", "五十八分", "五十九分", "六十分"];
let secondText = [ "一秒", "二秒", "三秒", "四秒", "五秒", "六秒", "七秒", "八秒", "九秒", "十秒", "十一秒", "十二秒", "十三秒", "十四秒", "十五秒", "十六秒", "十七秒", "十八秒", "十九秒", "二十秒", "二十一秒", "二十二秒", "二十三秒", "二十四秒", "二十五秒", "二十六秒", "二十七秒", "二十八秒", "二十九秒", "三十秒", "三十一秒", "三十二秒", "三十三秒", "三十四秒", "三十五秒", "三十六秒", "三十七秒", "三十八秒", "三十九秒", "四十秒", "四十一秒", "四十二秒", "四十三秒", "四十四秒", "四十五秒", "四十六秒", "四十七秒", "四十八秒", "四十九秒", "五十秒", "五十一秒", "五十二秒", "五十三秒", "五十四秒", "五十五秒", "五十六秒", "五十七秒", "五十八秒", "五十九秒", "六十秒"];
// 存放dom元素的数组
let monthList = [];
let dayList = [];
let weekList = [];
let hourList = [];
let minuteList = [];
let secondList = [];
//二维数组 存放文字内容及页面显示标签
let timeTextSet = [
[monthText, monthList],
[dayText, dayList],
[weekText, weekList],
[hourText, hourList],
[minuteText, minuteList],
[secondText, secondList]
];
基础数据有了，初始化dom，把所有的dom添加到相应节点中
// 初始化函数
function init() {
clock = document.getElementById("clock");
// 生成标签 存放文字展示
for (let i = 0; i < timeTextSet.length; i++) {
for (let j = 0; j < timeTextSet[i][0].length; j++) {
let temp = createLabel(timeTextSet[i][0][j]);
clock.appendChild(temp);
// 将生成的标签存放在数组list中
timeTextSet[i][1].push(temp);
}
}
}
获取当前时间
//当前时间获取
let now = new Date();
let month = now.getMonth();
let day = now.getDate();
let week = now.getDay();
let hour = now.getHours();
let minute = now.getMinutes();
let seconds = now.getSeconds();
重点
通过添加到节点上的dom动态修改其所在坐标位置
// 圆心位置确定
let widthMid = document.body.clientWidth / 2;
let heightMid = document.body.clientHeight / 2;
// 将每一个dom元素确定到圆的位置
for (let i = 0; i < timeTextSet.length; i++) {
for (let j = 0; j < timeTextSet[i][0].length; j++) {
// 计算出每一个元素的位置 x y 坐标，圆的半径与时分秒的位置有关
let r = (i + 1) * 25 + 30 * i;
// 计算每一个平均的角度 将每一个单位对齐,再转化成弧度
let deg = (360 / timeTextSet[i][1].length) * (j - nowValue[i]);
// 计算dom元素的坐标
let x = r * Math.sin((deg * Math.PI) / 180) + widthMid;
let y = heightMid - r * Math.cos((deg * Math.PI) / 180);
// 样式
let temp = timeTextSet[i][1][j];
temp.style.transform = "rotate(" + (-90 + deg) + "deg)";
temp.style.left = x + "px";
temp.style.top = y + "px";
}
}
主要逻辑就是这样了，看看是不是很简单就实现了这么一个酷炫的罗盘时钟。
以上主要是罗列出来重要代码，由于代码过长，这里就不把全部代码呈现了，想要代码的-->传送门（满意请star）
