时钟是一种用来测量时间的装置。如果使用得当，时钟对于任何 UI 都是有用的元素。时钟可用于以时间为主要关注点的网站，例如一些预订网站或一些显示火车、公共汽车、航班等到达时间的应用程序。时钟基本上有两种类型，模拟和数字。在这里，我们将设计数字时钟并添加一些样式以使其更具吸引力。
方法：方法是使用日期对象获取每秒的时间，然后使用我们通过每秒调用相同函数获得的新时间在浏览器上重新渲染时间，并使时钟看起来更有吸引力。
HTML 和 CSS 代码：在本节中，我们将“HH:MM:SS”格式的虚拟时间包裹在“div”标签中，并且我们在外部包含了 CSS 和 JavaScript 文件。
HTML
Digital clock
Javascript
// Function to display the time
function showTime() {
// Using Date object to get
// today's date and time
var date = new Date();
// getHOurs() function is used
// to get hours ones
var h = date.getHours(); // 0 - 23
// getMinutes() function is
// used to get minutes ones
var m = date.getMinutes(); // 0 - 59
// getSecond() function is
// used to get seconds ones
var s = date.getSeconds(); // 0 - 59
// To show am or pm
var session = "AM";
// Condition to check that if hours
// reaches to 12 then it again start
// with 12
if (h == 0) {
h = 12;
}
// If hour exceeds 12 than it will
// be subtract from 12 and make
// session as pm
if (h > 12) {
h = h - 12;
session = "PM";
}
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;
var time = h + ":" + m + ":"
+ s + " " + session;
// Using DOM element to display
// elements on screen
document.getElementById("MyClockDisplay")
.innerText = time;
document.getElementById("MyClockDisplay")
.textContent = time;
// Call the function every second use
// setInterval() method and set time-interval
// as 1000ms which is equal to 1s
setTimeout(showTime, 1000);
}
showTime();JavaScript 代码：
- 第 1 步：创建一个函数“showTime”。
- 第 2 步：创建 Date 对象的实例。
- 第三步：使用Date对象的方法获取“时”、“分”、“秒”。
- 第 4 步：根据小时值设置 AM/PM。 Date 对象以 24 小时格式工作，因此当它大于 12 时，我们将小时更改回 1。AM/PM 也会相应更改。
- 第 5 步：现在使用相同的 HH:MM:SS 格式创建一个字符串，使用我们从 Date 对象方法获取的值更改小时、分钟和秒值。
- 第 6 步：现在使用 innerHTML 属性替换“div”中的字符串变量。
- 第 7 步：要每秒调用一次该函数使用 setInterval() 方法并将时间间隔设置为 1000 毫秒，即等于 1 秒。
- 步骤8：现在调用函数结束时在精确重装启动函数/渲染时间的setInterval（）将渲染1S后第一个呼叫。
Javascript
// Function to display the time
function showTime() {
// Using Date object to get
// today's date and time
var date = new Date();
// getHOurs() function is used
// to get hours ones
var h = date.getHours(); // 0 - 23
// getMinutes() function is
// used to get minutes ones
var m = date.getMinutes(); // 0 - 59
// getSecond() function is
// used to get seconds ones
var s = date.getSeconds(); // 0 - 59
// To show am or pm
var session = "AM";
// Condition to check that if hours
// reaches to 12 then it again start
// with 12
if (h == 0) {
h = 12;
}
// If hour exceeds 12 than it will
// be subtract from 12 and make
// session as pm
if (h > 12) {
h = h - 12;
session = "PM";
}
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;
var time = h + ":" + m + ":"
+ s + " " + session;
// Using DOM element to display
// elements on screen
document.getElementById("MyClockDisplay")
.innerText = time;
document.getElementById("MyClockDisplay")
.textContent = time;
// Call the function every second use
// setInterval() method and set time-interval
// as 1000ms which is equal to 1s
setTimeout(showTime, 1000);
}
showTime();
输出：
