Jquery-linked calendar (2)

Source: Internet
Author: User

Let's take a look.

 

Function Description:

1. The current date TD is blue, and the text is white

2. The TD of the current date in the next ten days is light blue

3. Exclude all other dates of the above two functions. TD is gray and text is gray.

Function Analysis:

1. Find the TD of the current date and change its color.

2. here we need to note that there will be a blank TD between this month and the next month, that is, there is no TD for the number of days, so it cannot be directly added to the current date, plus ten days later. Instead, we need to filter out the blank TD from all the date TD, and then convert the TD with a date into a new array. In this array, all are TD with dates. You can change the color of the last ten days of the current date.

3. With the first two indexes, we can get the start index and end index that changed the color of TD. Then, we can change other TD indexes to Gray.

 

 //  Change color     Function  Changecolor (){  VaR Cdate = New  Date ();  //  Get current date          VaR Nowd = Cdate. getdate ();  //  Index of the current date          VaR Nowindex = 0 ;  //  Changes the color of the current date; Nowdate. Find ("TD"). Each ( Function  (Index, element ){  //  If it is the current date, it is the index of the TD, and the variable is saved.              If ($ ( This ). Text () = Nowd) {$ (  This ).Css ({"color": "# fff", "background-color": "# 06c" })}});  /* Change the color of the next ten days * The note here is because there will be a blank TD between this month and the next month, that is, there is no Td of the number of days, therefore, you cannot add ten days after the current date. * First, we need to filter out the blank TD from all the date TD, and then convert the TD with a date into a new array. In this array, all are TD with dates. * You can change the color of the last 10 days of the current date.  */  Nowdate. Find ( "TD" ). Add (nextdate. Find ( "TD" )).  //  Filter all blank spaces and TD with no date for the first time Filter ( Function  (Index ){  Return $ ( This ). Text ()! = "";}).  //  Get the TD index value of the current date and coexist in the Variable. This index filters out the indexes in the array after the blank TD. Each ( Function  (Index, element ){  If ($ ( This ).Css ("color") = "RGB (255,255,255 )" ) {Nowindex = Index ;}}).  //  Obtain and change the colors of TD in the next ten days Slice (nowindex + 1, nowindex + 11 ). CSS ({ "Background-color": "# d7dbf9" }). End ()  //  Get and change the color of all TD except current and next ten days . Slice (0 , Nowindex). CSS ({ "Background-color": "# f0f0f0", "color": "# c3c3c3" }). End (). Slice (nowindex 2017112.16.css ({"background-color": "# f0f0f0", "color": "# c3c3c3" });} 

 

Conclusion: when dealing with such discontinuous data processing, you can consider filtering out unwanted data, turning useful data into a continuous whole, and then processing it. The same is true for handling things in life.

For example, when we clean up the hard disk, it seems that the discontinuous partition is also organized into a continuous one, which can speed up reading!

 

Download demo

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.