实现功能:
默认显示今天的日期,然后点击左箭头获取前一天,点击右箭头获取后一天
效果:
html布局:
<div class="zh_date_box pull-left">
<div class="zh_date_switch zh_prev"></div>
<div class="zh_date_content">
8月23日<br>
周一
</div>
<div class="zh_date_switch zh_next"></div>
</div>
js脚本:
function onDutyDate() {
var oDate = new Date();
var month = oDate.getMonth();
var date = oDate.getDate();
var day = oDate.getDay();
var week = ['周日','周一','周二','周三','周四','周五','周六'];
var index = 0;
// 今天
var dateStr = (month+1)+'月'+date+'日'+'<br>'+week[day];
$('.zh_date_content').html(dateStr);
// 前一天
$('.zh_date_switch.zh_prev').click(function() {
index--;
if(index<-1) {
index=-1;
return false;
}
oDate.setDate(date+index);
var prevDateStr = (oDate.getMonth()+1)+'月'+oDate.getDate()+'日'+'<br>'+week[oDate.getDay()];
$('.zh_date_content').html(prevDateStr);
});
// 后一天
$('.zh_date_switch.zh_next').click(function() {
index++;
if(index>1) {
index=1;
return false;
}
oDate.setDate(date+index);
var nextDateStr = (oDate.getMonth()+1)+'月'+oDate.getDate()+'日'+'<br>'+week[oDate.getDay()];
$('.zh_date_content').html(nextDateStr);
});
}
onDutyDate();
欢迎关注技术开发分享录:http://fenxianglu.cn/