เชี่ยวชาญวัตถุ Date ของ JavaScript อย่างสมบูรณ์

[คำแนะนำที่เกี่ยวข้อง: วิดีโอสอน JavaScript, ส่วนหน้าของเว็บ]

ต่อไป เราจะอธิบายออบเจ็กต์บิวท์อินทั่วไปประเภทที่สองใน JS - ออบเจ็กต์

Date ต่างจากออบเจ็กต์ Math และสามารถใช้ได้โดยตรง ในขณะที่อ็อบเจ็กต์ Date เป็นตัวสร้าง ดังนั้นเราต้องผ่านการสร้างอินสแตนซ์ของอ็อบเจ็กต์ก่อนจึงจะสามารถใช้งานได้

การสร้างอินสแตนซ์ของวัตถุวันที่:

var date=new Date();

วัตถุ Date สามารถสร้างอินสแตนซ์โดยมีหรือไม่มีพารามิเตอร์ก็ได้ เอาต์พุตที่ไม่มีพารามิเตอร์คือเวลามาตรฐานของระบบปัจจุบัน หากมีพารามิเตอร์ เราสามารถส่งออกเวลาที่เราต้องการแสดงได้

1: การสร้างอินสแตนซ์โดยไม่มี

พารามิเตอร์

เวลาและวันที่ของระบบปัจจุบันจะปรากฏขึ้น

var date=new Date(); //ไม่มีพารามิเตอร์ console.log(date); เอาท์พุท

2: การสร้างอินสแตนซ์ด้วยพารามิเตอร์

การสร้างอินสแตนซ์มีสองประเภท ได้แก่ ประเภทตัวเลข และ ประเภทสตริง ต่อไปนี้เป็นตัวอย่างของทั้งสองประเภทตามลำดับ

1. การสร้างอินสแตนซ์ของพารามิเตอร์ตัวเลข:

var date=new Date(2021 ,1,18); //พารามิเตอร์ตัวเลข console.log(วันที่);

คุณจะเห็นว่าพารามิเตอร์ที่เราป้อนคือเดือนมกราคม แต่ผลลัพธ์ที่ได้คือเดือนกุมภาพันธ์ (กุมภาพันธ์) ผลลัพธ์ที่เป็นตัวเลขจะมากกว่าเดือนที่เราป้อนหนึ่งเดือน

2. การสร้างอินสแตนซ์ของพารามิเตอร์สตริง:

var date=new Date('2021-1-18 12:56:00'); //พารามิเตอร์สตริง console.log(date);

พารามิเตอร์คือมกราคม และผลลัพธ์เอาต์พุตคือมกราคม ดังนั้นพารามิเตอร์สตริงจึงถูกใช้บ่อยกว่าพารามิเตอร์ตัวเลข

สาม: จัดรูปแบบปี เดือน และวัน

เรารู้แล้วว่าออบเจ็กต์ Math มีคุณสมบัติและวิธีการมากมายที่สามารถใช้ได้โดยตรง เช่นเดียวกับออบเจ็กต์ Date หลายวิธีที่สามารถใช้ได้หลังจากการสร้างอินสแตนซ์ วิธีการจัดรูปแบบปี เดือน และวัน:

getFullYear() ส่งออกปีปัจจุบัน

getMonth() เอาท์พุตของเดือนปัจจุบัน (ควรสังเกตว่าเดือนที่เอาท์พุตน้อยกว่าเดือนจริง 1 และควรเพิ่ม 1 ลงในเอาต์พุตของเดือนจริง)

getDate() ส่งออกวันปัจจุบัน

getDay() ส่งออกวันปัจจุบันของสัปดาห์ (ตัวเลขที่สอดคล้องกันตั้งแต่วันจันทร์ถึงวันอาทิตย์: 1 2 3 4 5 6 0)

