标签:
效果图
CSS代码
ul,li,p{padding:0; margin:0; list-style:none; font-family:"微软雅黑"; font-size:14px;} .div_week{width:900px; margin:20px auto;} #ul_week{overflow:hidden; border-right:1px solid #EAEAEA; width:896px; } #ul_week li p{display:block; } #ul_week li a{color:#000; text-decoration:none; display:block; padding:10px 0} #ul_week li{width:127px; float: left; border:1px solid #EAEAEA; border-right:0; text-align:center; line-height:25px; } #ul_time{overflow:hidden; border-right:1px solid #EAEAEA; width:896px; } #ul_time li p{display:block; } #ul_time li a{color:#000; text-decoration:none; display:block; padding:10px 0} #ul_time li{width:63px; float: left; border:1px solid #EAEAEA; border-right:0; border-top:0; text-align:center; line-height:25px; } .li_bold { font-weight:bold;}
JS代码
$(function () { //设置日期 var list = ""; for (var i = -3; i < 4; i++) { if (i == 0) list += ‘<li class="li_bold" id="li_day‘+i+‘"><a href="time.aspx?date=‘ + GetDateStr(i) + ‘&day=‘+i+‘"><p>‘ + GetDateStr(i) + ‘</p><p>‘ + GetWeek(GetDateStr(i)) + ‘今天</p></a></li>‘; else list += ‘<li id="li_day‘ + i + ‘"><a href="time.aspx?date=‘ + GetDateStr(i) + ‘&day=‘ + i + ‘"><p>‘ + GetDateStr(i) + ‘</p><p>‘ + GetWeek(GetDateStr(i)) + ‘</p></a></li>‘; } $("#ul_week").html(list); //地址获取参数 var li_date = GetQueryString("date"); var li_day = GetQueryString("day"); var li_time = GetQueryString("time"); //设置时间 var myDate = new Date(); var hovers = myDate.getHours(); //获取当前小时数(0-23) var list_time = ""; for (var i = 8; i < 22; i++) { if (i == hovers) list_time += ‘<li class="li_bold" id="li_time‘ + i + ‘"><a href="time.aspx?date=‘ + li_date + ‘&day=‘ + li_day + ‘&time=‘ + i + ‘"><p >‘ + i + ‘:00</p></a></li>‘; else list_time += ‘<li id="li_time‘ + i + ‘"><a href="time.aspx?date=‘ + li_date + ‘&day=‘ + li_day + ‘&time=‘ + i + ‘"><p>‘ + i + ‘:00</p></a></li>‘; } $("#ul_time").html(list_time); //切换样式 if (li_date != null) { $("#ul_week").find(‘li‘).removeClass(‘li_bold‘); $("#li_day" + li_day).addClass("li_bold"); } if (li_time != null) { $("#ul_time").find(‘li‘).removeClass(‘li_bold‘); $("#li_time" + li_time).addClass("li_bold"); } }) function GetWeek(date) { var weekDay = ["周天", "周一", "周二", "周三", "周四", "周五", "周六"]; var week = new Date(date).getDay(); return weekDay[week]; } function GetDateStr(AddDayCount) { var dd = new Date(); dd.setDate(dd.getDate() + AddDayCount);//获取AddDayCount天后的日期 var y = dd.getFullYear(); var m = dd.getMonth() + 1;//获取当前月份的日期 var d = dd.getDate(); return y + "-" + m + "-" + d; } function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null; }
Html代码
<div class="div_week"> <ul id="ul_week"> </ul> <ul id="ul_time"></ul> </div>
标签:
原文地址:http://www.cnblogs.com/jingyong001/p/5474082.html