html在线时钟
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script><!DOCTYPE html>
<html lang="en">
<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>var wrapper = document.getElementById("wrapper");var yueBox = document.getElementById("yueBox");var riqiBox = document.getElementById("riqiBox");var hourbox = document.getElementById("hourbox");var minutebox = document.getElementById("minutebox");var secondbox = document.getElementById("secondbox");/** 找所有的东西标签函数* */var findSiblings = function( tag ){var parent = tag.parentNode;var childs = parent.children;var sb = [];for(var i=0 ; i <= childs.length-1 ; i++){if( childs[i]!==tag){sb[sb.length] = childs[i];}}return sb ;};/** 去掉所有兄弟的类* */var removeSiblingClass =function( tag ){var sb = findSiblings( tag );for(var i=0 ; i <= sb.length-1 ; i++){sb[i].className = "";}};/** 初始化月份函数* */var initMonth = function(){for(var i=1; i<=12; i++){var span = document.createElement("span");span.innerHTML = i+"月";yueBox.appendChild( span );}};// 初始化日期var initDate = function(){for(var i=1; i<=31; i++){var span = document.createElement("span");span.innerHTML = i+"日";riqiBox.appendChild( span );}};// 初始化小时，分钟，秒var initHour = function(){for(var i=0; i<=23; i++){var h = i ;var span = document.createElement("span");if( h<10){h="0"+h;}span.innerHTML = h +"点";hourbox.appendChild( span );}};var initMinute = function(){for(var i=0; i<=59; i++){var f = i ;var span = document.createElement("span");if( f<10){f="0"+f;}span.innerHTML = f +"分";minutebox.appendChild( span );}};var initSecond = function(){for(var i=0; i<=59; i++){var miao = i ;var span = document.createElement("span");if( miao<10){miao="0"+miao;}span.innerHTML = miao +"秒";secondbox.appendChild( span );}};// 时间文字样式切换函数var changeTime = function(tag){tag.className = "on";removeSiblingClass( tag );};/** 初始化日历函数* */var initRili = function(){initMonth(); // 初始化月份initDate(); // 初始化日期initHour(); // 小时initMinute();initSecond();};/** 展示当前时间* 参数：mydate 时间对象* */var showNow = function( mydate ){var yue = mydate.getMonth() ;var riqi = mydate.getDate();var hour = mydate.getHours() ;var minute = mydate.getMinutes();var 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：圆圈半径var textRound = function(tag,num,dis){var span = tag.children ;for(var i=0 ; i<=span.length-1; i++){span[i].style.transform="rotate("+ (360/span.length)*i+"deg) translateX("+dis+"px)" ;}};/** 旋转指定“圆圈”指定度数* */var rotateTag = function(tag , deg){tag.style.transform = "rotate("+deg+"deg)";};var main = function(){initRili(); // 初始化日历setInterval(function(){var 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(){var 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)},0)};main();</script></body>
</html>
效果：
![[乐意黎]某音上超酷炫的 Word Clock 文字云时钟屏保配置](https://img-blog.csdnimg.cn/20190405121913371.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9hZXJjaGkuYmxvZy5jc2RuLm5ldA==,size_16,color_FFFFFF,t_70)
![[html5网页设计]英雄联盟lpl总决赛游戏网页设计大作业，hbuilder网页设计成品，dw网页设计成品模板，游戏网页设计带图片轮播，音乐，视频，注册登录表单。](https://img-blog.csdnimg.cn/fd6e1c76d14f49bf9c63418762cde6c1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA54y_54y_LXdlYue9kemhteiuvuiuoQ==,size_20,color_FFFFFF,t_70,g_se,x_16)
