Complete mastery of JavaScript’s Date object

[Related recommendations: JavaScript video tutorial, web front-end]

Next, we will explain the second type of common built-in object in JS - Date object

. The Date object is different from the Math object. The Math object is not a constructor and can be used directly, while the Date object is a constructor. , so we must go through object instantiation, that is, new before it can be used. Date objects are mostly used to deal with time and date issues in development.

Date object instantiation:

var date=new Date();

The Date object can be instantiated with or without parameters. The output without parameters is the standard time of the current system. If there are parameters, we can output the time we want to display.

1: Instantiation without parameters.

After instantiation without parameters, the time and date of the current system will be displayed.

var date=new Date(); //No parameters console.log(date); //The current time will be output.

2: Instantiation with parameters

There are two types of instantiation with parameters, namely numeric type and string type . The following are examples of the two types respectively

1. Instantiation of numeric parameters:

var date=new Date(2021 ,1,18); //Numeric parameter console.log(date);

You can see that the parameter we entered is January, but the output result is Feb (February). The numerical output will be one month greater than the month we entered.

2. Instantiation of string parameters:

var date=new Date('2021-1-18 12:56:00'); //String parameters console.log(date);

The parameter is January, and the output result is also January, so string parameters are used more often than numeric parameters.

Three: Format the year, month and day.

We already know that the Math object has many attributes and methods that can be used directly. The same is true for the Date object. Many methods can also be used after instantiation. There are three commonly used methods for formatting the year, month and day:

getFullYear() Output the current year

getMonth() Output the current month (it should be noted that the output month is 1 less than the actual month, and 1 should be added to the output of the real month)

getDate() Output the current day

getDay() Output the current day of the week (corresponding numbers from Monday to Sunday: 1 2 3 4 5 6 0)

var Date=new Date();

 console.log(Date.getFullYear()); //Output the current year console.log(Date.getMonth() + 1); //The output result is the month before the current month. You must manually add 1 to return the current month console .log(Date.getDate()); //Output the current day of the week console.log(Date.getDay()); //Output the current day of the week

If you want the output effect to be Tuesday, January 18, 2021 , you can do the following

(because the day of the week can only return one number, but according to habit we want to return the 'day of the week', so we treat the returned number as a Index, put Sunday to Saturday into an array, because Sunday returns 0, so put Sunday at the first position of the array, which corresponds to the 0 index)

var arr=['Sunday','Monday',' Tuesday','Wednesday','Thursday','Friday','Saturday'];

var Date=new Date();

var year=Date.getFullYear(); 

var month=Date.getMonth() + 1; 

var date=Date.getDate();

var day=Date.getDay();  

 console.log(year + 'year' + month + 'month' + date + 'day' + arr[day]);

Four: Formatting hours, minutes

getHours()

as formatting years, months and days above

Output the current hour

getMinutes() Output the current minute

getSeconds() Output the current second

var Date=new Date();  

console.log(Date.getHours()); //Output the current hour console.log(Date.getMinutes()); //Output the current minutes console.log(Date.getSeconds()); //Output the current seconds

Output hours, minutes and seconds in continuous format:

encapsulate it in a function, and use the ternary operator to add 0 to numbers less than 10, which is in line with the usual habit of looking at time

function time()

{

var time=new Date();

var h=time.getHours();

h = h<10 ? '0'+h : h;

var m=time.getMinutes();

m = m<10 ? '0'+m : m;

var s=time.getSeconds();

s = s<10 ? '0'+s : s;

return h+'hour'+m+'minute'+s+'second';

}

console.log(time());

Five: Get the total number of milliseconds (timestamp) of the current time.

The total number of milliseconds mentioned here refers to the total number of milliseconds from the current time to January 1, 1970. There are four methods to express

valueOf()

getTime()

var date= new Date();

console.log(date.valueOf());   

console.log(date.getTime());

Or use another simple writing method var date=+new Date(); which returns the total number of milliseconds

var date=+new Date();

console.log(date);

and a new method added in H5. This method can be obtained without instantiating an object and is simpler.

console.log(Date.now());

Six: Countdown case (key point)

in daily life Countdowns are used in many places during development, such as Taobao, JD.com’s Double Eleven Flash Sale countdown, etc. How can we write a countdown effect? ​​We first think of what we just learned about getting the current time, and then subtract the time we set. The time is enough, but the standard time we obtain is likely to be a negative number after subtraction (such as 02-12). What should we do? So our timestamp is valuable. The timestamp is the total number of milliseconds just mentioned. This time will never be repeated. For this, we can use the set total number of milliseconds minus the current total number of milliseconds. , after performing a series of unit conversions, you can get a simple countdown case. First, we need to be proficient in remembering the relationship between unit conversions:

1 second = 1000 milliseconds

, days = seconds/60/60/24

hours = seconds Number/60/60%24

minutes=seconds/60%60

seconds=seconds%60For

seconds that cannot be divisible, we can use the parseInt() method to round. With such a conversion relationship, we This countdown case can be easily accomplished with

function count(time)

{

    var nowtime=+new Date(); //Get the current time var aimtime=+new Date(time); //Get the target time (end time)

    var times=(aimtime-nowtime)/1000; //Get the countdown time difference (milliseconds). Divide 1000 to get the seconds. var d=parseInt(times/60/60/24) //Get the countdown days d=d<10?'0' +d:d; //Add 0 to the time less than 10

    var h=parseInt(times/60/60%24) //Get the countdown hours h=h<10?'0'+h:h; //Add 0 to the time less than 10

    var m=parseInt(times/60%60) //Get the countdown minutes m=m<10?'0'+m:m; //Add 0 to the time less than 10

    var s=parseInt(times%60) //Get the countdown seconds s=s<10?'0'+s:s; //Add 0 to the time less than 10

    return d + 'day' + h + 'hour' + m + 'minute' + s + 'second'; //Return countdown}

alert('The countdown remains' + count('2022-1-18 16:30:00')); //Call and enter the end time of the target

[Related recommendations: javascript video tutorial, web front-end]

The above is a complete grasp For more details on the Date object of JavaScript, please pay attention to other related articles on the source code network for more information!