网站年龄显示器,精确到0.1秒

Jonty
2013-08-19 / 1 评论 / 65 阅读 / 正在检测是否收录...

按照本文修改后显示效果截图:

修改也很简单,以添加到Wordpress 博客侧边栏为例给大家讲解一下添加方法:
1.使用Notepad++打开主题根目录下的sidebar.php,添加下面的Javascript 代码(当然你添加在header.php和footer.php也行)

<script type="text/javascript">
function GetRTime(){
var EndTime= new Date("08/05/2011 21:30:0");//出生日期
var NowTime = new Date();
var nMS =NowTime.getTime() - EndTime.getTime();
var nY=Math.floor(nMS/(1000 * 60 * 60 * 24*365));
var nD=Math.floor(nMS/(1000 * 60 * 60 * 24))% 365;
var nH=Math.floor(nMS/(1000*60*60)) % 24;
var nM=Math.floor(nMS/(1000*60)) % 60;
var nS=Math.floor(nMS/1000) % 60;
var nZ=Math.floor(nMS/100) % 10;
if(nD>= 0){
document.getElementById("time").innerHTML=nD+'天'+nH+'时'+nM+'分'+nS+'.'+nZ+'秒';
document.getElementById("year").innerHTML=nY+'周岁';
setTimeout("GetRTime()",100);
}
else {
document.getElementById("countdown_promp").innerHTML="亲,你穿越到古代了啊!";
document.getElementById("ling").innerHTML="";
}
}
GetRTime();
</SCRIPT>

在sidebar.php里面添加下面的代码:

<div id="countdown_prompt" style="color: #DD1B00;font-size: 16px; ">偷偷告诉你我已经:</div>
<div id="countdown" style="text-align: center; margin: 10px auto 10px; ">
<span id="year" style="color: #00991F;font-size: 26px;"></span><br/>
<span id="ling" style="color: #008FFF;font-size: 14px;width: 20px;-moz-border-radius: 50px;-webkit-border-radius: 50px;border: 1px dashed red;position: absolute;">零</span><br/>
<span id="time" style="color: #069;font-size: 26px;"></span></div>

注:上面我已经添加了简单的CSS 样式,另外需要特别注意一点就是,上面的Div 标签需要放入到侧栏的总Div 标签的里面包裹着,如果侧栏项目分开显示的话,还需要自己仿照着其他的写一个div 标签包裹着才能显示正常的样式!
温馨提醒:
本文只是举一个例子,你也可以根据自己的需求进行更改

本文共 238 个字数,平均阅读时长 ≈ 1分钟
0

打赏

海报

正在生成.....

评论 (1)

取消
  1. 头像
    Soar、毅 Lv.3
    中国北京市 ·Windows 8 · Google Chrome
    沙发

    不错,有机会就折腾一下。。

    回复 删除 垃圾