Date Object Basics – Practice programming (suitable for beginners)

Topic describes

1. Count the days of the year and the percentage of the year

Requirements: 1. User input date; Example: 2021-1-1 2. Output: This is the 31st day of 2021 and you have spent 8.76%Copy the code

2. Greetings vary according to the time of day

Check that the current time meets the following conditions: 00:00 to 12:00 Output: Good morning 12:00 to 14:00 Output: good noon 14:00 to 18:00 Output: good afternoon 18:00 to 23:00 Output: good eveningCopy the code

3. The timer

Requirements: Calculate how much time is left until the deadline 1. For example: 2021-1-1 12:30:00 2. Output: x days x hours x minutes x seconds until 2021-1-1 12:30:00Copy the code

4. Overtime is

Requirement: Add a fixed amount of time to the current click. 1. Output: the time after the operation such as: x days x hours x+5 minutes x secondsCopy the code

Thought analysis

Calculate the days of the year and percentage of the year

  • Gets the first day of the current year,
  • Take the entered date – the first day of the current year = the day of the year,
  • Get the first day of the next year,
  • First day of next year – current first day = how many days there are this year
  • Finally: The number of days in the year divided by the number of days in the year *100%= the number of days spent in the year

The sample

 // Determine how many days have passed that year
        var fn0 = time= > {
            var nowtime = new Date(+time[0], +time[1], +time[2]);
            var year = nowtime.getFullYear();// Get the current year
            var nowyear = new Date(year, 0.0);
            var nextyear = new Date(year + 1.0.0);
            var day = (nowtime - nowyear) / (24 * 3600) / 1000;/ / number of days
            var allday = (nextyear - nowyear) / (24 * 3600)     / 1000;// How many days are there in the year
            alert(This is a `${year}In the first${day}Day \n has passed by now${(day / allday) * 100}% `)
        }
        fn0(prompt("Please enter year-month-date:").split("-"));

Copy the code

Greetings vary according to the time of day

  • Get the time entered by the user,
  • Which interval is it,
  • Depending on the output of different intervals,

The sample

        var fn1 = time= > {
            var hour = time.getHours();
            var said = "";
            hour >= 0 && hour < 12 && (said = "Good morning!)
            hour >= 12 && hour < 14 && (said = "Good noon!)
            hour >= 14 && hour < 18 && (said = "Good afternoon!)
            hour >= 18 && (said = "Good evening!)
            console.log(said);
        }
        fn1(new Date()); 
Copy the code

The timer

  • Get user input cutoff time and current time,
  • Compute the difference between the two times,
  • Converting the difference into a combination of days, hours, minutes and seconds,
  • Finally through the delay setInterval cycle call execution, you can realize the countdown beat.

The sample

/ / the timer var fn0 = () = > {/ / var d = document. Access deadline getElementsByClassName (" d ") [0]. Value; var t = document.getElementsByClassName("t")[0].value; d = d.split("-"); t = t.split(":"); Var time = new Date(+d[0], +d[1] -1, +d[2], +t[0], +t[1]); return time; Var nowTime = new Date(); var nowtime = new Date(); Var I = (time-nowtime).tolocaleString ().split(","); var I = (time-nowtime).tolocaleString (). i.splice(-1, 1); var sum = +i.join(""); // Time gap is first converted into days, less than a day into minutes, and so on. var d = ~~(sum / (24 * 3600)); / / get days var h = ~ ~ ((sum - (d * 24 * 3600)) / 3600); / / the number of hours for var m = ~ ~ ((sum (d * 24 * 3600) - (h * 3600)) / 60); Var s = sum - (d * 24 * 3600) - (h * 3600) - (m * 60); Return [d, h, m, s]; } var fn2 = () => { var t0 = fn0(); var t1 = fn1(t0); If (t1) [3] < 0 {document. GetElementsByClassName (" TXT ") [0]. InnerHTML = "time past cannot be called back again!" return; } the document. The getElementsByClassName (" TXT ") [0]. InnerHTML = "remaining distance deadline" + t1 [0] + "day" + t1 [1] + "" + t1 [2] +" points "+ t1 [3] + "Seconds"; setInterval("fn2()", 1000); }Copy the code

Overtime is

  • Get the corresponding time of day, hour, minute, and second,
  • Add the event to the corresponding time.

The sample

        var time = new Date();
        var fn3 = () => {
            time.setSeconds(time.getSeconds()+5); 
            document.getElementsByClassName("jsq")[0].innerHTML=time.toLocaleString();  
        }
        var fn4 = () => {
            time.setMinutes(time.getMinutes()+5);
            document.getElementsByClassName("jsq")[0].innerHTML=time.toLocaleString(); 
        }
        var fn5 = () => {
            time.setDate(time.getDate()+5); 
            document.getElementsByClassName("jsq")[0].innerHTML=time.toLocaleString();  
        }
        var fn6 = () => {
            time.setMonth(time.getMonth()+5); 
            document.getElementsByClassName("jsq")[0].innerHTML=time.toLocaleString(); 
        }
        var fn7 = () => {
            time.setFullYear(time.getFullYear()+5);
            document.getElementsByClassName("jsq")[0].innerHTML=time.toLocaleString();
        }
       
Copy the code

conclusion

These questions are mainly for beginners to the date object proficiency exercises, is more basic routine exercises; Difficulty is not high, suitable for practice hand.