前言
看見(jiàn)美好的事物，還是會(huì)很喜歡曲梗！今天在設(shè)置手機(jī)壁紙時(shí)赞警，看見(jiàn)有個(gè)炫酷的時(shí)間輪盤(pán)，覺(jué)得挺好看的虏两。于是想自己來(lái)實(shí)現(xiàn)一下
1.jpg
分析和準(zhǔn)備
由于只是一個(gè)小demo愧旦，就直接選擇用原生js來(lái)實(shí)現(xiàn)了，建立目錄結(jié)構(gòu)如下
image.png
css文件中定罢，可做一些簡(jiǎn)單的初始化樣式笤虫，為了方便我就直接引入reset.css：
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
index.html中引入demo.css和demo.js并添加div元素：
<div id="clock"></div>
JS部分
1. 首先聲明幾個(gè)數(shù)組
聲明幾個(gè)數(shù)組：monthText、dayText祖凫、weekText琼蚯、hourText 、minuteText蝙场、secondsText凌停， 分別各自文本，對(duì)應(yīng)月售滤、日罚拟、星期、時(shí)完箩、分赐俗、秒。主要是為了方便一會(huì)生成DOM
var monthText = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
var dayText = ["一號(hào)", "二號(hào)", "三號(hào)", "四號(hào)", "五號(hào)", "六號(hào)", "七號(hào)", "八號(hào)", "九號(hào)", "十號(hào)", "十一號(hào)", "十二號(hào)", "十三號(hào)", "十四號(hào)", "十五號(hào)", "十六號(hào)", "十七號(hào)", "十八號(hào)", "十九號(hào)", "二十號(hào)", "二十一號(hào)", "二十二號(hào)", "二十三號(hào)", "二十四號(hào)", "二十五號(hào)", "二十六號(hào)", "二十七號(hào)", "二十八號(hào)", "二十九號(hào)", "三十號(hào)", "三十一號(hào)"];
var weekText = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
var hourText = ["零點(diǎn)", "一點(diǎn)", "兩點(diǎn)", "三點(diǎn)", "四點(diǎn)", "五點(diǎn)", "六點(diǎn)", "七點(diǎn)", "八點(diǎn)", "九點(diǎn)", "十點(diǎn)", "十一點(diǎn)", "十二點(diǎn)", "十三點(diǎn)", "十四點(diǎn)", "十五點(diǎn)", "十六點(diǎn)", "十七點(diǎn)", "十八點(diǎn)", "十九點(diǎn)", "二十點(diǎn)", "二十一點(diǎn)", "二十二點(diǎn)", "二十三點(diǎn)"];
var minuteText = ["一分", "二分", "三分", "四分", "五分", "六分", "七分", "八分", "九分", "十分","十一分", "十二分", "十三分", "十四分", "十五分", "十六分", "十七分", "十八分", "十九分", "二十分","二十一分", "二十二分", "二十三分", "二十四分", "二十五分", "二十六分", "二十七分", "二十八分", "二十九分", "三十分", "三十一分", "三十二分", "三十三分", "三十四分", "三十五分", "三十六分", "三十七分", "三十八分", "三十九分", "四十分","四十一分", "四十二分", "四十三分", "四十四分", "四十五分", "四十六分", "四十七分", "四十八分", "四十九分", "五十分","五十一分", "五十二分", "五十三分", "五十四分", "五十五分", "五十六分", "五十七分", "五十八分", "五十九分", "六十分"];
var secondsText = ["一秒", "二秒", "三秒", "四秒", "五秒", "六秒", "七秒", "八秒", "九秒", "十秒","十一秒", "十二秒", "十三秒", "十四秒", "十五秒", "十六秒", "十七秒", "十八秒", "十九秒", "二十秒","二十一秒", "二十二秒", "二十三秒", "二十四秒", "二十五秒", "二十六秒", "二十七秒", "二十八秒", "二十九秒", "三十秒", "三十一秒", "三十二秒", "三十三秒", "三十四秒", "三十五秒", "三十六秒", "三十七秒", "三十八秒", "三十九秒", "四十秒", "四十一秒", "四十二秒", "四十三秒", "四十四秒", "四十五秒", "四十六秒", "四十七秒", "四十八秒", "四十九秒", "五十秒","五十一秒", "五十二秒", "五十三秒", "五十四秒", "五十五秒", "五十六秒", "五十七秒", "五十八秒", "五十九秒", "六十秒"];
2.聲明對(duì)應(yīng)空數(shù)組
為了操作DOM弊知，將DOM分類(lèi)存放阻逮。如月份相關(guān)的DOM放在monthList中，星期相關(guān)的DOM就放在weekList秩彤，依次類(lèi)推
var monthList = [];
var dayList = [];
var weekList = [];
var hourList = [];
var minuteList = [];
var secondsList = [];
3.聲明一個(gè)二維數(shù)組
二維數(shù)組主要用于存放文字內(nèi)容和頁(yè)面顯示標(biāo)簽
var textSet = [
[monthText, monthList],
[dayText, dayList],
[weekText, weekList],
[hourText, hourList],
[minuteText, minuteList],
[secondsText, secondsList]
]
4.初始化
定義一個(gè)初始化函數(shù)init叔扼，該函數(shù)主要用于生成標(biāo)簽元素，并將對(duì)應(yīng)的文本填入同時(shí)添加class為'label'漫雷，然后將生成的標(biāo)簽存放在各自的list中瓜富，最后在頁(yè)面加載后調(diào)用init。
function init() {
clock = document.getElementById('clock');
// 生成標(biāo)簽 存放文字展示
for (var i = 0; i < textSet.length; i++) {
for (var j = 0; j < textSet[i][0].length; j++) {
var temp = createLabel(textSet[i][0][j]);
clock.appendChild(temp);
textSet[i][1].push(temp);
}
}
}
// 創(chuàng)建標(biāo)簽并將文字填充標(biāo)簽內(nèi) 接收參數(shù)為文字內(nèi)容
function createLabel(text) {
var div = document.createElement('div');
div.classList.add('label');
div.innerText = text;
return div;
}
window.onload = function () {
init();
}
5.為label添加樣式
簡(jiǎn)單添加一下css樣式
html,body{
width:100%;
height:100%;
background-color: #000;
overflow: hidden;
}
body #clock {
position: relative;
width: 100%;
height: 100%;
background: black;
}
body #clock .label{
display:inline-block;
color:#4d4d4d;
text-align: center;
padding:0 5px;
font-size:19px;
transition:left 1s,top 1s;
transform-origin: 0% 0%;
}
6.接著降盹，添加一個(gè)定時(shí)器
這個(gè)定時(shí)器用于每隔一定時(shí)間更新頁(yè)面時(shí)間与柑，如：
window.onload = function () {
...
// 每隔100ms獲得 當(dāng)前時(shí)間 更新頁(yè)面時(shí)間顯示
setInterval(function () {
runTime();
}, 100);
}
這里用到一個(gè)runTime函數(shù)，這個(gè)函數(shù)主要作用是：
- 獲取當(dāng)前的時(shí)間
- 設(shè)置初始化樣式，并設(shè)置當(dāng)前時(shí)間的樣式
- 變成圓（確定圓心和各元素的位置）
function runTime() {
// 利用時(shí)間對(duì)象獲得 當(dāng)前 時(shí)間
var now = new Date();
// 獲得月 日期 小時(shí) 分鐘 秒鐘
var month = now.getMonth();
var day = now.getDate();
var week = now.getDay();
var hour = now.getHours();
var minute = now.getMinutes();
var seconds = now.getSeconds();
// 初始化時(shí)間顏色 同時(shí)將走過(guò)時(shí)間設(shè)置為灰色
initStyle();
// 設(shè)置當(dāng)前時(shí)間為白色
// 將當(dāng)前時(shí)間月份存放在數(shù)組中
var nowValue = [month, day - 1, week, hour, minute, seconds];
for (var i = 0; i < nowValue.length; i++) {
var num = nowValue[i];
textSet[i][1][num].style.color = '#fff';
}
// 變成圓形
if (isCircle) {
// 確定圓心
var widthMid = document.body.clientWidth / 2;
var heightMid = document.body.clientHeight / 2;
// 將每一個(gè)dom元素確定到圓的位置
for (var i = 0; i < textSet.length; i++) {
for (var j = 0; j < textSet[i][0].length; j++) {
// 加算出每一個(gè)元素的位置 x y 坐標(biāo)
// 每一個(gè)圓的半徑與時(shí)分秒的位置有關(guān)
var r = (i + 1) * 35 + 50 * i;
// 計(jì)算每一個(gè)平均的角度 再將每一個(gè)單位對(duì)齊 然后轉(zhuǎn)化成弧度
var deg = 360 / textSet[i][1].length * (j - nowValue[i]) ;
// 計(jì)算出每一個(gè)dom元素的坐標(biāo)
var x = r * Math.sin(deg * Math.PI / 180) + widthMid;
var y = heightMid - r*Math.cos(deg * Math.PI / 180);
// 設(shè)置樣式
var temp = textSet[i][1][j];
temp.style.transform = 'rotate(' + (-90 + deg ) + 'deg)';
temp.style.left = x + 'px';
temp.style.top = y + 'px';
}
}
}
}
這里還用到自定義函數(shù)initStyle,該函數(shù)主要作用是將所有l(wèi)abel標(biāo)簽初始為灰色价捧，如下
function initStyle() {
var label = document.getElementsByClassName('label');
for (var i = 0; i < label.length; i++) {
label[i].style.color = '#4d4d4d';
}
}
7.修改position
修改position,在變成圓形之前先修改定位
window.onload = function () {
....
changePosition();
}
function changePosition() {
for (let i = 0; i < textSet.length; i++) {
for (let j = 0; j < textSet[i][1].length; j++) {
// 先獲得原來(lái)的位置 再修改position 設(shè)置left top
let tempX = textSet[i][1][j].offsetLeft + "px";
let tempY = textSet[i][1][j].offsetTop + "px";
setTimeout(function () {
textSet[i][1][j].style.position = "absolute";
textSet[i][1][j].style.left = tempX;
textSet[i][1][j].style.top = tempY;
}, 50);
}
}
}
8.最后變成圓形
window.onload = function () {
....
setTimeout(function () {
changeCircle();
}, 2000);
}
function changeCircle() {
isCircle = true;
clock.style.transform = "rotate(90deg)";
}
經(jīng)過(guò)以上的大致步驟丑念，最終結(jié)果就顯示出來(lái)了，如圖
image.png
總結(jié)
- demo為考慮性能問(wèn)題结蟋，有待優(yōu)化
- 具體代碼可以查看：https://github.com/jCodeLife/running-plan/tree/master/clock
