标签:
效果图

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