200⾏，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">
<title>旋转时钟</title>
<!-- <script src="clock.js"></script> -->
<style>
* {
margin: 0;
padding: 0;
background: #000;
}
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
#clock {
position: relative;
width: 100%;
height: 100%;
}
.label {
display: inline-block;
text-align: center;
padding: 5px 5px;
font-size: 20px;
font-family: 楷体;
transition: left 1s, top 1s;
transform-origin: 0 0;
}
</style>
</head>
<body>
<div id="clock"></div>
<script>
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]
];
// 判断是否为旋转页⾯
let isRotating = true;
//时钟页⾯
let clock;
init();
/
/ 每隔100ms获得 当前时间
setInterval(function () {
runTime();
}, 100);
// 旋转之前定位到当前时间
locateCurrent();
// 3秒后变成旋转样式
setTimeout(function () {
toRotate();
}, 3000);
}
/
/ 初始化函数
function init() {
clock = ElementById('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);
}
}
}
// 创建标签并将⽂字填充标签内 接收参数为⽂字内容 function createLabel(text) {
let div = ateElement('div');
div.classList.add('label');
div.innerText = text;
return div;
}
function runTime() {
//当前时间获取
let now = new Date();
let month = Month();
let day = Date();
let week = Day();
let hour = Hours();
let minute = Minutes();
let seconds = Seconds();
// 初始化时间颜⾊ 并将⾛过的时间设置为⿊⾊
initStyle();
// 当前时间设为与背景⾊对⽐度⾼⼀点的颜⾊
// 将当前时间⽉份存放在数组中
let nowValue = [month, day - 1, week, hour, minute, seconds];
for (let i = 0; i < nowValue.length; i++) {
let num = nowValue[i];
timeTextSet[i][1][num].lor = '#fff';
}
// 变成旋转时钟
if (isRotating) {
// 圆⼼位置确定
let widthMid = document.body.clientWidth / 2;
let heightMid = document.body.clientHeight / 2;
// 将每⼀个dom元素确定到圆的位置
html导航源码for (let i = 0; i < timeTextSet.length; i++) {
for (let j = 0; j < timeTextSet[i][0].length; j++) {
// 计算出每⼀个元素的位置 x y 坐标，圆的半径与时分秒的位置有关 let r = (i + 1) * 35 + 50 * 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 * s(deg * Math.PI / 180);
// 样式
let temp = timeTextSet[i][1][j];
ansform = 'rotate(' + (-90 + deg) + 'deg)';
temp.style.left = x + 'px';
p = y + 'px';
}
}
}
}
function initStyle() {
// 将所有标签置为灰⾊
let label = ElementsByClassName('label');
for (let i = 0; i < label.length; i++) {
label[i].lor = '#666';
}
}
function locateCurrent() {
for (let i = 0; i < timeTextSet.length; i++) {
for (let j = 0; j < timeTextSet[i][1].length; j++) {
// 获取原来的位置 再修改position 设置left top
let tempX = timeTextSet[i][1][j].offsetLeft + "px"; let tempY = timeTextSet[i][1][j].offsetTop + "px"; // console.log(timeTextSet[i][1][j]);
// 利⽤let 防⽌闭包
setTimeout(function () {
timeTextSet[i][1][j].style.position = "absolute"; timeTextSet[i][1][j].style.left = tempX;
timeTextSet[i][1][j].p = tempY;
}, 50);
}
}
}
function toRotate() {
isRotating = true;
ansform = "rotate(90deg)";
}
</script>
</body>
</html>
///源码你拿⾛了，不留个脚印吗！！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论