‹‹ 上一主题 | 下一主题 ››
发新话题
打印

[讨论] 本人做的一个日程表型的日历

FishStanding [楼主]

站在岸上的鱼

中级会员

帖子
294 
体力
332  
威望
0  
当前
北京 海淀区
离线
14 天

专长 网页设计,前端制作,.NET
1# 大 中 小 发表于 2008-8-22 09:53 
为符合用户需求，只能做成这样了，没有太多的美化，而且日历功能也没加上，有兴趣的朋友可以美化一下。
代码如下：
复制内容到剪贴板
代码:
<!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>
<style type="text/css">
body {font-size:12px;}
/*表格及表格的表头*/
.CanlendarCon { border-collapse:collapse;border:1px solid #258CC6;table-layout: fixed; overflow:hidden;}
.CanlendarCon th {height:28px;background-color:#258CC6; text-align:center;font-size:13px;color:#fff;}
/*普通的TD*/
.CanlendarCon td,.CanlendarCon td.normalTD {font-size:12px;border-top:1px solid #ddd;border-right:1px solid #ddd; vertical-align:top;height:60px;padding:5px 5px 0 5px;line-height:150%;color:#666;}
.CanlendarCon td.msOver { background-color:#c9e9fc;cursor:pointer;};
/*当前日期*/
.CanlendarCon td.currDay { background-color:#fffbbb;color:#000;}
.CanlendarCon td.currDayDark { background-color:#c9e9fc;color:#000;cursor:pointer;}
/*周末*/
.CanlendarCon td.Weekend{background-color:#ffe4ba;/*color:#f30;*/}
/*日期所在的TD及阳历、农历的左右对齐样式*/
.CanlendarCon td.DateInfo {height:18px;border-bottom:1px solid #ddd;line-height:normal; background-color:#F4F4F4;color:#000;}
.CanlendarCon td.DateInfo span {display:block;float:left;}
.CanlendarCon td.DateInfo div {float:right;}
</style>
<script type="text/javascript">
    var remClass;
    function aa(obj,objClass,num)
    {
        if(num==1)
        {
            if(objClass=="currDay")
                obj.className="currDayDark";
            else
                obj.className="msOver";
            remClass = objClass;
        }
        else
        {
            if(objClass=="currDayDark")
                obj.className=remClass;
            else
                obj.className=remClass;
            remClass = objClass;
        }
    }
</script>
</head>
<body>
    <form name="form1" method="post" action="tt.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJMjc4MjUzNDY5ZGTgW121FIIobxDhWspAZcpKR4TXaw==" />
</div>
    <div>
        <span id="Calendar1"><table><tr><td>公元<select Name='YearID'><option value='1990'>1990</option><option value='1991'>1991</option><option value='1992'>1992</option><option value='1993'>1993</option><option value='1994'>1994</option><option value='1995'>1995</option><option value='1996'>1996</option><option value='1997'>1997</option><option value='1998'>1998</option><option value='1999'>1999</option><option value='2000'>2000</option><option value='2001'>2001</option><option value='2002'>2002</option><option value='2003'>2003</option><option value='2004'>2004</option><option value='2005'>2005</option><option value='2006'>2006</option><option value='2007'>2007</option><option value='2008' selected>2008</option><option value='2008'>2008</option><option value='2009'>2009</option><option value='2010'>2010</option><option value='2011'>2011</option><option value='2012'>2012</option><option value='2013'>2013</option><option value='2014'>2014</option><option value='2015'>2015</option><option value='2016'>2016</option><option value='2017'>2017</option><option value='2018'>2018</option><option value='2019'>2019</option><option value='2020'>2020</option><option value='2021'>2021</option><option value='2022'>2022</option><option value='2023'>2023</option><option value='2024'>2024</option><option value='2025'>2025</option><option value='2026'>2026</option><option value='2027'>2027</option><option value='2028'>2028</option><option value='2029'>2029</option><option value='2030'>2030</option><option value='2031'>2031</option><option value='2032'>2032</option><option value='2033'>2033</option><option value='2034'>2034</option><option value='2035'>2035</option><option value='2036'>2036</option><option value='2037'>2037</option><option value='2038'>2038</option><option value='2039'>2039</option><option value='2040'>2040</option><option value='2041'>2041</option><option value='2042'>2042</option><option value='2043'>2043</option><option value='2044'>2044</option><option value='2045'>2045</option><option value='2046'>2046</option><option value='2047'>2047</option><option value='2048'>2048</option><option value='2049'>2049</option></select>年<select Name='MonthID'><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><option value='7'>7</option><option value='8' selected>8</option><option value='8'>8</option><option value='9'>9</option><option value='10'>10</option><option value='11'>11</option><option value='12'>12</option></select>月&nbsp;戊子年(鼠)</td></tr></table>
        
        <table border="0" align="center" cellpadding="0" cellspacing="1" class="CanlendarCon" width="98%">
          <tr>
          <Th>星期日</Th>
          <Th>星期一</Th>
          <Th>星期二</Th>
          <Th>星期三</Th>
          <Th>星期四</Th>
          <Th>星期五</Th>
          <Th>星期六</Th>
          </tr><tr><td class="DateInfo">&nbsp;</td>
          <td class="DateInfo">&nbsp;</td>
          <td class="DateInfo">&nbsp;</td>
          <td class="DateInfo">&nbsp;</td>
          <td class="DateInfo">&nbsp;</td>
          <td class="DateInfo"><span>1日</span><div>七月初一</div></td>
          <td class="DateInfo"><span>2日</span><div>七月初二</div></td>
          </tr><tr><td class="Weekend" onmouseover="aa(this,this.className,1)" onmouseout="aa(this,this.className,2)">&nbsp;</td>
          <td class="normalTD" onmouseover="aa(this,this.className,1)" onmouseout="aa(this,this.className,2)">&nbsp;</td><td class="normalTD" onmouseover="aa(this,this.className,1)" onmouseout="aa(this,this.className,2)">&nbsp;</td><td class="normalTD" onmouseover="aa(this,this.className,1)" onmouseout="aa(this,this.className,2)">&nbsp;</td><td class="normalTD" onmouseover="aa(this,this.className,1)" onmouseout="aa(this,this.className,2)">&nbsp;</td>
          <td class="normalTD" onmouseover="aa(this,this.className,1)" onmouseout="aa(this,this.className,2)"><a href="#">1.商务部研讨会</a><br />
            <a href="#">2.下午召开全体职工会议</a></td>
          <td class="Weekend" onmouseover="aa(this,this.className,1)" onmouseout="aa(this,this.className,2)">&nbsp;</td>
          </tr><tr><td class="DateInfo"><span>3日</span><div>七月初三</div></td>
          <td class="DateInfo"><span>4日</span><div>七月初四</div></td>
          <td class="DateInfo"><span>5日</span><div>七月初五</div></td>
          <td class="DateInfo"><span>6日</span><div>七月初六</div></td>
          <td class="DateInfo"><span>7日</span><div>立秋</div></td>
          <td class="DateInfo"><span>8日</span><div>七月初八</div></td>
          <td class="DateInfo"><span>9日</span><div>七月初九</div></td>
          </tr><tr><td class="Weekend" onmouseover="aa(this,this.className,1)" onmouseout="aa(this,this.className,2)">&nbsp;</td>
          <td class="normalTD" onmouseover="aa(this,this.className,1)" onmouseout="aa(this,this.className,2)"><span class=" Weekend"><a href="#">1.一周工作安排</a><br />
              <a href="#">2.为商会培训会员系统的准备工作。</a></span></td>
          <td class="normalTD" onmouseover="aa(this,this.className,1)" onmouseout="aa(this,this.className,2)">&nbsp;</td><td class="normalTD" onmouseover="aa(this,this.className,1)" onmouseout="aa(this,this.className,2)">&nbsp;</td><td class="normalTD" onmouseover="aa(this,this.className,1)" onmouseout="aa(this,this.className,2)">&nbsp;</td><td class="normalTD" onmouseover="aa(this,this.className,1)" onmouseout="aa(this,this.className,2)">&nbsp;</td>
          <td class=" Weekend" onmouseover="aa(this,this.className,1)" onmouseout="aa(this,this.className,2)"><a href="#">1.一周工作报告</a><br />
            <a href="#">2.为商会培训会员系统</a></td>
          </tr><tr><td class="DateInfo"><span>10日</span><div>七月初十</div></td>
          <td class="DateInfo"><span>11日</span><div>七月十一</div></td>
          <td class="DateInfo"><span>12日</span><div>七月十二</div></td>
          <td class="DateInfo"><span>13日</span><div>七月十三</div></td>
          <td class="DateInfo"><span>14日</span><div>七月十四</div></td>
          <td class="DateInfo"><span>15日</span><div>七月十五</div></td>
          <td class="DateInfo"><span>16日</span><div>七月十六</div></td>
          </tr><tr><td class="Weekend" onmouseover="aa(this,this.className,1)" onmouseout="aa(this,this.className,2)"><span class=" Weekend"><a href="#">1.一周工作报告</a><br />
                <a href="#">2.为商会培训会员系统</a></span></td>
          <td class="normalTD" onmouseover="aa(this,this.className,1)" onmouseout="aa(this,this.className,2)">&nbsp;</td><td class="normalTD" onmouseover="aa(this,this.className,1)" onmouseout="aa(this,this.className,2)">&nbsp;</td><td class="normalTD" onmouseover="aa(this,this.className,1)" onmouseout="aa(this,this.className,2)">&nbsp;</td><td class="normalTD" onmouseover="aa(this,this.className,1)" onmouseout="aa(this,this.className,2)">&nbsp;</td><td class="normalTD" onmouseover="aa(this,this.className,1)" onmouseout="aa(this,this.className,2)">&nbsp;</td><td class="Weekend" onmouseover="aa(this,this.className,1)" onmouseout="aa(this,this.className,2)">&nbsp;</td>
          </tr><tr><td class="DateInfo"><span>17日</span><div>七月十七</div></td>
          <td class="DateInfo"><span>18日</span><div>七月十八</div></td>
          <td class="DateInfo"><span>19日</span><div>七月十九</div></td>
          <td class="DateInfo"><span>20日</span><div>七月二十</div></td>
          <td class="DateInfo"><span>21日</span><div>七月廿一</div></td>
          <td class="DateInfo"><span>22日</span><div>七月廿二</div></td>
          <td class="DateInfo"><span>23日</span><div>处暑</div></td>
          </tr><tr><td class="Weekend" onmouseover="aa(this,this.className,1)" onmouseout="aa(this,this.className,2)">&nbsp;</td>
          <td class="normalTD" onmouseover="aa(this,this.className,1)" onmouseout="aa(this,this.className,2)">&nbsp;</td><td class="normalTD" onmouseover="aa(this,this.className,1)" onmouseout="aa(this,this.className,2)">&nbsp;</td><td class="normalTD" onmouseover="aa(this,this.className,1)" onmouseout="aa(this,this.className,2)">&nbsp;</td>
          <td class="currDay" onmouseover="aa(this,this.className,1)" onmouseout="aa(this,this.className,2)"><a href="#">1.有人打电话找王总，电话：010-9872343</a></td>
          <td class="normalTD" onmouseover="aa(this,this.className,1)" onmouseout="aa(this,this.className,2)">&nbsp;</td><td class="Weekend" onmouseover="aa(this,this.className,1)" onmouseout="aa(this,this.className,2)">&nbsp;</td>
          </tr><tr><td class="DateInfo"><span>24日</span><div>七月廿四</div></td>
          <td class="DateInfo"><span>25日</span><div>七月廿五</div></td>
          <td class="DateInfo"><span>26日</span><div>七月廿六</div></td>
          <td class="DateInfo"><span>27日</span><div>七月廿七</div></td>
          <td class="DateInfo"><span>28日</span><div>七月廿八</div></td>
          <td class="DateInfo"><span>29日</span><div>七月廿九</div></td>
          <td class="DateInfo"><span>30日</span><div>七月三十</div></td>
          </tr><tr><td class="Weekend" onmouseover="aa(this,this.className,1)" onmouseout="aa(this,this.className,2)">&nbsp;</td>
          <td class="normalTD" onmouseover="aa(this,this.className,1)" onmouseout="aa(this,this.className,2)">&nbsp;</td><td class="normalTD" onmouseover="aa(this,this.className,1)" onmouseout="aa(this,this.className,2)">&nbsp;</td><td class="normalTD" onmouseover="aa(this,this.className,1)" onmouseout="aa(this,this.className,2)">&nbsp;</td><td class="normalTD" onmouseover="aa(this,this.className,1)" onmouseout="aa(this,this.className,2)">&nbsp;</td><td class="normalTD" onmouseover="aa(this,this.className,1)" onmouseout="aa(this,this.className,2)">&nbsp;</td><td class="Weekend" onmouseover="aa(this,this.className,1)" onmouseout="aa(this,this.className,2)">&nbsp;</td>
      </tr></table></span>
    </div>
    </form>
<script type="text/javascript">
/*window.onload = function()
{
    var tds = document.getElementsByTagName("td");
    var i;
    for(i=0;i<tds.length;i++)
    {
        //if(tds[i].parentElement.className="CanlendarCon")
        alert(tds[i].parentElement.className);
        
    }
}
*/</script>
</body>
</html>
站在岸上,拒绝潜水....

TOP

FishStanding [楼主]

站在岸上的鱼

中级会员

帖子
294 
体力
332  
威望
0  
当前
北京 海淀区
离线
14 天

专长 网页设计,前端制作,.NET
2# 大 中 小 发表于 2008-8-22 10:02 
运行效果如下：

 提示：您可以先修改部分代码再运行
站在岸上,拒绝潜水....

TOP

‹‹ 上一主题 | 下一主题 ››
发新话题