編輯點(diǎn)評(píng):羅盤(pán)免費(fèi)旋轉(zhuǎn)時(shí)鐘軟件
利用html+css+javascript和uniapp框架打造的一款旋轉(zhuǎn)的手機(jī)屏幕時(shí)鐘軟件,時(shí)鐘Clock app支持月日時(shí)分秒,還是那種八卦的旋轉(zhuǎn)式羅盤(pán)畫(huà)面,直接在滿(mǎn)屏可以顯示看時(shí)間很方便。
使用說(shuō)明
1、在本頁(yè)面下載手機(jī)客戶(hù)端軟件,安裝到手機(jī)上;
2、在手機(jī)上運(yùn)行就可以直接使用,免費(fèi)用;
3、時(shí)鐘是以滿(mǎn)屏轉(zhuǎn)動(dòng)的形式展示時(shí)間非常有趣。
已知問(wèn)題
1.秒數(shù)和系統(tǒng)時(shí)間相差一秒,找不到原因
2.小屏幕手機(jī)上會(huì)遮擋住一部分。本人技術(shù)有限,無(wú)法解決
3.秒數(shù)高亮偶爾會(huì)抽風(fēng)慢一秒
軟件點(diǎn)評(píng)
1、軟件中需要隨意的切換,每一次切換都會(huì)帶來(lái)更多的樂(lè)趣。
2、用戶(hù)可以根據(jù)壁紙上不斷移動(dòng)的輪盤(pán)來(lái)看當(dāng)前時(shí)間,可以用不同的方式體驗(yàn)時(shí)間。
3、輪盤(pán)時(shí)鐘壁紙下載后支持炫酷的旋轉(zhuǎn)功能,可以根據(jù)手機(jī)的功能來(lái)體驗(yàn)這款軟件。
4、玩家可以設(shè)置八卦羅盤(pán)時(shí)鐘屏保桌面,可以讓玩家體驗(yàn)最真實(shí)的八卦快感。
代碼分享
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html{
background: #000;
color: #666;
font-size: 12px;
overflow:hidden;
}
*{
margin: 0;
padding: 0;
}
span{
display: block;
float: left;
}
.on{
color: #fff;
}
.wrapper{
width: 200px;
height: 200px;
position: absolute;
left:50%;
top:50%;
margin-top: -100px;
margin-left: -100px;
}
.wrapper .timebox{
position: absolute;
width: 200px;
height: 200px;
top: 0;
left:0;
border-radius: 100%;
transition: all 0.5s;
}
.timebox span{
transition: all 0.5s;
float: left;
}
.wrapper .timebox span{
position: absolute;
left:50%;
top:50%;
width: 40px;
height: 18px;
margin-top: -9px;
margin-left: -20px;
text-align: right;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="timebox yuebox" id="yueBox"></div>
<div class="timebox riqiBox" id="riqiBox"></div>
<div class="timebox hourbox" id="hourbox"></div>
<div class="timebox minutebox" id="minutebox"></div>
<div class="timebox secondbox" id="secondbox"></div>
</div>
<script>
let wrapper = document.getElementById("wrapper");
let yueBox = document.getElementById("yueBox");
let riqiBox = document.getElementById("riqiBox");
let hourbox = document.getElementById("hourbox");
let minutebox = document.getElementById("minutebox");
let secondbox = document.getElementById("secondbox");
/*
* 找所有的東西標(biāo)簽函數(shù)
* */
let findSiblings = function( tag ){
let parent = tag.parentNode;
let childs = parent.children;
let sb = [];
for(let i=0 ; i <= childs.length-1 ; i++){
if( childs[i]!==tag){
sb[sb.length] = childs[i];
}
}
return sb ;
};
/*
* 去掉所有兄弟的類(lèi)
* */
let removeSiblingClass =function( tag ){
let sb = findSiblings( tag );
for(let i=0 ; i <= sb.length-1 ; i++){
sb[i].className = "";
}
};
/*
* 初始化月份函數(shù)
* */
let initMonth = function(){
for(let i=1; i<=12; i++){
let span = document.createElement("span");
span.innerHTML = i+"月";
yueBox.appendChild( span );
}
};
// 初始化日期
let initDate = function(){
for(let i=1; i<=31; i++){
let span = document.createElement("span");
span.innerHTML = i+"日";
riqiBox.appendChild( span );
}
};
// 初始化小時(shí),分鐘,秒
let initHour = function(){
for(let i=0; i<=23; i++){
let h = i ;
let span = document.createElement("span");
if( h<10){
h="0"+h;
}
span.innerHTML = h +"點(diǎn)";
hourbox.appendChild( span );
}
};
let initMinute = function(){
for(let i=0; i<=59; i++){
let f = i ;
let span = document.createElement("span");
if( f<10){
f="0"+f;
}
span.innerHTML = f +"分";
minutebox.appendChild( span );
}
};
let initSecond = function(){
for(let i=0; i<=59; i++){
let miao = i ;
let span = document.createElement("span");
if( miao<10){
miao="0"+miao;
}
span.innerHTML = miao +"秒";
secondbox.appendChild( span );
}
};
// 時(shí)間文字樣式切換函數(shù)
let changeTime = function(tag){
tag.className = "on";
removeSiblingClass( tag );
};
/*
* 初始化日歷函數(shù)
* */
let initRili = function(){
initMonth(); // 初始化月份
initDate(); // 初始化日期
initHour(); // 小時(shí)
initMinute();
initSecond();
};
/*
* 展示當(dāng)前時(shí)間
* 參數(shù):mydate 時(shí)間對(duì)象
* */
let showNow = function( mydate ){
let yue = mydate.getMonth() ;
let riqi = mydate.getDate();
let hour = mydate.getHours() ;
let minute = mydate.getMinutes();
let second = mydate.getSeconds();
// 時(shí)間文字樣式切換函數(shù)
changeTime( yueBox.children[yue] );
changeTime( riqiBox.children[riqi-1] );
changeTime( hourbox.children[hour] );
changeTime( minutebox.children[minute] );
changeTime( secondbox.children[second] );
};
// 展示時(shí)間圓圈函數(shù)
// tag:目標(biāo)
// num:數(shù)字?jǐn)?shù)量
// dis:圓圈半徑
let textRound = function(tag,num,dis){
let span = tag.children ;
for(let i=0 ; i<=span.length-1; i++){
span[i].style.transform="rotate("+ (360/span.length)*i+"deg) translateX("+dis+"px)" ;
}
};
/*
* 旋轉(zhuǎn)指定“圓圈”指定度數(shù)
* */
let rotateTag = function(tag , deg){
tag.style.transform = "rotate("+deg+"deg)";
};
let main = function(){
initRili(); // 初始化日歷
setInterval(function(){
let mydate = new Date();
showNow( mydate ); // 展示當(dāng)前時(shí)間
},1000);
// n秒后,擺出圓形
setTimeout(function(){
wrapper.className = "wrapper";
textRound(yueBox,12,40);
textRound(riqiBox,31,80);
textRound(hourbox,24,120);
textRound(minutebox,60,160);
textRound(secondbox,60,200);
setInterval(function(){
let mydate = new Date();
rotateTag( yueBox , -30*mydate.getMonth());
rotateTag( riqiBox , -360/31*(mydate.getDate()-1) );
rotateTag( hourbox , -360/24*mydate.getHours());
rotateTag( minutebox , -6*mydate.getMinutes());
rotateTag( secondbox , -6*mydate.getSeconds());
},1000)
},6000)
};
main();
</script>
</body>
</html>
熱門(mén)評(píng)論
最新評(píng)論
發(fā)表評(píng)論查看所有評(píng)論(0)