var Date=new Date();

 console.log(Date.getFullYear()); //ส่งออกปีปัจจุบัน console.log(Date.getMonth() + 1); //ผลลัพธ์ที่ได้คือเดือนก่อนเดือนปัจจุบัน คุณต้องเพิ่ม 1 ด้วยตนเองจึงจะส่งคืน คอนโซลเดือนปัจจุบัน .log(Date.getDate()); //ส่งออกวันปัจจุบันของสัปดาห์ console.log(Date.getDay()); //ส่งออกวันปัจจุบันของสัปดาห์

หากคุณต้องการให้เอฟเฟกต์ผลลัพธ์เป็น วันอังคารที่ 18 มกราคม 2021 คุณสามารถทำสิ่งต่อไปนี้ได้

(เนื่องจากวันในสัปดาห์สามารถส่งคืนตัวเลขได้เพียงตัวเดียว แต่ตามนิสัยแล้ว เราต้องการส่งคืน 'วันในสัปดาห์' ดังนั้น เราถือว่าตัวเลขที่ส่งคืนเป็นดัชนี โดยใส่วันอาทิตย์ถึงวันเสาร์ไว้ในอาร์เรย์ เนื่องจากวันอาทิตย์ส่งคืน 0 ดังนั้นให้ใส่วันอาทิตย์ไว้ที่ตำแหน่งแรกของอาร์เรย์ ซึ่งสอดคล้องกับดัชนี 0)

var arr=['Sunday','Monday ',' วันอังคาร','วันพุธ','วันพฤหัสบดี','วันศุกร์','วันเสาร์'];

var วันที่ = วันที่ใหม่ ();

var year=Date.getFullYear(); 

var month=Date.getMonth() + 1; 

var date=Date.getDate();

var day=Date.getDay();  

 console.log(ปี + 'ปี' + เดือน + 'เดือน' + วันที่ + 'วัน' + arr[วัน]);

สี่: การจัดรูปแบบชั่วโมง นาที

getHours()

เหมือนกับการจัดรูปแบบปี เดือน และวันด้านบน

เอาท์พุทชั่วโมงปัจจุบัน

getMinutes() เอาท์พุทนาทีปัจจุบัน

getSeconds() เอาท์พุต var ที่สองปัจจุบัน

Date=new Date();  

console.log(Date.getHours()); //ส่งออกชั่วโมงปัจจุบัน console.log(Date.getMinutes()); //ส่งออกนาทีปัจจุบัน console.log(Date.getSeconds()); //ส่งออกปัจจุบัน วินาที

ชั่วโมง นาที และวินาทีในรูปแบบต่อเนื่อง:

สรุปไว้ในฟังก์ชัน และใช้ตัวดำเนินการแบบไตรภาคเพื่อเพิ่ม 0 ให้กับตัวเลขที่น้อยกว่า 10 ซึ่งสอดคล้องกับนิสัยปกติในการดู

ฟังก์ชันเวลา time()

-

เวลา var = วันที่ใหม่ ();

var h=time.getHours();

ชั่วโมง = ชั่วโมง<10 ? '0'+ชั่วโมง : ชั่วโมง;

var m=time.getMinutes();

ม. = ม.<10 ? '0'+ม. : ม.;

var s=time.getSeconds();

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

กลับ h+'ชั่วโมง'+m+'นาที'+s+'วินาที';

-

console.log(เวลา());

ห้า: รับจำนวนมิลลิวินาทีทั้งหมด (การประทับเวลา) ของเวลาปัจจุบัน

จำนวนมิลลิวินาทีทั้งหมดที่กล่าวถึงในที่นี้อ้างอิงถึงจำนวนมิลลิวินาทีทั้งหมดนับจากเวลาปัจจุบันถึงวันที่ 1 มกราคม 1970 มีสี่วิธีในการแสดง

valueOf()

getTime ()

var date= วันที่ใหม่ ();

console.log(date.valueOf());   

console.log(date.getTime());

หรือใช้วิธีการเขียนง่ายๆ อื่น var date=+new Date(); ซึ่งส่งคืนจำนวนมิลลิวินาทีทั้งหมด

var date=+new Date();

console.log(date)

