Showtime

秋思工作室

专注于初中教育教学管理及初中数学教学。

导航

当前位置:首页关于本站 > 正文页面

秋思工作室添加实时时间代码

2017年6月23日 本文作者:秋思 浏览:

  尽管秋思工作室的主题基本定型了,但一些细节地方,还有改进的空间。特别是页面顶部比较空荡、比较单调,总感觉缺少了点什么。无意中发现有些独立博客在顶部加了个实时时间显示,也尝试了一番,终于给秋思工作室也添加了时间代码。

秋思工作室添加实时时间代码

  开始的时候直接从网上搜索时间代码,贴到顶部模板,但是显示效果很差:时间字体与顶部导航字体不一致,排列方式不是现在大家看到的左右分别对齐排列。而且模板里代码一大堆,看着也很恶心。决定放弃这种不好的方式,直接调用js代码来显示实时时间。好吧,新一轮折腾正式开始。

  首先制作js文件。代码如下,直接复制并制作js文件,文件名称可以是date,也是任意,再文件传到网站。我是放在主题文件中的STYLE文件夹的js文件夹中,这样以后网站迁移的时候就不用再折腾这个了。如果需要显示其它的文字效果,请修改代码红色部分的内容,年、月、日和星期的位置可以调整,注意引号不要丢掉了。说明:红色部分代码都换行了,因为文章页面无法一行正常显示,所以使用时注意取消换行。

var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array
("星期日","星期一","星期二","星期三","星期四","星期五","星期六")
var montharray=new Array
("01","02","03","04","05","06","07","08","09","10","11","12")
document.write("<li>欢迎光临秋思工作室!今天是"+year+"年"+montharray[month]+"月"+daym+"日 "+dayarray[day]+"</li>")

  然后是修改主题中相关页面的模板。在模板文件中相应的位置添加显示时间的html代码,秋思工作室用的是Z-Blog,大家可参考。

<div id="divShowtime">
<h3>Showtime</h3>
<ul>
<script type="text/javascript" src="<#ZC_BLOG_HOST#>themes/Yahei/STYLE/js/date.js"></script>
</ul>
</div>

  最后是修改主题中的CSS文件,添加相应的CSS属性来控制时间代码显示的效果。这个不好用语言描述,直接上代码供大家参考吧。建议修改CSS代码时使用IE11中的开发人员工具,这样可以一边修改一边预览,确认无误后,再修改主题文件中的CSS代码。别的不多说了,还是直接贴上代码供大家参考。

#divShowtime {
background:none repeat scroll 0 0 #F9F9F9;
float:left;
height:24px;
margin:0;
padding:0;
width:457px;
}

#divShowtime ul {
background:#F9F9F9;
width:457px;
margin:4px 0;
padding:0;
}

#divShowtime li {
float:left;
font-size:12px;
margin:0;
padding:0 6px;
color:#000FFF;
width:445px;
}

#divShowtime h3 {
display:none;
}

版权声明:未加注说明的文章均为本站原创首发,转载本站文章请遵循署名-非商业用途-保持一致的原则

文章标签:博客  CSS  秋思工作室  

首发网站:秋思工作室

原文链接:http://www.qiusi.me/post/23.html

Gravatar Icon
1秋思 于 2017/7/2 19:58:55 发表
网址:http://www.qiusi.me  回复:Reply
感觉现在的自己完全不可能写出这种文章,还是书读得少啊。

欢迎在此发表评论,但请勿发垃圾广告评论或者违反国家法律或政策的言论,谢谢合作!

欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

文章存档

标签

©2017-2020 秋思工作室. All rights reserved. Powered by Z-Blog. Theme named Yahei and made free by Qiusi.

本作品采用知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可.