Date 对象用于处理日期与时间。
创建 Date 对象: new Date()
以下四种方法同样可以创建 Date 对象:

  1. var d = new Date();
  2. var d = new Date(milliseconds);
  3. var d = new Date(dateString);
  4. var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);

Date 对象属性

属性 描述
constructor 返回对创建此对象的 Date 函数的引用。
prototype 使您有能力向对象添加属性和方法。

Date 对象方法

方法 描述
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear() 从 Date 对象以四位数字返回年份。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
getTimezoneOffset() 返回本地时间与格林威治标准时间 (GMT) 的分钟差。
getUTCDate() 根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。
getUTCDay() 根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。
getUTCFullYear() 根据世界时从 Date 对象返回四位数的年份。
getUTCHours() 根据世界时返回 Date 对象的小时 (0 ~ 23)。
getUTCMilliseconds() 根据世界时返回 Date 对象的毫秒(0 ~ 999)。
getUTCMinutes() 根据世界时返回 Date 对象的分钟 (0 ~ 59)。
getUTCMonth() 根据世界时从 Date 对象返回月份 (0 ~ 11)。
getUTCSeconds() 根据世界时返回 Date 对象的秒钟 (0 ~ 59)。
getYear() 已废弃。 请使用 getFullYear() 方法代替。
parse() 返回1970年1月1日午夜到指定日期(字符串)的毫秒数。
setDate() 设置 Date 对象中月的某一天 (1 ~ 31)。
setFullYear() 设置 Date 对象中的年份(四位数字)。
setHours() 设置 Date 对象中的小时 (0 ~ 23)。
setMilliseconds() 设置 Date 对象中的毫秒 (0 ~ 999)。
setMinutes() 设置 Date 对象中的分钟 (0 ~ 59)。
setMonth() 设置 Date 对象中月份 (0 ~ 11)。
setSeconds() 设置 Date 对象中的秒钟 (0 ~ 59)。
setTime() setTime() 方法以毫秒设置 Date 对象。
setUTCDate() 根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。
setUTCFullYear() 根据世界时设置 Date 对象中的年份(四位数字)。
setUTCHours() 根据世界时设置 Date 对象中的小时 (0 ~ 23)。
setUTCMilliseconds() 根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
setUTCMinutes() 根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
setUTCMonth() 根据世界时设置 Date 对象中的月份 (0 ~ 11)。
setUTCSeconds() setUTCSeconds() 方法用于根据世界时 (UTC) 设置指定时间的秒字段。
setYear() 已废弃。请使用 setFullYear() 方法代替。
toDateString() 把 Date 对象的日期部分转换为字符串。
toGMTString() 已废弃。请使用 toUTCString() 方法代替。
toISOString() 使用 ISO 标准返回字符串的日期格式。
toJSON() 以 JSON 数据格式返回日期字符串。
toLocaleDateString() 根据本地时间格式,把 Date 对象的日期部分转换为字符串。
toLocaleTimeString() 根据本地时间格式,把 Date 对象的时间部分转换为字符串。
toLocaleString() 根据本地时间格式,把 Date 对象转换为字符串。
toString() 把 Date 对象转换为字符串。
toTimeString() 把 Date 对象的时间部分转换为字符串。
toUTCString() 根据世界时,把 Date 对象转换为字符串。
实例:var today = new Date();

var UTCstring = today.toUTCString(); | | UTC() | 根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。 | | valueOf() | 返回 Date 对象的原始值。 |

示例

示例一:获取当前时间

  1. // Date
  2. var d = new Date();
  3. /* 年,月,日 */
  4. var year = d.getFullYear();
  5. var month = d.getMonth();
  6. var date = d.getDate();
  7. /* 时,分,秒,毫秒
  8. 1s =1000 millisecond
  9. */
  10. var hour = d.getHours();
  11. var minute = d.getMinutes()
  12. var second = d.getSeconds();
  13. var mills = d.getTime();
  14. console.log(d);
  15. console.log(year);
  16. console.log(month+1) //月份是从0开始的,要加1
  17. console.log(date)
  18. console.log(hour)
  19. console.log(minute)
  20. console.log(second);
  21. console.log(mills)

示例二:倒计时

  1. <p id="app">
  2. 10:10:01
  3. </p>
  4. <script>
  5. function handleTime(value) {
  6. if (value < 10) {
  7. return "0" + value;
  8. }
  9. return "" + value;
  10. }
  11. function showTime() {
  12. var app = document.getElementById("app")
  13. var endTime = "2020-12-01 16:50:00";
  14. /* 1.获取结束时间的毫秒 */;
  15. endTime = new Date(endTime).getTime();
  16. /* 2.获取当前时间的毫秒 */
  17. var nowTime = new Date().getTime();
  18. /* 3.获取他们之间的差 */
  19. var gapTime = endTime - nowTime;
  20. /* 4.将他们的差转换为时分秒 */
  21. var seconds = Math.floor(gapTime / 1000);
  22. var hours = handleTime(Math.floor(seconds / 3600));
  23. seconds = seconds % 3600;
  24. var minutes = handleTime(Math.floor(seconds / 60));
  25. seconds = handleTime(seconds % 60);
  26. var sum = hours + ":" + minutes + ":" + seconds;
  27. app.innerHTML = sum;
  28. }
  29. showTime();
  30. setInterval(function(){
  31. showTime();
  32. },1000)
  33. </script>

示例二:动态时钟

  1. <div id="app">
  2. <img src="images/0.png" alt="">
  3. <img src="images/0.png" alt="">
  4. <span>:</span>
  5. <img src="images/0.png" alt="">
  6. <img src="images/0.png" alt="">
  7. <span>:</span>
  8. <img src="images/0.png" alt="">
  9. <img src="images/0.png" alt="">
  10. </div>
  11. <script>
  12. function handleTime(value) {
  13. if (value < 10) {
  14. return "0" + value;
  15. }
  16. return "" + value;
  17. }
  18. function showTime() {
  19. var imgs = document.querySelectorAll("#app img")
  20. var d = new Date();
  21. var hours = handleTime(d.getHours());
  22. var minutes = handleTime(d.getMinutes());
  23. var seconds = handleTime(d.getSeconds());
  24. var sum = hours + minutes + seconds;
  25. for (var i = 0; i < imgs.length; i++) {
  26. // imgs[i].src = "images/" + sum[i] + ".png";
  27. imgs[i].src = `images/${sum[i]}.png`;
  28. }
  29. setTimeout(function(){
  30. showTime()
  31. },1000)
  32. }
  33. showTime()
  34. </script>