The effect of "Week" can be displayed as the 2nd week of 2016

Source: Internet
Author: User

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:

    1. 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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.