第一款时钟（人体时钟）
它分为两种，一种是背景透明的：
1 | <script charset="Shift_JIS" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.js"></script> |
另一种是白色背景的：
1 | <script charset="Shift_JIS" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.js"></script> |
想用哪个就把哪个代码放在想用的位置就可以了。不过我想说的问题是如果你的网站申请了SSL证书，那么这个挂件可能就不能显示，根据网站的错误信息提示是因为其中的http不是加密运输https。因此我想了一个办法：
在网页输入网址
http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.js会看到以下代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24/******************************************************************************
初期設定
******************************************************************************/
var swfUrl = "http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf";
var swfTitle = "honehoneclock";
// 実行
LoadBlogParts();
/******************************************************************************
入力 なし
出力 document.writeによるHTML出力
******************************************************************************/
function LoadBlogParts(){
var sUrl = swfUrl;
var sHtml = "";
sHtml += '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="160" height="70" id="' + swfTitle + '" align="middle">';
sHtml += '<param name="allowScriptAccess" value="always" />';
sHtml += '<param name="movie" value="' + sUrl + '" />';
sHtml += '<param name="quality" value="high" />';
sHtml += '<param name="bgcolor" value="#ffffff" />';
sHtml += '<param name="wmode" value="transparent" />';
sHtml += '<embed wmode="transparent" src="' + sUrl + '" quality="high" bgcolor="#ffffff" width="160" height="70" name="' + swfTitle + '" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />';
sHtml += '</object>';
document.write(sHtml);
}根据测试将上述代码中第二个和第三个
http变成https不影响网站浏览，但是第一个http不行，因此我用迅雷把这个flash下载了下来存放在路径\themes\next\source\js\src，并在该路径下创建文件honehone_clock_tr.js,代码如下1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24/******************************************************************************
初期設定
******************************************************************************/
var swfUrl = "js/src/honehone_clock.swf";
var swfTitle = "honehoneclock";
// 実行
LoadBlogParts();
/******************************************************************************
入力 なし
出力 document.writeによるHTML出力
******************************************************************************/
function LoadBlogParts(){
var sUrl = swfUrl;
var sHtml = "";
sHtml += '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="https://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="160" height="70" id="' + swfTitle + '" align="middle">';
sHtml += '<param name="allowScriptAccess" value="always" />';
sHtml += '<param name="movie" value="' + sUrl + '" />';
sHtml += '<param name="quality" value="high" />';
sHtml += '<param name="bgcolor" value="#ffffff" />';
sHtml += '<param name="wmode" value="transparent" />';
sHtml += '<embed wmode="transparent" src="' + sUrl + '" quality="high" bgcolor="#ffffff" width="160" height="70" name="' + swfTitle + '" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="https://www.macromedia.com/go/getflashplayer" />';
sHtml += '</object>';
document.write(sHtml);
}然后我在
\next\layout\_custom\sidebar.swig文件中引用1
<script charset="Shift_JIS" src="js/src/honehone_clock_tr.js"></script>
hexo s就可以本地看结果。
第二款时钟（霓虹灯时钟）
- 在/themes/next/layout/_custom/ 目录下，打开sidebar.swig文件，添加如下内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32<div>
<svg>
<text id="time" text-anchor="middle" x="36%" y="80%" class="words words-1"></text>
<text id="time" text-anchor="middle" x="36%" y="80%" class="words words-2"></text>
<text id="time" text-anchor="middle" x="36%" y="80%" class="words words-3"></text>
<text id="time" text-anchor="middle" x="36%" y="80%" class="words words-4"></text>
</svg>
</div>
<script>
function showtime(){
var noatime = new Date();
var h = noatime.getHours(),
m = noatime.getMinutes(),
s = noatime.getSeconds();
h=checktime(h);
m=checktime(m);
s=checktime(s);
return h+":"+m+":"+s;
}
function checktime(x){
if(x<10){
x="0"+x;
}
return x;
}
var div1=document.getElementsByTagName("text");
setInterval(function(){
for (var i in div1){
div1[i].innerHTML=showtime();
}
},1000);
</script> - /themes/next/source/css/_custom/目录下,打开custom.styl文件，添加如下内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37.words{
font-size: 50px;
font-weight: bold;
text-transform: uppercase;
fill: none;
stroke-width: 3px;
stroke-dasharray: 35,125;
animation-name: drawing;
animation-duration: 6s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.words-1{
stroke: deepskyblue;
text-shadow: 0 0 15px deepskyblue;
animation-delay: -1.5s;
}
.words-2{
stroke: lightseagreen;
text-shadow: 0 0 15px lightseagreen;
animation-delay: -3s;
}
.words-3{
stroke: orange;
text-shadow: 0 0 15px orange;
animation-delay: -4.5s;
}
.words-4{
stroke: purple;
text-shadow: 0 0 15px purple;
animation-delay: -6s;
}
@keyframes drawing {
100%{
stroke-dashoffset: -160
}
} - 之后就可以通过hexo s命令本地运行一下查看一下效果了
第三款时钟（canvas粒子时钟1）
效果图：
- 在 /themes/next/layout/_custom/ 目录下，新建 clock.swig 文件，内容如下：
clock.swig - 在 /themes/next/layout/_macro/sidebar.swig 中引入：
1
{% include '../_custom/clock.swig' %}
这是加在侧栏底部，大家可以根据自己需要加入相应位置。
第四款时钟（canvas粒子时钟2）
效果如下
- 在 /themes/next/layout/_custom/ 目录下，新建 biao.swig 文件，内容如下：
biao.swig - 在 /themes/next/layout/_macro/sidebar.swig 中引入： 这是加在侧栏底部，大家可以根据自己需要加入相应位置。
1
{% include '../_custom/biao.swig' %}
第五款时钟
在需要位置插入以下代码
1 | <div> |
