效果截图:
整体代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS获取当前时间开始一周以内日期</title>
<style type="text/css">
*{padding: 0px; margin: 0px;}
ul li{list-style: none;}
.date-content{}
.date-content .data-item{float: left; text-align: center; color: rgba(255, 255, 255, 1);}
.date-content .data-item .item-week{background-color: rgba(76, 187, 237, 1); padding: 10px 15px; border-right: 1px solid rgba(255, 255, 255, 1);}
.date-content .data-item .item-day{background-color: rgba(76, 237, 221, 1); padding: 10px 15px; border-right: 1px solid rgba(255, 255, 255, 1);}
</style>
</head>
<body>
<div class="date-content">
<ul id="dateList"></ul>
</div>
</body>
<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var date = new Date();
var month = date.getMonth();
var week = date.getDay();
var month = month + 1;
var day = date.getDate();
// week:周几,day:几号
var weekArr = [{week:'',day:''},{week:'',day:''},{week:'',day:''},{week:'',day:''},{week:'',day:''},{week:'',day:''},{week:'',day:''}];
// 本周内今天的前几天的数量
var leftNum = week - 1;
// 本周内今天的后几天的数量
var rightNum = 7 - week;
// 本周内今天的前几天
for(var i = 0; i < leftNum; i++){
weekArr[i].week = week-(week-i)+1;
if(i==0){
weekArr[i].day = day-week;
}else{
weekArr[i].day = day-(week-i)+1;
}
}
// 本周内今天的后几天
for(var i = 0; i < rightNum; i++){
var weeks = week + i + 1;
if(weeks == 2){
weekArr[i + week].week = '二';
}else if(weeks == 3){
weekArr[i + week].week = '三';
}else if(weeks == 4){
weekArr[i + week].week = '四';
}else if(weeks == 5){
weekArr[i + week].week = '五';
}else if(weeks == 6){
weekArr[i + week].week = '六';
}else if(weeks == 7){
weekArr[i + week].week = '日';
}
weekArr[i + week].day = day + i + 1;
}
// 今天
if(week == 1){
weekArr[week - 1].week = '一';
}
weekArr[week - 1].day = day;
// 页面添加
var _html = '';
for(var i = 0; i < weekArr.length; i++){
_html += '<li class="data-item">'+
'<div class="item-week">' + weekArr[i].week + '</div>'+
'<div class="item-day">' + weekArr[i].day + '</div>'+
'</li>';
}
$('#dateList').html(_html);
</script>
</html>