java BorderLatout_用编程做出抖音上很火的时钟效果

深碍√TFBOYSˉ_ 2022-11-12 02:34 219阅读 0赞

反正，我的抖音没人看，别人都有几十万个赞什么的。

发到思否上来，大家交流下~

主要用到原生态的 JS+CSS3。

![4b6d7be71691dd2927e5160a44d0af51.png][]

具体不解释了，看注释：

Title

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;

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

[4b6d7be71691dd2927e5160a44d0af51.png]: /images/20221022/e55c77cfe91844689e35fd8fedaeaf8c.png

java BorderLatout_用编程做出抖音上很火的时钟效果

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关揭秘：抖音上的热门短片为何总是那么火

相关抖音潮流趋势分析：今年夏天，抖音上最火的是什么？

相关抖音上很火的H53D立体动态相册效果

相关抖音上很火的3D立体动态相册实现代码!

相关 java BorderLatout_用编程做出抖音上很火的时钟效果

相关抖音上非常火的整人小程序

相关 python实现抖音上比较火的罗盘时钟

相关 jQuery 仿抖音时钟罗盘转动效果

相关自定义 View 之抖音时钟罗盘仪效果

相关用JavaScript写抖音很火的罗盘时钟，附源码