前端实现炫酷动感时钟特效

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


<!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>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)},1000)};main();</script></body>
</html>

时钟是动态的显示，定时器设置的时间是1s后，摆出图形，特别好看。

可以将html作为动态壁纸，评论点赞私我，发教程。

前端实现炫酷动感时钟特效相关推荐

给页面写一个炫酷的时钟特效【web前端】
文章目录一.前言二.想法设计/实现过程三.基本样式四.时间函数控制器五,时,分,秒占位六.时间动态填充一.前言今天看到某网站的时间特别的丑陋,所以就诞生了写一个看时间的炫酷的时钟前端页 ...
基于html+css3酷炫动态罗盘时钟特效
基于html+css3酷炫动态罗盘时钟特效 1.网页作品简介方面 :基于css3属性制作酷炫的圆形罗盘时钟,酷炫动态时钟特效,获取当前本地时间设置. 2.网页作品编辑方面:作品下载后可使用任意HTML ...
H5炫酷特效系列4——炫酷粒子变化特效
这个示例虽然没有相对比较实用的特性,但是表现出来的效果确实非常震撼眼球.先上效果图,让各位同胞感受一下: 特效的表现感很强,有兴趣的读者可以仔细学习一下下面的代码,尝试着理解其中的逻辑. <!D ...
html5星空效果图,HTML5 canvas炫酷星空背景特效
jquery-warpdrive-plugin是一款可以制作基于HTML5 canvas的炫酷星空背景特效的jquery插件.这个星空背景特效可通过配置参数进行灵活的配置,可用鼠标进行互动. 使用方法 ...
【CSS3】CSS3动画——我离前端的炫酷又近了一步
[CSS3]CSS3动画--我离前端的炫酷又近了一步博客说明文章所涉及的部分资料来自互联网整理,当然还有自己个人的总结和看法,分享的目的在于共建社区和巩固自己.引用的资料如有侵权,请联系本人删除! ...
炫酷的动画特效—css3旋转立方球体
炫酷的动画特效-css3旋转立方球体想要实现旋转立方球体特效,以下的内容你不容错过. 要理解的知识点形成一个3D空间: transform-style:preserve-3d (让父元素形成3D, ...
【CSS3】CSS3动画——前端的炫酷
[CSS3]CSS3动画--前端的炫酷博客说明文章所涉及的部分资料来自互联网整理,当然还有自己个人的总结和看法,分享的目的在于共建社区和巩固自己.引用的资料如有侵权,请联系本人删除!幸好我在,感谢 ...
需要个钟吗？教你制作一个简单又炫酷的时钟
制作时钟之前我们先要去了解一下JaveScript中的Date(日期)对象和计时器.这样我们就可以正确显示时间.然后一些炫酷部分就是HTML+CSS动画了. 话不多说,直接看代码吧. 1.首先把我们要 ...
制作炫酷AR卡片特效——小技巧
制作炫酷AR卡片特效--小技巧本帖最后由仅为年时于 2016-7-9 08:28 编辑 gif展示.gif (2.82 MB, 下载次数: 11) 下载附件保存到相册 2016-7-9 01 ...

前端实现炫酷动感时钟特效

前端实现炫酷动感时钟特效相关推荐

最新文章

热门文章