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


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

        // 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();
        // 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');

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:

        // 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
        // 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
        // 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

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
**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~

To be improved

After learning the API, we can print the countdown to our web page~
Just like JD's "time limited second kill effect"~

Tags: Javascript

Posted by ahundiak on Tue, 19 Apr 2022 00:27:59 +0930