小编发现,本博客的后边侧边栏总是觉得空空的,反复思索了一下,决定加个时钟
但是时钟现在的人体艺术时钟已经泛滥,思索着整一个新的。
放出效果
就是现在博客侧边栏的时钟。
修改之前的原先效果在这:
经过大小的修改,去掉了【秒】的时间。终于在侧边栏完美显示了
这边用到了两个JS和CSS事件。
教程来了:
在后台的侧边栏加入自定义组件,写入以下代码:
<head> <link href="http://young.s-api.yunvm.com/wl/tp/fliptimer.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="dowebok" style="text-align:center"> <div class="hours"></div> <div class="minutes"></div> </div> <script src="http://young.s-api.yunvm.com/wl/tp/jquery-1.11.3.min.js"></script> <script src="http://young.s-api.yunvm.com/wl/tp/jquery.fliptimer.js"></script> <script> $(function(){ $('.dowebok').flipTimer({ minutes: true }); }); </script> </body>
里面调用的JS和CSS我上传到了我自用的外链,稳定可靠,当然你也可以自己把js和css放到自己的网站里面!
如果外链失效请下载css or js文件自行使用
原文地址:《emlog侧边栏复古翻牌时钟效果》
发表评论: