首页 > 手机软件 > 生活服务 > 罗盘旋转时钟Clock软件下载v1.0.0

罗盘旋转时钟Clock软件

类型：生活服务 版本：v1.0.0 大小：9.85MB 更新：2024-07-01 语言：简体中文 环境：安卓

标签：时钟

安卓版下载

软件介绍

利用html+css+javascript和uniapp框架打造的一款旋转的手机屏幕时钟软件，时钟Clock app支持月日时分秒，还是那种八卦的旋转式罗盘画面，直接在满屏可以显示看时间很方便。

罗盘旋转时钟Clock软件

使用说明

1、在本页面下载手机客户端软件，安装到手机上；

2、在手机上运行就可以直接使用，免费用；

3、时钟是以满屏转动的形式展示时间非常有趣。

已知问题

1.秒数和系统时间相差一秒，找不到原因

2.小屏幕手机上会遮挡住一部分。本人技术有限，无法解决

3.秒数高亮偶尔会抽风慢一秒

软件点评

1、软件中需要随意的切换，每一次切换都会带来更多的乐趣。

2、用户可以根据壁纸上不断移动的轮盘来看当前时间，可以用不同的方式体验时间。

3、轮盘时钟壁纸下载后支持炫酷的旋转功能，可以根据手机的功能来体验这款软件。

4、玩家可以设置八卦罗盘时钟屏保桌面，可以让玩家体验最真实的八卦快感。

代码分享

<!DOCTYPE html>

<html>

<head>

<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>

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");

* 找所有的东西标签函数

* */

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 ;

};

* 去掉所有兄弟的类

* */

let removeSiblingClass =function( tag ){

let sb = findSiblings( tag );

for(let i=0 ; i <= sb.length-1 ; i++){

sb[i].className = "";

}

};

* 初始化月份函数

* */

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 );

}

};

// 初始化小时，分钟，秒

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 +"点";

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 );

}

};

// 时间文字样式切换函数

let changeTime = function(tag){

tag.className = "on";

removeSiblingClass( tag );

};

* 初始化日历函数

* */

let initRili = function(){

initMonth(); // 初始化月份

initDate(); // 初始化日期

initHour(); // 小时

initMinute();

initSecond();

};

* 展示当前时间

* 参数：mydate 时间对象

* */

let showNow = function( mydate ){

let yue = mydate.getMonth() ;

let riqi = mydate.getDate();

let hour = mydate.getHours() ;

let minute = mydate.getMinutes();

let second = mydate.getSeconds();

// 时间文字样式切换函数

changeTime( yueBox.children[yue] );

changeTime( riqiBox.children[riqi-1] );

changeTime( hourbox.children[hour] );

changeTime( minutebox.children[minute] );

changeTime( secondbox.children[second] );

};

// 展示时间圆圈函数

// tag：目标

// num：数字数量

// 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)" ;

}

};

* 旋转指定“圆圈”指定度数

* */

let rotateTag = function(tag , deg){

tag.style.transform = "rotate("+deg+"deg)";

};

let main = function(){

initRili(); // 初始化日历

setInterval(function(){

let mydate = new Date();

showNow( mydate ); // 展示当前时间

},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>

免责声明：本站所有软件均来源于网络，不推广不盈利，仅供学习使用，请24小时后删除，请支持正版，如有侵权，联系删除！qq 739051932信箱

罗盘旋转时钟Clock软件

软件介绍

使用说明

已知问题

软件点评

代码分享

相关推荐

择吉程序免费版

嘉兴第九区论坛

广安同城文旅消费券

访客卡最新版

幸福看app

婚礼请帖app

食卡卡app

易理货app官方

捷易商停车减免

上汽轻卡软件

真实好友5.0最新版

蚂蚁森林芝麻粒app最新版

栏目

WPS Office精简版

avatarify制作多人视频app

湖南省干部教育培训网络学院app官方版

小米应用商店官方免费版

电信营业厅手机客户端

古文观止轻松学app解锁版

梅花易数占卜免费版

周易起名取名大师app版

哈兔Box

思科模拟器(Packet Tracer Mobile)安卓版

NAVER词典韩中最新版

XFolder文件管理器app

bt磁力兔子安卓官方版

qq价格评估查询工具

qq实用工具箱(Qbox Tool)

QQ音乐助手

Flickr相册库(FlickFolio)

蓝点资源网app免费版

同类最新