很多人在做博客的时候都会在自己的页面里加入一个日历,最近我也给做的网站里加入了一个。先前在网上收索了一翻关于此的源代码,看了下效果,感觉大多不尽如人意。偶然在一国外的网站上看见了一个不错的日历,主要是通过JavaScript中嵌入CSS来实现的,其中插入相应的代码还可以链接到自己的文档,相对来说还不错了。源码经过我修改了一番,现在此贴出,与大家共享。
核心脚本文件代码如下:
// 头部区域class设置
document.write("<style type=text/css>\
<!--\
.cld_head_month {font-size: 11px;color: #5B557C; font-family: Verdana, Arial, Helvetica, sans-serif;}\
.cld_title {color: #5B557C; font-size: 11px; font-family: Geneva, Arial, Helvetica, sans-serif; TEXT-DECORATION: none;}\
.cld_head_1 {color: #FFFFFF; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif;background-Color: #CE5131;text-align: center; Height: 18px;Width: 20px;}\
.cld_head_2 {color: #FFFFFF; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif;background-Color: #CECBCE;text-align: center;Width: 20px; }\
.cld_head_3 {color: #FFFFFF; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif;background-Color: #CECBCE;text-align: center; Width: 20px;}\
.cld_head_4 {color: #FFFFFF; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif;background-Color: #CECBCE;text-align: center; Width: 20px;}\
.cld_head_5 {color: #FFFFFF; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif;background-Color: #CECBCE;text-align: center; Width: 20px;}\
.cld_head_6 {color: #FFFFFF; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif;background-Color: #CECBCE;text-align: center; Width: 20px;}\
.cld_head_7 {color: #FFFFFF; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif;background-Color: #0088C1;text-align: center;Width: 20px; }\
.day_2 {color: #5B557C; font-size: 11px; font-family: Geneva, Arial, Helvetica, sans-serif; TEXT-DECORATION: none; text-align: center; Height: 18px;}\
.day_3 {color: #5B557C; font-size: 11px; font-family: Geneva, Arial, Helvetica, sans-serif; TEXT-DECORATION: none; text-align: center;Height: 18px;}\
.day_4 {color: #5B557C; font-size: 11px; font-family: Geneva, Arial, Helvetica, sans-serif; TEXT-DECORATION: none; text-align: center;Height: 18px;}\
.day_5 {color: #5B557C; font-size: 11px; font-family: Geneva, Arial, Helvetica, sans-serif; TEXT-DECORATION: none; text-align: center;Height: 18px;}\
.day_6 {color: #5B557C; font-size: 11px; font-family: Geneva, Arial, Helvetica, sans-serif; TEXT-DECORATION: none; text-align: center;Height: 18px;}\
.day_1 {color: #CE5131; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 11px; TEXT-DECORATION: none; text-align: center;Height: 18px;}\
.day_7 {font-size: 11px; color: #0088C1; font-family: Geneva, Arial, Helvetica, sans-serif; TEXT-DECORATION: none; text-align: center;Height: 18px;}\
.today{background-Color: #D0E6EF}\
-->\
</style>\
");


var c_y,c_m,c_d;
var page_span_id;
function calendar_url(year,month,day,link_name,css_class)
==============================================Cookie 结束
页面调用:
在页面插入下列代码:
<script language="javascript" src="上述脚本文件的相对地址"></script>
<script language="javascript">
<!--
showCalendar("calendar");
-->
</script>
然后在需要调用日历的地方用下列代码调用。
<span id="calendar"></span>
相关文章: