一个网友自编简单的日历js代码特效
日期：2014-05-18 浏览次数：20505 次
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>日历js代码特效 by js.aiyiweb.com</title>
<style type="text/css">
*{ margin:0; padding:0;}
.red{ color:red;}
.date{ cursor:pointer;}
.today{ background:#F90; font-weight:bold;cursor:pointer;}
#calendar{ width:260px; margin:50px auto; }
#date{ text-align:center; border:1px #ccc solid; border-bottom:0;}
#date a{ display:inline-block; width:18px; height:20px; background-position:center -20px; vertical-align:middle; cursor:pointer;}
#date #selectDate{ width:120px;display:inline-block;}
#preYear{ background:url(http://d.hiphotos.baidu.com/album/s%3D900%3Bq%3D90/sign=ad9b3be5fdfaaf5180e38dbfbc6fe5d3/728da9773912b31bd3d15eea8618367adbb4e1b0.jpg);}
#preMonth{ background:url(http://f.hiphotos.baidu.com/album/s%3D900%3Bq%3D90/sign=f73776510cf431adb8d24f397b0ddd92/43a7d933c895d143e8cb77e073f082025baf07b7.jpg);}
#nextMonth{ background:url(http://g.hiphotos.baidu.com/album/s%3D900%3Bq%3D90/sign=f0feb6cb5343fbf2c12caa238045bbbd/80cb39dbb6fd5266e6b4afd7ab18972bd5073651.jpg);}
#nextYear{ background:url(http://d.hiphotos.baidu.com/album/s%3D900%3Bq%3D90/sign=09074fa3352ac65c63056a73cbc9c32c/ac6eddc451da81cb0a5b100e5266d016082431b7.jpg);}
#calTable{ width:100%; border-collapse:collapse;}
#calTable th,#calTable td{ width:30px; height:20px; border:1px #ccc solid; text-align:center;}
#calTable tbody{ font-family:Georgia, "Times New Roman", Times, serif;}
</style>
</head>
<body>
<div id="calendar">
<div id="date">
<a id="preMonth" title="上一年"></a>
<a id="preYear" title="上一月"></a>
<span id="selectDate">
<select id="selectYear">
</select>
<select id="selectMonth">
<option value="1">1月</option>
<option value="2">2月</option>
<option value="3">3月</option>
<option value="4">4月</option>
<option value="5">5月</option>
<option value="6">6月</option>
<optio
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>日历js代码特效 by js.aiyiweb.com</title>
<style type="text/css">
*{ margin:0; padding:0;}
.red{ color:red;}
.date{ cursor:pointer;}
.today{ background:#F90; font-weight:bold;cursor:pointer;}
#calendar{ width:260px; margin:50px auto; }
#date{ text-align:center; border:1px #ccc solid; border-bottom:0;}
#date a{ display:inline-block; width:18px; height:20px; background-position:center -20px; vertical-align:middle; cursor:pointer;}
#date #selectDate{ width:120px;display:inline-block;}
#preYear{ background:url(http://d.hiphotos.baidu.com/album/s%3D900%3Bq%3D90/sign=ad9b3be5fdfaaf5180e38dbfbc6fe5d3/728da9773912b31bd3d15eea8618367adbb4e1b0.jpg);}
#preMonth{ background:url(http://f.hiphotos.baidu.com/album/s%3D900%3Bq%3D90/sign=f73776510cf431adb8d24f397b0ddd92/43a7d933c895d143e8cb77e073f082025baf07b7.jpg);}
#nextMonth{ background:url(http://g.hiphotos.baidu.com/album/s%3D900%3Bq%3D90/sign=f0feb6cb5343fbf2c12caa238045bbbd/80cb39dbb6fd5266e6b4afd7ab18972bd5073651.jpg);}
#nextYear{ background:url(http://d.hiphotos.baidu.com/album/s%3D900%3Bq%3D90/sign=09074fa3352ac65c63056a73cbc9c32c/ac6eddc451da81cb0a5b100e5266d016082431b7.jpg);}
#calTable{ width:100%; border-collapse:collapse;}
#calTable th,#calTable td{ width:30px; height:20px; border:1px #ccc solid; text-align:center;}
#calTable tbody{ font-family:Georgia, "Times New Roman", Times, serif;}
</style>
</head>
<body>
<div id="calendar">
<div id="date">
<a id="preMonth" title="上一年"></a>
<a id="preYear" title="上一月"></a>
<span id="selectDate">
<select id="selectYear">
</select>
<select id="selectMonth">
<option value="1">1月</option>
<option value="2">2月</option>
<option value="3">3月</option>
<option value="4">4月</option>
<option value="5">5月</option>
<option value="6">6月</option>
<optio
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
