Simply learn the Data object of JavaScript and use js to complete the simple countdown function

Inspiration:

JD's seckill page
After learning the Data object of js
We can also achieve similar functions~

Next, let's review some details of the Data object
Then complete this important countdown case of fat intestines~
After reading this article, we will be more impressed by the timestamp~

Knowledge points include:

What we need to know to complete this small case:
js built-in object: Data
Using Data objects to achieve goals

Data object

Preliminary perception of the use of Data objects

var date = new Data();
var date1 = new Data('2021-02-15 23:29:16');

Is a constructor (unlike Math objects)
We can use new to call the date object

Next, let's take a look at how date objects are used~
Example 1

<script>
        // Date() Date object is a constructor. We must use new to call to create our date object
        var arr = new Array(); // Create an array object
        var obj = new Object(); // An object instance was created
        // 1. Use Date. If there is no parameter, return the current time of the current system
        var date = new Date();
        console.log(date);
        // 2. The commonly used writing method of parameters is numeric 2019, 10, 01 or string '2019-10-1 8:8:8'
        var date1 = new Date(2019, 10, 1);
        console.log(date1); // November is returned, not October 
        var date2 = new Date('2019-10-1 8:8:8');
        console.log(date2);
</script>

Two usages are given~
1. Return the current time and date

2. Return the entered time and date

Format date: mm / DD / yy

You need to get the part specified by the date (the specific date is the specific year)

be careful:

When the month returns, the number is 0-11

0 represents January, so you need month + 1

Monday returns 1, Saturday returns 6, Sunday returns 0

// Format date 
        var date = new Date();
        console.log(date.getFullYear()); // Returns the year 2021 of the current date
        console.log(date.getMonth() + 1); // The month returned in the month is 1 month smaller. Remember month + 1 yo
        console.log(date.getDate()); // What number is returned
        console.log(date.getDay()); // 3 returns 1 on Monday, 6 on Saturday, and 0 on Sunday

——Output "days, days, weeks"

 var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var dates = date.getDate();
        var arr = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
        var day = date.getDay();
        console.log('Today is:' + year + 'year' + month + 'month' + dates + 'day ' + arr[day]);

——Output "today is Tuesday, February 16, 2021"

Format time: hour, minute and second

Encapsulates a function

I found a small flaw in the print

To solve this problem, let's modify it

function getTimer() {
            var time = new Date();
            var h = time.getHours();
            h = h < 10 ? '0' + h : h;
            //Less than 10? Add a 0 to the front~
            var m = time.getMinutes();
            m = m < 10 ? '0' + m : m;
             //Less than 10? Add a 0 to the front~
            var s = time.getSeconds();
            s = s < 10 ? '0' + s : s;
             //Less than 10? Add a 0 to the front~
            return h + ':' + m + ':' + s;
        }

Total milliseconds of Data (timestamp)

Important! Memorize the representation of time stamp~

That is, the total number of milliseconds from January 1, 1970.

There are four methods:

<script>
        // The total number of milliseconds (timestamp) obtained from Date is not the number of milliseconds of the current time, but the number of milliseconds since January 1, 1970
        // 1. Use valueof() gettime() method 1 and method 2
        var date = new Date();
        console.log(date.valueOf()); // Is the total number of milliseconds from 1970.1.1
        console.log(date.getTime());
        // 2. Simple writing method (the most commonly used writing method) method 3 is also the most commonly used method
        var date1 = +new Date(); // +new Date() returns the total number of milliseconds
        console.log(date1);
        // 3. The newly added method to obtain the total number of milliseconds in H5 has a problem with the compatibility of four methods. IE is crying
        console.log(Date.now());
</script>

The most commonly used is

var nowTime = +new Data();
//nowTime is the total number of milliseconds from 1970.1.1 to now
times = nowTime/1000;
//It is generally converted to seconds

Key points: countdown case

Case study:

[1] Core algorithm: input time - current time = remaining time
Countdown
**But you can't directly subtract time, minutes and seconds
For example: 5-20 is negative..

[2] Avoid negative results and solve this problem with a timestamp

Core algorithm: total milliseconds of user input time - Total milliseconds of current time = milliseconds of remaining time

[3] Convert the total number of milliseconds of the remaining time to days, hours, minutes and seconds (timestamp to minutes and seconds)

*The function of remainder is: (it is not exact to convert to integer QAQ)

Not 25h but 1h

Not 70, but 10

Not 70s but 10s

Here's the code:

function countDown(time) {
    var nowTime = +new Data();
    //Returns the total number of milliseconds of the current time
    var inputTime = new Data(time);
    //Returns the total number of milliseconds of user input time
    var times = (inputTime - nowTime)/1000;
    //Get the total seconds of the remaining time times
    var d = parseInt(times/60/60/24);
    d < 10 ? '0' + d : d;//When the number of dates is less than 10, add 0 before it
    var h = parseInt(times/60/60%24);
    h < 10 ? '0' + h : h;
    var m = parseInt(times/60%60);
    m < 10 ? '0' + m : m;
    var s = parseInt(times%60);
    s < 10 ? '0' + s : s;
    retrun (d + 'day' + h + 'Time' + m + 'branch' + s + 'second');
}
console.log(countDown('2021-2-16 19:30:00'));

Set 19:30 on February 16, 2021 as our termination time~

After I refreshed the page at 13:48, there was a time from 7:30 p.m~