js获取当前周、上一周、下一周日期
最近在做一个课表的功能,需实现选择了第几周之后,该周相关的日期会自动更改过来,于是就在网上找了资料,经过一下午的折腾,终于把它实现了。
虽然是用在小程序中,但js代码都是大同小异的,只需做一些小小的修改。如果你是用在web网页中,那么就不需要怎么修改了,下面我们来看代码。
1、获取当前周、上一周、下一周日期
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>日历操作</title>
<script>
window.onload = function(){
var cells = document.getElementById('monitor').getElementsByTagName('td');
var clen = cells.length;
var currentFirstDate;
var formatDate = function(date){
var year = date.getFullYear()+'年';
var month = (date.getMonth()+1)+'月';
var day = date.getDate()+'日';
var week = '('+['星期天','星期一','星期二','星期三','星期四','星期五','星期六'][date.getDay()]+')';
return year+month+day+' '+week;
};
var addDate= function(date,n){
date.setDate(date.getDate()+n);
return date;
};
var setDate = function(date){
var week = date.getDay()-1;
date = addDate(date,week*-1);
currentFirstDate = new Date(date);
for(var i = 0;i<clen;i++){
// cells[i].innerHTML = formatDate(i==0 ? date : addDate(date,1)); 星期一开始
cells[i].innerHTML = formatDate(i==0 ? addDate(date,-1) : addDate(date,1));//星期日开始
}
};
document.getElementById('last-week').onclick = function(){
setDate(addDate(currentFirstDate,-7));
};
document.getElementById('next-week').onclick = function(){
setDate(addDate(currentFirstDate,7));
};
setDate(new Date());
}
</script>
</head>
<body>
<button id="last-week">上一周</button><button id="next-week">下一周</button>
<table id="monitor">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
2、改造后(点击周数,显示对应周数的日期)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js通过给出第几周,获得该周日历(课表日历)</title>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script>
window.onload = function(){
var cells = document.getElementById('monitor').getElementsByTagName('td');
var clen = cells.length;
var currentFirstDate;
var formatDate = function(date){
var year = date.getFullYear()+'年';
var month = (date.getMonth()+1)+'月';
var day = date.getDate()+'日';
var week = '('+['星期天','星期一','星期二','星期三','星期四','星期五','星期六'][date.getDay()]+')';
return year+month+day+' '+week;
};
var addDate= function(date,n){
date.setDate(date.getDate()+n);
return date;
};
var setDate = function(date){
var week = date.getDay()-1;
date = addDate(date,week*-1);
currentFirstDate = new Date(date);
for(var i = 0;i<clen;i++){
cells[i].innerHTML = formatDate(i==0 ? date : addDate(date,1)); //星期一开始
//cells[i].innerHTML = formatDate(i==0 ? addDate(date,-1) : addDate(date,1)); //星期天开始
}
};
var chushi=1;//初始周 第1周
//使用each()方法进行循环
$("button").each(function(index,element){
//这里的index就是当前对象下标,element就是当前对象(dom对象)
$(element).click(function(){
console.log($(this).text());
var value=$(this).text();
//这里的周跟当前周(上一次点击的或初始的)进行比较
console.log(value-chushi);
var result=value-chushi;
if(result>0){
setDate(addDate(currentFirstDate,7*result));
}
else if(result<0){
result= Math.abs(result);
setDate(addDate(currentFirstDate,-(7*result)));
}
else if(result==0){
setDate(addDate(currentFirstDate,0));
}
chushi=$(this).text();
})
})
setDate(new Date());
}
</script>
</head>
<body>
<button class="zhou">1</button>
<button class="zhou">2</button>
<button class="zhou">3</button>
<button class="zhou">4</button>
<button class="zhou">5</button>
<button class="zhou">6</button>
<button class="zhou">7</button>
<button class="zhou">8</button>
<button class="zhou">9</button>
<button class="zhou">10</button>
<table id="monitor">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
赶快复制代码看看效果吧,相信你也很快能够实现你的需求的~
还没有评论,来说两句吧...