และเมธอดใหม่ที่เพิ่มเข้ามาใน H5 วิธีนี้สามารถได้รับโดยไม่ต้องสร้างอินสแตนซ์ของอ็อบเจ็กต์และง่ายกว่า

console.log

(Date.now());

หก: กรณีการนับถอยหลัง (จุดสำคัญ)

การนับถอยหลังถูกนำมาใช้ในหลาย ๆ ที่ระหว่างการพัฒนา เช่น Taobao การนับถอยหลัง Double Eleven Flash Sale ของ JD.com เป็นต้น เราจะเขียนเอฟเฟกต์การนับถอยหลังได้อย่างไร ก่อนอื่นเราคิดถึงสิ่งที่เราเพิ่งเรียนรู้เกี่ยวกับการรับเวลาปัจจุบัน จากนั้น ลบเวลาที่เราตั้งไว้ เวลาก็เพียงพอแล้ว แต่เวลามาตรฐานที่เราได้รับน่าจะเป็นจำนวนลบหลังลบ (เช่น 02-12) ดังนั้น การประทับเวลา ของเราจึงมีค่า การประทับเวลาคือจำนวนมิลลิวินาทีทั้งหมดที่เพิ่งกล่าวถึง ในกรณีนี้ เราสามารถใช้ จำนวนมิลลิวินาทีทั้งหมดที่ตั้งไว้ลบด้วยจำนวนมิลลิวินาทีทั้งหมดในปัจจุบัน การแปลงหน่วย คุณสามารถหากรณีการนับถอยหลังง่ายๆ ได้ อันดับแรก เราต้องเชี่ยวชาญในการจดจำความสัมพันธ์ระหว่างการแปลงหน่วย:

1 วินาที = 1,000 มิลลิวินาที

วัน = วินาที/60/60/24

ชั่วโมง = วินาที จำนวน/60/60% 24

นาที=วินาที/60%60

วินาที=วินาที%60สำหรับ

วินาทีที่ไม่สามารถหารลงตัวได้ เราสามารถใช้เมธอด parseInt() เพื่อปัดเศษ ด้วยความสัมพันธ์ในการแปลงดังกล่าว เราจึงสามารถดำเนินการกรณีการนับถอยหลังนี้ให้สำเร็จได้อย่างง่ายดายด้วย

ฟังก์ชัน count(time)

-

    var nowtime=+new Date(); // รับเวลาปัจจุบัน var imtime=+new Date(time); // รับเวลาเป้าหมาย (เวลาสิ้นสุด)

    var times=(aimtime-nowtime)/1000; // รับส่วนต่างของเวลานับถอยหลัง (มิลลิวินาที) หาร 1,000 เพื่อรับวินาที d<10?'0' +d:d; //บวก 0 เข้ากับเวลาที่น้อยกว่า 10

    var h=parseInt(times/60/60%24) //รับเวลานับถอยหลัง h=h<10?'0'+h:h; // เพิ่ม 0 เป็นเวลาน้อยกว่า 10

    var m=parseInt(times/60%60) //รับนาทีนับถอยหลัง m=m<10?'0'+m:m; //บวก 0 เข้ากับเวลาที่น้อยกว่า 10

    var s=parseInt(times%60) //รับวินาทีที่นับถอยหลัง s=s<10?'0'+s:s; //บวก 0 ในเวลาน้อยกว่า 10

    กลับ d + 'วัน' + h + 'ชั่วโมง' + m + 'นาที' + s + 'วินาที' // กลับนับถอยหลัง}

alert('การนับถอยหลังยังคงอยู่' + count('2022-1-18 16:30:00')); // โทรและป้อนเวลาสิ้นสุดของเป้าหมาย

[

คำแนะนำที่เกี่ยวข้อง: วิดีโอสอน javascript, ส่วนหน้าของเว็บ]

ข้างต้นเป็นความเข้าใจที่สมบูรณ์ สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับวัตถุ Date ของ JavaScript โปรดใส่ใจกับบทความอื่น ๆ ที่เกี่ยวข้องในเครือข่ายซอร์สโค้ดสำหรับข้อมูลเพิ่มเติม!