小编发现,本博客的后边侧边栏总是觉得空空的,反复思索了一下,决定加个时钟
但是时钟现在的人体艺术时钟已经泛滥,思索着整一个新的。
放出效果
就是现在博客侧边栏的时钟。
修改之前的原先效果在这:
经过大小的修改,去掉了【秒】的时间。终于在侧边栏完美显示了
这边用到了两个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侧边栏复古翻牌时钟效果》