最后:
HTML
前一天 下一天
在 js fiddle 中你不会看到 url 的任何变化
CSS
#displayResults {
width: 300px;
height: 200px;
border: 1px solid;
padding: 10px;
}
JS
var tm;//holds timer that checks changing of url
var date='';// holds the date
$(document).ready(function(){
getDateFromUrl();
updateNextBack()
tm=setInterval(function(){ // check that is the url changed
var tmp;
tmp=date;
getDateFromUrl();
if(date!=tmp){
updateNextBack()
changeDate();
}
},300);
function updateNextBack(){// updates next and back links
$('#next').attr('href','#'+nextDay(date));
$('#prev').attr('href','#'+prevDay(date));
}
function getDateFromUrl(){//anallyse url
var str=new String(document.location);
date='';
if(str.indexOf('#')>0){
date=str.substr(str.indexOf('#')+1,str.length-str.indexOf('#'));
}if(date==''){
date='20130329';
}
date=addToDate(date,0);
}
function addToDate(md,i){// adds i to md and then return md
var tmp=new String(md); // to get date in string format
var day , month , year; // these will hold year month and day
day=tmp.substr(6,2);
month=parseInt(tmp.substr(4,2))-1;
year=tmp.substr(0,4);
var myDate=new Date();// create a date object and set its year month and day
myDate.setFullYear(year);
myDate.setMonth(month);
myDate.setDate(day);
myDate.setDate(myDate.getDate()+i); // adds i day to date
md=''+myDate.getFullYear();
md+=''+(myDate.getMonth()<9?'0':'');
md+=''+parseInt(myDate.getMonth())-(-1);
md+=''+(myDate.getDate()<10?'0':'');
md+=''+parseInt(myDate.getDate());
return md;
}
function nextDay(md){// you should write real function
return addToDate(md,1);
}
function prevDay(md){// you should write real function
return addToDate(md,-1);
}
$('#next').click(function(){// for clicking next
// its empty !!!
});
$('#prev').click(function(){// for clicking prev
// its empty !!!
});
function changeDate(){// uses $.get('filename',callbackfunc) to update div value related to date val
/*$.get('getDate.php?d='+date,function(data){ // you should uncomment this when you are in server
$('#displayResults').html(data);
});*/
//use this when in jsfiddle
data='content of date:'+date;
$('#displayResults').html(data);
}
});
这里是工作小提琴。