收集一个漂亮的万历年

首页 > 前端代码 > 收集一个漂亮的万历年

2010-07-29, 星期四风羽前端代码 js效果 25 Comments Leave a comment

一人漂亮的万历年
阳历中红色/绿色表示节假日，农历中绿色表示为24节气日，红色表示为传统节日，蓝色则表示为公众节假日

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title>万年历</title> <meta http-equiv=content-type content="text/html; charset=gb2312"> <meta content="农历; 阳历; 月历; 节日; 时区; 节气; 八字; 干支; 生肖; gregorian solar; chinese lunar; calendar;" name=keywords> <meta content="all" name="robots"> <script language="javascript" src="http://www.phoyu.com/myjs/json.js"></script> <script language="javascript" src="http://www.phoyu.com/myjs/huangli.js"></script> <script language="javascript">  </script> <style> body{ margin:0;background:#FFF; } .red{ color:#F00; } .green{ color:#090; } .blue{ color:#00F; } #wrap{ width:568px;margin:20px auto 0;overflow:hidden; } #YMBG{ width:568px;height:335px;position:absolute;z-index:-1;top:20px;padding:56px 0 0;font:120px/140px "Arial Black";background:#F9F9F9;color:#EFEFEF;text-align:center; } .todyaColor{ background:url(wnl/today.gif) no-repeat center center; } .calendar{ height:392px;font:12px Arial;border:solid #CCC;border-width:1px 0 0 1px; } .calendar th{ height:24px;font:bold 16px/24px Arial;background:#EFEFEF;border:1px solid; border-color:#FFF #CCC #CCC #FFF; } .calendar td{ width:75px; height:50px; text-align:center;padding:2px;border:1px solid; border-color:#FFF #CCC #CCC #FFF; } .calendar td strong{ display:block;font:bold 24px/28px Arial; } .calendar select{ font:12px Arial; } .calendar .title{ height:28px;font:16px Arial;background:none; } .topic{ width:200px;padding:2px;background:#222;font:12px/18px Verdana;filter:alpha(opacity=90); opacity:0.9 } .topic .con{ padding:2px; } .gday{ color:#FFF; } .nday{ color:#F3F; } .ganzhi{ color:#FF0; } .hlyi{ color:#0F0; } .hlji{ color:#F60; } .gzage{ color:#F00; } .gznl{ color:#090; } .festival{ background:#CFC;padding:2px; } </style> </head> <body onload="initial()"> <script language="javascript"> lck=0; function r(hval) { if ( lck == 0 ) { document.body.style.background=hval; } } </script> <form name="CLD" ID="CLD"> <div id="wrap"> <div id="YMBG">0000<br />JUN</div> <table border="0" cellspacing="0" cellpadding="0" class="calendar"> <tr> <th colspan="7" class="title"> 公历 <select onchange="changeCld()" name="SY"> <script language="javascript">  </script> </select> 年 <select onchange="changeCld()" name="SM"> <script language="javascript">  </script> </select> 月 <span id="GZ"></span> </th> </tr> <tr> <th><span class="red">日</span></th> <th>一</th> <th>二</th> <th>三</th> <th>四</th> <th>五</th> <th><span class="green">六</span></th></tr> <script language=javascript>  </script> </table> </div>  <div style="width:640px;text-align:center;margin:auto;font:12px/18px Arial;padding:8px"> <input type="button" onclick="pushBtm('YU')" value="年↑" /> <input type="button" onclick="pushBtm('YD')" value="年↓" /> <input type="button" onclick="pushBtm('MU')" value="月↑" /> <input type="button" onclick="pushBtm('MD')" value="月↓" /> <input type="button" onclick="pushBtm('')" value="今日" /> <br /> <input type="button" onclick="r('#ffffff')" value="白" /> <input type="button" onclick="r('#ffefef')" value="红" /> <input type="button" onclick="r('#ffffef')" value="黄" /> <input type="button" onclick="r('#efffff')" value="蓝" /> <input type="button" onclick="r('#efffef')" value="绿" /> <input type="button" onclick="r('#e4defe')" value="紫" /> <input type="button" onclick="r('#e4efff')" value="浅" /> <input type="button" onclick="r('#a6d8f1')" value="蓝" /> <input type="button" onclick="r('#669933')" value="青" /> <br /> 阳历中<span class="red">红色</span>/<span class="green">绿色</span>表示节假日，农历中<span class="green">绿色</span>表示为24节气日，<span class="red">红色</span>表示为传统节日，<span class="blue">蓝色</span>则表示为公众节假日 </div> </form> <div id="detail" style="position:absolute;top:0;left:0;"></div> </body> </html>

提示：你可以先修改部分代码再运行。

下载：万历年

文章作者：风羽
本文地址： http://www.phoyu.com/divcss/shoujiyigepiaoliangdewanlinian.html
版权所有 © 转载时必须以链接形式注明作者和原始出处！

« CSS有序列表OL的应用几种切换CSS样式的方法 »