likes
comments
collection
share

在HTML页面上显示实时时间和日期的详细指南

作者站长头像
站长
· 阅读数 48

在这篇文章中，我们已经介绍了在HTML页面上显示实时时间和日期的HTML和JavaScript代码。Javascript日期对象和HTML span元素可以用来显示当前日期和时间。默认情况下，Javascript使用浏览器的时区来显示时间和日期。

实时时间是

注意：上述时间不断变化。

目录:

  1. JavaScript日期对象+HTML、JS代码
  2. 实时更新日期和时间
  3. 获取日期和时间的方法
  4. 摘要

让我们开始学习在HTML页面上显示实时时间和日期。

JavaScript日期对象 + HTML, JS代码

新的Date()构造函数被用来创建日期对象，当前日期和时间被存储在javascript变量中。

然后使用TextContent属性将HTML span元素的内容设置为当前时间。唯一的ID被赋予span标签，这样我们就可以在getElementById()方法中使用它来显示当前日期和时间。

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial scale=1.0">
<title>Document</title>
<h1> Time is <span id="time"> </span></h1>
<script src="index.js">   </script>
</head>
<body>
</body>
</html>

JavaScript代码

 `use strict`
var datetime = new Date();
console.log(datetime);
document.getElementById("time").textContent = datetime; //it will print on html page

演示 日期和时间是Thu Sep 30 2021 10:43:14 GMT+0530 (印度标准时间)

实时更新日期和时间

以下是在一个给定的时间间隔内实时更新日期和时间的代码:

`use strict`;
function refreshTime() {
  const timeDisplay = document.getElementById("time");
  const dateString = new Date().toLocaleString();
  const formattedString = dateString.replace(", ", " - ");
  timeDisplay.textContent = formattedString;
}
  setInterval(refreshTime, 1000);

获取日期和时间的方法

  • Date.prototype.getDate():

它根据当地的时区返回1-31之间的一个月的日期。

使用getdate()方法

 `use strict`
var datetime = new Date().getDate();
console.log(datetime); // it will represent date in the console of developers tool
document.getElementById("time").textContent = datetime; //it will print on html page

  • Date.prototype.getday():

    它根据当地时区返回特定日期的星期（0-6）。

使用getday()函数

`use strict`
var datetime = new Date().getDay();
console.log(datetime); // it will represent date in the console of developers tool
document.getElementById("time").textContent = datetime; //it will print on html page

  • Date.prototype.getFullYear()。

    它根据当地时区返回指定日期的年份。

使用getFullYear()

 `use strict`
var datetime = new Date().getFullYear();
console.log(datetime); // it will represent date in the console of developers tool
document.getElementById("time").textContent = datetime; //it will print on html page

  • Date.prototype.getHours(): 它将返回特定当地时区的小时数（0-23） 使用getHours()函数

    
`use strict`
var datetime = new Date().getHours()+1;
console.log(datetime); // it will represent date in the console of developers tool
document.getElementById("time").textContent = datetime; // represent on webbrowser

  • Date.prototype.getMilliseconds(): 它将根据当地时区返回指定日期中0-999之间的毫秒数 使用getMilliseconds()函数

 `use strict`
var datetime = new Date().getMilliseconds();
console.log(datetime); // it will represent date in the console of developers tool
document.getElementById("time").textContent = datetime; // represent on html page
  • Date.prototype.getMonth(): 它将根据当地的时区返回指定日期中0-11之间的月份，为了获得1-12之间的月份，你必须加上1。

使用getmonth()函数


`use strict`
var datetime = new Date().getMonth() + 1;
console.log(datetime); // it will represent date in the console of  developers tool
document.getElementById("time").textContent = datetime; // represent on html page
  • Date.prototype.toDateString(): 它将返回Date的 "日期 "部分为人类可读的字符串，如Fri Oct 01 2021

使用toDateString()

`use strict`
var datetime = new Date().toDateString();
console.log(datetime); // it will represent date in the console of developer tool
document.getElementById("time").textContent = datetime; // represent on html page
  • Date.prototype.toLocaleTimeString(): 它将返回一个字符串，根据系统设置，这个日期的时间部分具有地域敏感性，它将返回像 12:42:15 AM的字符串

 `use strict`
var datetime = new Date().toLocaleTimeString();
console.log(datetime); // it will represent date in the console of developers tool
document.getElementById("time").textContent = datetime; // represent on html page

摘要

  • 在JavaScript中创建的日期和时间是用Date对象表示的。
  • 我们不能创建 "只有日期 "或 "只有时间"。
  • 月份是从0开始计算的，所以Januaruy是0个月，要想得到准确的月份就得加1。
  • getDay()中的星期也是从零开始计算的，所以星期天是零天，要得到准确的一天，就要加一。
  • 日期可以被减去，以毫秒为单位给出它们的差异。这是因为Date在转换为数字时变成了时间戳。
  • 使用Date.now()可以快速获得当前的时间戳。

通过OpenGenus的这篇文章，你一定对在HTML页面上显示实时时间和日期有了完整的了解。

转载自:https://juejin.cn/post/7125726071898505247
评论
请登录