First on:
Action: A page forward, shown as the 1th week of 2016; Turn back one page, show the 3rd week of 2016
Action 2: Date associated with data
So much code just look at one place OK, here are three Div, respectively:
Previousdiv Previous page ID
Nextdiv next Page ID
Headertitlediv Date Container ID
Date is required to be placed in input, ID is title
Html:
<!--container of the date - <Divclass= "Headerdiv"> <DivID= "Previousdiv"class= "Previousimgdiv"></Div> <DivID= "Nextdiv"class= "Unnextimgdiv" ></Div> <DivID= "Headertitlediv"class= "Titlediv"><inputID= "title"type= "text"style= "Background-color: #f0f0f0; border:none;font-size:20px;text-align:center;"/></Div> </Div>
Note: Thetype of "Week" of input is text
Here is the JS section:
1. Custom variables
varPreviousdiv;varNextdiv;varHeadertitlediv;vartitle;//Spell DatevarCurrentweek =Theweek ();varDefaultweek =Theweek ();varCurrentYear =theyear ();varDefautlyear =theyear ();//Listen for click events on previous and next pagevarpreviousdivtapevent;varNextdivtapevent;
2. Initialization of variables:
$ (document). Ready (function() {Previousdiv= document.getElementById (' Previousdiv '); Nextdiv= document.getElementById (' Nextdiv '); Headertitlediv= document.getElementById (' Headertitlediv '); Title= document.getElementById (' title '); Title.value=Formartweek (); //Add a Click event to the previous page and listen to itPreviousdiv.addeventlistener (' Tap ', previousdivtapevent); $ (title). On (' Input ',function(){ if( This. Value.length = = 0){ This. Value.length = Formartweek (NewDate ()); }Else{ if(Checkcandonext ()) {fetchdate (); return; } } }); }
3, the day before the Monitoring event (fetchdate (); date associated with the data method, call this method, you can get the data associated with the date ):
function previousdivtapevent () { resetnextevent (); = ' Nextimgdiv '; = Getpreviousweek (title.value);
Fetchdate (); Date associated with the data method, call this method, you can get the data associated with the date fetchdate ();}
4, the next day to monitor the event:
function nextdivtapevent () { resetpreviousevent (); = Getnextweek (); Fetchdate (); if (checkcandonext) { nextdiv.removeeventlistener (' tap ', nextdivtapevent); return ; }}
5, get last week, and return
function Getpreviousweek () { // current week minus one week currentweek--; currentweek--; if (Currentweek < 1) { currentyear--; =n; } return Formartweek ();}
6. Get the next week and return
function Getnextweek () { // current week plus one week master is next week Currentweek + +; // if the current weeks old is 52 weeks, full year, current year plus one year, New Year, first week if (Currentweek >) { + +; = 1; } return Formartweek ();}
7, Judge, if the next page has data, then, you can click into the next page, if there is no data, the button is not clickable
function Checkcandonext () { if (defaultweek <= currentweek && defautlyear <= CurrentYear) {T Itle.value = Formartweek (); Nextdiv.classname = ' unnextimgdiv ' ; Nextdiv.removeeventlistener ( ' tap ' ,nextdivtapevent); return true ; else {resetnextevent (); Nextdiv.classname = ' nextimgdiv ' ; return false ; }}
8, reset the previous page of the monitoring event, the first button to add a picture class;
First delete the original event, plus the new event
function resetpreviousevent () { = ' Previousimgdiv '; Previousdiv.removeeventlistener (' tap ', previousdivtapevent); Previousdiv.addeventlistener (' tap ', previousdivtapevent);}
9, reset the next page of listening events, the same way
function resetnextevent () { = ' Nextimgdiv '; Nextdiv.removeeventlistener (' tap ', nextdivtapevent); Nextdiv.addeventlistener (' tap ', nextdivtapevent);}
10. Format the date and return it in a custom way
function Formartweek () { return CurrentYear + "year First" + Currentweek + "Week";}
11. Get the current year
function theyear () { varnew Date (); = now.getfullyear (); return years;}
12, get the current week, and determine whether it is a leap year, for the number of days in February to calculate
functionTheweek () {varTotaldays = 0; now=NewDate (); Years=now.getyear ()if(Years < 1000) years+ = 1900varDays =NewArray (12); days[0] = 31; days[2] = 31; days[3] = 30; days[4] = 31; days[5] = 30; days[6] = 31; days[7] = 31; days[8] = 30; days[9] = 31; days[10] = 30; days[11] = 31; //determine if a leap year is calculated for the number of days in February if(Math.Round (Now.getyear ()/4) = = Now.getyear ()/4) {days[1] = 29 } Else{days[1] = 28 } if(Now.getmonth () = = 0) {totaldays= Totaldays +now.getdate (); } Else { varCurmonth =Now.getmonth (); for(varCount = 1; Count <= Curmonth; count++) {totaldays= Totaldays + days[count-1]; } totaldays= Totaldays +now.getdate (); } //get the first few weeks varWeek = Math.Round (TOTALDAYS/7); returnWeek;}
The above methods for the Sunday period require attention to the following points:
- The type of input in HTML is text
type= "text" style= "Background-color: #f0f0f0; border:none;font-size:20px;text-align:center;" /></div>
2. The previous page and the next page of the Click event, you can join the data associated with the method, when you click on the next page, automatically get the corresponding data
3. When adding the input event to the title, it is necessary to write a judgment: the current value = The return method for the Sunday period. If the next page has data, you can click to go to the next page:
function () { if(this. Value.length = = 0) {this.value.length = Formartweek ( New Date ()); } Else { if(checkcandonext ()) { fetchdate (); return ; } } });
The effect of "Week" can be displayed as the 2nd week of 2016