Html+Css+ASP 实现日历功能
当然网上有很多开源的日历控件，内容很丰富，质量也杠杠滴。但是，因为功能需求是要把数据库的内容回显在日期上，所以一番讨论研究后，决定自己敲一个日历控件，这个版本是基于ASP的，后续有时间我还会再做一个PHP的。其实，日历控件最主要的核心就是当前的date 根据date 来判断 当前的年，月以及这个月的排版，其中还有星期几的判断。
作者： MarlboroKay
链接：http://www.imooc.com/article/12429
来源：慕课网
作者： MarlboroKay
链接：http://www.imooc.com/article/12429
来源：慕课网
当然网上有很多开源的日历控件，内容很丰富，质量也杠杠滴。但是，因为功能需求是要把数据库的内容回显在日期上，所以一番讨论研究后，决定自己敲一个日历控件，这个版本是基于ASP的，后续有时间我还会再做一个PHP的。
其实，日历控件最主要的核心就是当前的date 根据date 来判断 当前的年，月以及这个月的排版，其中还有星期几的判断。
css:
body{ BACKGROUND-COLOR: #eef2fb; } .titlebt { display: block; font-weight: bold; font-size: 12px; color: #000; text-indent: 15px; line-height: 26px; background-repeat: no-repeat; } .contain-date{ width: 60%; height: 60%; border-left: 1px solid #1E90FF; margin: 0 auto; margin-top:25px; } #title { width: 100%; height: 60px; background-color:#1E90FF; } .selectBtn { font-weight: 900; font-size: 24px; color: #fff; cursor: pointer; text-decoration: none; padding: 15px 10px 12px; } .selectBtn:hover { background-color: #3D59AB; } .Year_Month { font-weight: 900; font-size: 24px; color: #FF8000; cursor: pointer; text-decoration: none; padding: 15px 10px 12px; width:200px; margin-left:32%; display: inline-block; } .month { display: inline-block; } .nextMonth { float: right; } #context { background-color: #fff; width: 100%; } .week { width: 99.731%; height: 37px; border-right: 1px solid #1E90FF; border-bottom: 1px solid #1E90FF; } .week>h3 { float: left; color: #808080; text-align: center; margin: 0; padding: 0; margin-top: 5px; font-size: 22px; width:14%; cursor: pointer; } .cont_all{ color:#0B1746; cursor: pointer; } .cont_dayTag{ font-size:1em;margin-bottom:10px;margin-top:10px;text-align: center;text-align: center; } .cont_dayTag_else{ font-size:1em;margin-top:10px;text-align: center; } .cont_dayTag_end{ margin-top:10px;text-align: center; } .cont_dayTag_right{ display:inline-block;width:16%;height:82px;font-size:22px;background-color:#6A5ACD;vertical-align:top;border-bottom: 1px solid #1E90FF; text-align: center;color: #FF9912; } .cont_dayTag_right_s{ display:inline-block;width:16%;height:82px;font-size:22px;vertical-align:top;border-bottom: 1px solid #1E90FF;border-right: 1px solid #1E90FF;text-align: center; } .cont_dayTag_all{ display:inline-block;width:13.8%;height:82px;font-size:22px;background-color:#6A5ACD;vertical-align:top;border-bottom: 1px solid #1E90FF;border-right:1px solid #1E90FF;text-align: center;color: #FF9912; } .cont_dayTag_all_s{ display:inline-block;width:13.8%;height:82px;font-size:22px;vertical-align:top;border-bottom: 1px solid #1E90FF;border-right:1px solid #1E90FF;text-align: center; } .cont_dayTag_all_s:hover{ background-color: #1E90FF; cursor: pointer; color: #F0FFF0; } .cont_dayTag_right_s:hover{ background-color: #1E90FF; cursor: pointer; color: #F0FFF0; }ASP:
<form action="" name = "form1" method = "post"> <div class = "contain-date"> <% dim tdate if request.Form("hiddendate")="" then tdate=date() else if request.Form("hiddenflag")="1" then tdate=DateAdd("m",-1,cdate(request.Form("hiddendate"))) elseif request.Form("hiddenflag")="2" then tdate=DateAdd("m",1,cdate(request.Form("hiddendate"))) end if end if %> <div id="title"> <a class="selectBtn month" onClick="form1.hiddenflag.value=1;form1.submit();"><</a> <div class="Year_Month"><%=year(tdate)%>年<%=right("0"&month(tdate),2)%>月</div> <a class="selectBtn nextMonth" onClick="form1.hiddenflag.value=2;form1.submit();">></a> </div> <div id="context"> <div class="week"> <h3> 日 </h3> <h3> 一 </h3> <h3> 二 </h3> <h3> 三 </h3> <h3> 四 </h3> <h3> 五 </h3> <h3> 六 </h3> </div> </div> <% dim flag,monF,tdmonth,html,tFlag,i,w,dayTag flag=0 //满足星期几的标记 monF=cdate(year(tdate)&"-"&month(tdate)&"-1") //每月的第一天 tdmonth=month(tdate) //存放当前是第几月，用来判断当前日期是否属于这个月份，不属于则跳出 tFlag=0 //跳出第１个for循环后，跳出第２个for循环的标记 html="" //存放html代码 for i=1 to 6 html=html&"<div class = 'cont_all'>" for w=1 to 7 if cint(Weekday(monF))=w then '判断当前是星期几' if flag=0 then flag=1 end if end if if flag=1 then if monF=date() then dayTag="<div class = 'cont_dayTag'><b>"&day(monF)&"</b></div>" elseif monF=tdate then dayTag="<div class='cont_dayTag_else'>"&day(monF)&"</div>" else dayTag="<div class='cont_dayTag_end'>"&day(monF)&"</div>" end if '这里需要回显一个数据库的字段值，所以多嵌套了一个div' if monF = date() then if w = 7 then '判断是否是星期六，考虑到最右边的css样式' html=html&"<div class = 'cont_dayTag_right' >"&dayTag&"周末班</div>" else html=html&"<div class = 'cont_dayTag_all' >"&dayTag&"周末班</div>" end if elseif monF = tdate then if w = 7 then html=html&"<div class = 'cont_dayTag_right_s' >"&dayTag&"<div></div></div>" else html=html&"<div class = 'cont_dayTag_all_s' >"&dayTag&"<div></div></div>" end if else if w = 7 then html=html&"<div class = 'cont_dayTag_right_s' >"&dayTag&"<div></div></div>" else html=html&"<div class = 'cont_dayTag_all_s' >"&dayTag&"<div></div></div>" end if end if monF=monF+1 else if w = 7 then html=html&"<div class = 'cont_dayTag_right_s' ></div>" else html=html&"<div class = 'cont_dayTag_all_s' ></div>" end if end if if month(monF)<>tdmonth then tFlag=1 exit for end if next html=html&"</div>" if tFlag=1 then exit for next %> <%=html%> </div> <!-- 隐藏域 --> <input type="hidden" name="hiddendate" value="<%=tdate%>"> <input type="hidden" name="hiddenflag"> <!-- 隐藏域 --> </form>最终效果：
暂无评论
发表评论