Maison > interface Web > js tutoriel > Maîtrise complète de l'objet Date de JavaScript

Maîtrise complète de l'objet Date de JavaScript

WBOY
Libérer: 2022-05-18 11:58:03
avant
2184 Les gens l'ont consulté

Cet article vous apporte des connaissances pertinentes sur javascript, qui introduit principalement des problèmes liés aux objets date. L'objet Date est un constructeur, nous devons donc instancier l'objet, c'est-à-dire qu'il peut être utilisé après avoir passé new , jetons un coup d'œil. j'espère que cela sera utile à tout le monde.

Maîtrise complète de l'objet Date de JavaScript

【Recommandations associées : tutoriel vidéo javascript, front-end web

Ensuite, nous expliquerons le deuxième type d'objets intégrés courants dans JS - Objet Date

Objet Date et objet Math La différence est que l'objet Math n'est pas un constructeur et peut être utilisé directement, tandis que l'objet Date est un constructeur, nous devons donc instancier l'objet, c'est-à-dire avant qu'il puisse être utilisé après avoir passé un nouveau. L'objet Date est principalement utilisé pour traiter les problèmes d'heure et de date en cours de développement.

Instanciation de l'objet Date :

var date=new Date();
Copier après la connexion

L'instanciation de l'objet Date peut avoir des paramètres ou aucun paramètre. La sortie sans paramètres est l'heure standard du système actuel à ce moment-là. S'il y a des paramètres, nous pouvons produire ce que nous voulons. à afficher. Heure

Un : Instanciation sans paramètres

Après l'instanciation sans paramètres, l'heure et la date du système actuel seront affichées

var date=new Date();  //没有参数

console.log(date);  //会输出当前时间
Copier après la connexion

Deux : Instanciation avec paramètres

Instances avec paramètres Là sont deux types, à savoir type numérique et type chaîne Voici des exemples des deux types respectivement

1 Instanciation des paramètres numériques :

var date=new Date(2021,1,18);  //数字型参数

console.log(date);
Copier après la connexion

Vous pouvez nous voir Le paramètre d'entrée est janvier. , mais le résultat de sortie est Feb (février). La sortie numérique sera supérieure d'un mois au mois que nous avons saisi.

2. Instanciation des paramètres de chaîne :

var date=new Date('2021-1-18 12:56:00');  //字符串型参数

console.log(date);
Copier après la connexion

Le paramètre est janvier, et le résultat de sortie est également janvier, donc les paramètres de chaîne sont utilisés plus que les paramètres numériques.

Trois : Formatage de l'année, du mois et du jour

Nous savons déjà que l'objet Math possède de nombreuses propriétés et méthodes qui peuvent être utilisées directement. Il en va de même pour l'objet Date. Après l'instanciation, de nombreuses méthodes peuvent également être utilisées.

getFullYear() Afficher l'année en cours

getMonth() . Sortie le mois en cours (A noter que le mois de sortie est plus long que le mois réel Petit 1, la sortie du mois réel devrait être augmentée de 1)

getDate() Sortie du jour en cours

getDay() Sortie du jour de la semaine en cours (Numéros correspondants du lundi au dimanche : 1 2 3 4 5 6 0)

var Date=new Date();

 console.log(Date.getFullYear());  //输出当前年份

 console.log(Date.getMonth() + 1);  //输出结果为当前月份的前一月,要手动加1才能返回当前月份

 console.log(Date.getDate());  //输出当前几号

 console.log(Date.getDay());  //输出当前周几
Copier après la connexion

Si vous souhaitez que l'effet de sortie soit mardi 18 janvier 2021 , vous pouvez faire ce qui suit

(Parce que le jour de la semaine ne peut renvoyer qu'un seul numéro, mais selon la coutume, nous voulons revenir le 'jour de la semaine', nous traitons donc le nombre renvoyé comme un index et mettons du dimanche au samedi dans un tableau, car dimanche renvoie 0, donc mettons dimanche à la première position du tableau, ce qui correspond à l'index 0)

var arr=['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];

var Date=new Date();

var year=Date.getFullYear(); 

var month=Date.getMonth() + 1; 

var date=Date.getDate();

var day=Date.getDay();  

 console.log(year + '年' + month + '月' + date + '日' + arr[day]);
Copier après la connexion

four: les heures de mise en forme, les minutes et les secondes

sont similaires à la méthode de formatage de l'année, du mois et du jour au-dessus

Géthours () out à l'heure en cours

getMinutes() Afficher les minutes actuelles

getSeconds()    输出当前秒

var Date=new Date();  

console.log(Date.getHours());  //输出当前小时

console.log(Date.getMinutes());  //输出当前分钟

console.log(Date.getSeconds());  //输出当前秒
Copier après la connexion

 

 输出连续格式时分秒:

将其封装在了函数内,并利用三元运算符将不足10的数字补0,符合平常看时间的习惯

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+'时'+m+'分'+s+'秒';

}

console.log(time());
Copier après la connexion

五:获取当前时间总毫秒数(时间戳)

这里所说的总毫秒数是指当前时间距离1970年1月1日的总毫秒数,共有四种方法可以表示

valueOf()

getTime()

var date=new Date();

console.log(date.valueOf());   

console.log(date.getTime());
Copier après la connexion

 或者使用另外一种简便写法 var date=+new Date();返回的就是总毫秒数

var date=+new Date();

console.log(date);
Copier après la connexion

 以及H5新增加的一种方法,这个方法不需要实例化对象即可获得,更为简便

console.log(Date.now());
Copier après la connexion

六:倒计时案例(重点)

在日常开发中很多地方都会用的到倒计时,例如淘宝,京东的双十一秒杀倒计时等,我们如何也写出一个倒计时效果呢,我们首先会想到刚才学到的获取当前时间,再减去我们设置好的时间即可,但是我们获取到的标准时间很可能会出现减去之后是负数的情况(例如02-12)这怎么办呢?于是我们的时间戳便有利用价值了,时间戳即刚才讲到过的总毫秒数,这个时间是永远不会重复的,对此我们可以使用设置好的总毫秒数减去当前的总毫秒数,在进行一系列单位换算,就可以得到一个简单的倒计时案例了,首先我们需要熟练记清楚单位换算之间的关系:

1秒=1000毫秒

天数=秒数/60/60/24

小时数=秒数/60/60%24

分钟数=秒数/60%60

秒数=秒数%60

对于无法整除的秒数,我们利用 parseInt() 方法取整即可,有了这样一个换算关系,我们就可以轻松地完成这个倒计时案例了

function count(time)

{

    var nowtime=+new Date(); //得到当前时间

    var aimtime=+new Date(time);  //得到目标时间(结束时间)

    var times=(aimtime-nowtime)/1000;  //得到倒计时时间差(毫秒) 除1000得到秒

    var d=parseInt(times/60/60/24)  //得到倒计时天数

    d=d<10?'0'+d:d;  //将不足10的时间补0

    var h=parseInt(times/60/60%24)  //得到倒计时小时数

    h=h<10?'0'+h:h;  //将不足10的时间补0

    var m=parseInt(times/60%60)  //得到倒计时分钟数

    m=m<10?'0'+m:m;  //将不足10的时间补0

    var s=parseInt(times%60)  //得到倒计时秒数

    s=s<10?'0'+s:s;  //将不足10的时间补0

    return d + '天' + h + '时' + m + '分' + s +'秒';  //返回倒计时

}

alert('倒计时还剩下' + count('2022-1-18 16:30:00'));  //调用并输入目标的结束时间
Copier après la connexion

【相关推荐:javascript视频教程web前端

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:csdn.net
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal