Heim > Web-Frontend > js-Tutorial > Hauptteil

Vollständige Beherrschung des Date-Objekts von JavaScript

WBOY
Freigeben: 2022-05-18 11:58:03
nach vorne
2152 Leute haben es durchsucht

Dieser Artikel vermittelt Ihnen relevantes Wissen über Javascript, das hauptsächlich Probleme im Zusammenhang mit Datumsobjekten vorstellt. Das Datumsobjekt ist ein Konstruktor, daher müssen wir das Objekt instanziieren, das heißt, es kann nach der Übergabe von new verwendet werden. Schauen wir uns das an Ich hoffe, dass es für alle hilfreich sein wird.

Vollständige Beherrschung des Date-Objekts von JavaScript

【Verwandte Empfehlungen: Javascript-Video-Tutorial, Web-Frontend

Als nächstes erklären wir den zweiten Typ gängiger integrierter Objekte in JS – Datumsobjekt

Date-Objekt und Math-Objekt Der Unterschied besteht darin, dass das Math-Objekt kein Konstruktor ist und direkt verwendet werden kann, während das Date-Objekt ein Konstruktor ist. Daher müssen wir das Objekt instanziieren, dh bevor es nach der Übergabe von new verwendet werden kann. Das Date-Objekt wird hauptsächlich zur Behandlung von Zeit- und Datumsproblemen in der Entwicklung verwendet.

Datumsobjektinstanziierung:

var date=new Date();
Nach dem Login kopieren

Datumsobjektinstanziierung kann Parameter oder keine Parameter haben. Wenn es Parameter gibt, können wir ausgeben, was wir wollen anzuzeigen. Zeit

Eins: Instanziierung ohne Parameter

Nach der Instanziierung ohne Parameter werden die Uhrzeit und das Datum des aktuellen Systems angezeigt

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

console.log(date);  //会输出当前时间
Nach dem Login kopieren

Zweit: Instanziierung mit Parametern

Instanzen mit Parametern Dort Es gibt zwei Typen, nämlich numerischer Typ und String-Typ . Im Folgenden finden Sie Beispiele für die beiden Typen:

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

console.log(date);
Nach dem Login kopieren

Der Eingabeparameter ist January , aber das Ausgabeergebnis ist Feb (Februar). Die numerische Ausgabe ist einen Monat größer als der von uns eingegebene Monat.

2. Instanziierung von String-Parametern:

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

console.log(date);
Nach dem Login kopieren

Der Parameter ist Januar, und das Ausgabeergebnis ist ebenfalls Januar, daher werden String-Parameter häufiger verwendet als numerische Parameter.

Drei: Formatierung von Jahr, Monat und Tag

Wir wissen bereits, dass das Math-Objekt viele Eigenschaften und Methoden hat, die direkt verwendet werden können. Dasselbe gilt für das Date-Objekt. Nach der Instanziierung können auch viele Methoden verwendet werden . Es gibt drei häufig verwendete Formatierungsmethoden für das Jahr und den Monat:

getFullYear()

Ausgabe des aktuellen Jahres

getMonth()

Ausgabe der aktuelle Monat (Es ist zu beachten, dass der Ausgabemonat länger ist als der tatsächliche Monat. Klein 1, die Ausgabe des echten Monats sollte um 1 erhöht werden)

getDate()

Den aktuellen Tag ausgeben

getDay()

Den aktuellen Tag der Woche ausgeben (Entsprechende Zahlen von Montag bis Sonntag: 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());  //输出当前周几
Nach dem Login kopieren

Wenn Sie möchten, dass der Ausgabeeffekt Dienstag, 18. Januar 2021

ist, können Sie Folgendes tun

(Weil der Wochentag nur eine Zahl zurückgeben kann, wir aber gemäß Brauch zurückgeben möchten der „Wochentag“, daher behandeln wir die zurückgegebene Zahl als Index und fügen Sonntag bis Samstag in ein Array ein, da Sonntag 0 zurückgibt. Setzen Sie also Sonntag an die erste Position des Arrays, was dem 0-Index entspricht)

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]);
Nach dem Login kopieren

Vier: Die Formatierung von Stunden, Minuten und Sekunden ähnelt der oben beschriebenen Methode zur Formatierung von Jahr, Monat und Tag

getMinutes()

Aktuelle Minuten ausgeben

getSeconds()    输出当前秒

var Date=new Date();  

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

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

console.log(Date.getSeconds());  //输出当前秒
Nach dem Login kopieren

 

 输出连续格式时分秒:

将其封装在了函数内,并利用三元运算符将不足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());
Nach dem Login kopieren

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

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

valueOf()

getTime()

var date=new Date();

console.log(date.valueOf());   

console.log(date.getTime());
Nach dem Login kopieren

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

var date=+new Date();

console.log(date);
Nach dem Login kopieren

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

console.log(Date.now());
Nach dem Login kopieren

六:倒计时案例(重点)

在日常开发中很多地方都会用的到倒计时,例如淘宝,京东的双十一秒杀倒计时等,我们如何也写出一个倒计时效果呢,我们首先会想到刚才学到的获取当前时间,再减去我们设置好的时间即可,但是我们获取到的标准时间很可能会出现减去之后是负数的情况(例如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'));  //调用并输入目标的结束时间
Nach dem Login kopieren

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

Das obige ist der detaillierte Inhalt vonVollständige Beherrschung des Date-Objekts von JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:csdn.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage