如何使用 HTML、CSS 和 JavaScript 显示数字时钟？

2025年3月17日 | 阅读 8 分钟

本文将介绍如何使用 HTML、CSS 和 JavaScript 创建数字时钟。数字时钟是一种以数字方式显示时间的时钟。

以下是使用 html、CSS 和 javascript 的数字时钟的示例。

示例 1

<! DOCTYPE html>
<html lang = "en">
<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
  <title> How to display a digital clock using HTML, CSS and JavaScript?
 </title>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </script>
		<script src = "https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"> </script>	
<style>
body {
text-align: center;
}
a {
	outline: none;
	color: #389dc1;
}
a:visited {
	outline: none;
	color: #389dc1;
}
a:hover {
	text-decoration: none;
}
section, footer, header, aside {
	display: block;
}
#clock {
	width: 370px;
	padding: 40px;
	margin: 100px auto 60px;
	position: relative;
}
#clock:after {
	content: ' ';
	position: absolute;
	width: 400px;
	height: 20px;
	border-radius: 100%;
	left: 50%;
	margin-left: -200px;
	bottom: 2px;
	z-index: -1;
}
#clock .display {
	text-align: center;
	padding: 40px 20px 20px;
	border-radius: 6px;
	position: relative;
	height: 54px;
}
#clock.light {
	background-color: #f3f3f3;
	color: #272e38;
}
#clock.light:after {
	box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
#clock.light .digits div span {
	background-color: #272e38;
	border-color: #272e38;	
}
#clock.light .digits div.dots:before {
	background-color: #272e38;
}
#clock.light .digits div.dots:after {
	background-color: #272e38;
}
#clock.light .alarm {
	background:url('../img/alarm_light.jpg');
}
#clock.light .display {
	background-color: #dddddd;
	box-shadow: 0 1px 1px rgba(0,0,0,0.08) inset, 0 1px 1px #fafafa;
}
#clock.dark {
	background-color: #272e38;
	color: #cacaca;
}
#clock.dark:after {
	box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
#clock.dark .digits div span {
	background-color: #cacaca;
	border-color: #cacaca;	
}
#clock.dark .alarm {
	background:url('../img/alarm_dark.jpg');
}
#clock.dark .display {
	background-color: #0f1620;
	box-shadow: 0 1px 1px rgba(0,0,0,0.08) inset, 0 1px 1px #2d3642;
}
#clock.dark .digits div.dots:before {
	background-color: #cacaca;
}
#clock.dark .digits div.dots:after {
	background-color: #cacaca;
}
#clock .digits div {
	text-align: left;
	position: relative;
	width: 28px;
	height: 50px;
	display: inline-block;
	margin: 0 4px;
}
#clock .digits div span {
	opacity: 0;
	position: absolute;
	-webkit-transition: 0.25s;
	-moz-transition: 0.25s;
	transition: 0.25s;
}
#clock .digits div span:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	border: 5px solid transparent;
}
#clock .digits div span:after {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	border: 5px solid transparent;
}

#clock .digits .d1 {			
height: 5px;
width: 16px;
top: 0;
left: 6px; }
#clock .digits .d1:before {	
border-width: 0 5px 5px 0;
border-right-color: inherit;
left: -5px; }
#clock .digits .d1:after {	
border-width: 0 0 5px 5px;
border-left-color: inherit; right: -5px;
}
#clock .digits .d2 {			
height: 5px;
width: 16px;
top: 24px;
left: 6px; }
#clock .digits .d2:before {	
border-width: 3px 4px 2px;
border-right-color: inherit;
left: -8px; }
#clock .digits .d2:after {	
border-width: 3px 4px 2px;
border-left-color: inherit;
right: -8px; }
#clock .digits .d3 {			
height: 5px;
width: 16px;
top: 48px; 
left: 6px; }
#clock .digits .d3:before {	
border-width: 5px 5px 0 0;
border-right-color: inherit;
left: -5px; }
#clock .digits .d3:after {	
border-width: 5px 0 0 5px;
border-left-color: inherit; right: -5px; }

#clock .digits .d4 {			
width: 5px;
height: 14px; 
top: 7px; left: 0; 
}
#clock .digits .d4:before {	
border-width: 0 5px 5px 0;
border-bottom-color: inherit;
top: -5px; }
#clock .digits .d4:after { 
border-width: 0 0 5px 5px;
border-left-color: inherit;
bottom: -5px; }
#clock .digits .d5 {			
width: 5px;
height: 14px; 
top: 7px; 
right: 0; }
#clock .digits .d5:before {	
border-width: 0 0 5px 5px;
border-bottom-color: inherit; 
top: -5px; }
#clock .digits .d5:after {	
border-width: 5px 0 0 5px; 
border-top-color: inherit;
bottom: -5px; }
#clock .digits .d6 {			
width: 5px;
height: 14px;
top: 32px; 
left: 0; }
#clock .digits .d6:before {	
border-width: 0 5px 5px 0;
border-bottom-color: inherit;
top: -5px; }
#clock .digits .d6:after {	
border-width: 0 0 5px 5px;
border-left-color: inherit;
bottom: -5px; }
#clock .digits .d7 {			
width: 5px;
height: 14px; 
top: 32px;
right: 0; }
#clock .digits .d7:before {	
border-width: 0 0 5px 5px;
border-bottom-color: inherit; 
top: -5px; }
#clock .digits .d7:after {	
border-width: 5px 0 0 5px;
border-top-color: inherit;
bottom: -5px; }
#clock .digits div.one .d5 {
	opacity: 1;
}
#clock .digits div.one .d7 {
	opacity: 1;
}
#clock .digits div.two .d1 {
	opacity: 1;
}
#clock .digits div.two .d5 {
	opacity: 1;
}
#clock .digits div.two .d2 {
	opacity: 1;
}
#clock .digits div.two .d6 {
	opacity: 1;
}
#clock .digits div.two .d3 {
	opacity: 1;
}
#clock .digits div.three .d1,
#clock .digits div.three .d5,
#clock .digits div.three .d2,
#clock .digits div.three .d7,
#clock .digits div.three .d3 {
	opacity: 1;
}
#clock .digits div.four .d5,
#clock .digits div.four .d2,
#clock .digits div.four .d4,
#clock .digits div.four .d7 {
	opacity: 1;
}
#clock .digits div.five .d1,
#clock .digits div.five .d2,
#clock .digits div.five .d4,
#clock .digits div.five .d3,
#clock .digits div.five .d7 {
	opacity: 1;
}
#clock .digits div.six .d1,
#clock .digits div.six .d2,
#clock .digits div.six .d4,
#clock .digits div.six .d3,
#clock .digits div.six .d6,
#clock .digits div.six .d7 {
	opacity: 1;
}



#clock .digits div.seven .d1,
#clock .digits div.seven .d5,
#clock .digits div.seven .d7 {
	opacity: 1;
}
#clock .digits div.eight .d1,
#clock .digits div.eight .d2,
#clock .digits div.eight .d3,
#clock .digits div.eight .d4,
#clock .digits div.eight .d5,
#clock .digits div.eight .d6,
#clock .digits div.eight .d7 {
	opacity: 1;
}
#clock .digits div.nine .d1,
#clock .digits div.nine .d2,
#clock .digits div.nine .d3,
#clock .digits div.nine .d4,
#clock .digits div.nine .d5,
#clock .digits div.nine .d7 {
	opacity: 1;
}
#clock .digits div.zero .d1,
#clock .digits div.zero .d3 {
	opacity: 1;
}
#clock .digits div.zero .d4 {
	opacity: 1;
}
#clock .digits div.zero .d5 {
	opacity: 1;
}
#clock .digits div.zero .d6 {
	opacity: 1;
}
#clock .digits div.zero .d7 {
	opacity: 1;
}
#clock .digits div.dots {
	width: 5px;
}
#clock .digits div.dots:before {
	width: 5px;
	height: 5px;
	content: ' ';
	position: absolute;
	left: 0;
	top: 14px;
}
#clock .digits div.dots:after {
	width: 5px;
	height: 5px;
	content: ' ';
	position: absolute;
	left: 0;
	top: 14px;
}
#clock .digits div.dots:after {
	top: 34px;
}
#clock .alarm {
	width: 16px;
	height: 16px;
	bottom: 20px;
	background: url('../img/alarm_light.jpg');
	position: absolute;
	opacity: 0.2;
}
#clock .alarm.active {
	opacity: 1;
}
#clock .weekdays {
	font-size: 12px;
	position: absolute;
	width: 100%;
	top: 10px;
	left: 0;
	text-align: center;
}
#clock .weekdays span {
	opacity: 0.2;
	padding: 0 10px;
}
#clock .weekdays span.active {
	opacity: 1;
}
#clock .ampm {
	position: absolute;
	bottom: 20px;
	right: 20px;
	font-size: 12px;
}
.button-holder {
	text-align: center;
	padding-bottom: 100px;
}
a.button {
	background-color: #f6a7b3;
	background-image: -webkit-linear-gradient(top, #f6a7b3, #f0a3af);
	background-image: -moz-linear-gradient(top, #f6a7b3, #f0a3af);
	background-image: linear-gradient(top, #f6a7b3, #f0a3af);
	border: 1px solid #eb9ba7;
	border-radius: 2px;
	box-shadow: 0 2px 2px #ccc;
	color: #fff;
	text-decoration: none !important;
	padding: 15px 20px;
	display: inline-block;
	cursor: pointer;
}
a.button:hover {
	opacity: 0.9;
}
footer {
	width: 770px;
	font: normal 16px Arial, Helvetica, sans-serif;
	padding: 15px 35px;
	position: fixed;
	bottom: 0;
	left: 50%;
	margin-left: -420px;
	background-color:#1f1f1f;
	background-image: -webkit-linear-gradient(top, #1f1f1f, #101010);
	background-image: -moz-linear-gradient(top, #1f1f1f, #101010);
	background-image: linear-gradient(top, #1f1f1f, #101010);
	border-radius: 2px 2px 0 0;
	box-shadow: 0 -1px 4px rgba(0,0,0,0.4);
	z-index:1;
}
footer a.tz {
	font-weight: normal;
	font-size: 16px !important;
	text-decoration: none !important;
	display: block;
	margin-right: 300px;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #bfbfbf !important;
	z-index: 1;
}
footer a.tz:before {
	content: ' ';
	background: url('http://cdn.tutorialzine.com/misc/enhance/v2_footer_bg.png') no-repeat 0 -53px;
	width: 138px;
	height: 20px;
	display: inline-block;
	position: relative;
	bottom: -3px;
}
footer .close {
	position: absolute;
	cursor: pointer;
	width: 8px;
	height: 8px;
	background: url('http://cdn.tutorialzine.com/misc/enhance/v2_footer_bg.png') no-repeat 0 0px;
	top: 10px;
	right: 10px;
	z-index: 3;
}
footer #tzine-actions {
	position: absolute;
	top: 8px;
	width: 500px;
	right: 50%;
	margin-right: -650px;
	text-align: right;
	z-index: 2;
}
h1  {
  line-height: 2em; 
  padding-bottom: 5px;
  text-transform: none;
  font-size: 1.7em;
 font-weight: bold;
  font-style: italic;
 font-family: "Lucida Console", "Courier New", monospace;
  color: #999; 
  letter-spacing: -0.005em;
  word-spacing: 1px;
  letter-spacing: none;
}
h2  {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
  font-family: "Lucida Console", "Courier New", monospace;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
}
footer #tzine-actions iframe {
	display: inline-block;
	height: 21px;
	width: 95px;
	position: relative;
	float: left;
	margin-top: 11px;
}
</style>
<body>
<h1> Example </h1>
<h2> How to display a digital clock using HTML, CSS and JavaScript? </h2>
<div id = "clock" class = "light">
			<div class = "display">
				<div class = "weekdays"> </div>
				<div class = "ampm"> </div>
				<div class = "alarm"> </div>
				<div class = "digits"> </div>
			</div>
		</div>
		<div class = "button-holder">
			<a class = "button"> Switch Theme </a>
		</div>
<script>
$(function() {
    var clock = $('#clock'),
        alarm = clock.find('.alarm'),
        ampm = clock.find('.ampm');
        var digit_to_name = 'zero one two three four five six seven eight nine'.split(' ');
    var digits = {};
    var positions = [
        'h1', 'h2', ':', 'm1', 'm2', ':', 's1', 's2'
    ];
    var digit_holder = clock.find('.digits');
    $.each(positions, function(){
        if(this == ':') {
            digit_holder.append('<div class="dots">');
        }
        else {
            var pos = $('<div>');
            for(var i=1; i<8; i++) {
                pos.append('<span class="d' + i + '">');
            }
            digits[this] = pos;
            digit_holder.append(pos);
        }
    });
    var weekday_names = 'MON TUE WED THU FRI SAT SUN'.split(' '),
        weekday_holder = clock.find('.weekdays');
    $.each(weekday_names, function() {
        weekday_holder.append('<span>' + this + '</span>');
    });
    var weekdays = clock.find('.weekdays span');
    (function update_time() {
        var now = moment().format("hhmmssdA");
        digits.h1.attr('class', digit_to_name[now[0]]);
        digits.h2.attr('class', digit_to_name[now[1]]);
        digits.m1.attr('class', digit_to_name[now[2]]);
        digits.m2.attr('class', digit_to_name[now[3]]);
        digits.s1.attr('class', digit_to_name[now[4]]);
        digits.s2.attr('class', digit_to_name[now[5]]);
         var dow = now[6];
        dow--;
        if(dow < 0) {
            dow = 6;
        }    weekdays.removeClass('active').eq(dow).addClass('active');
        ampm.text(now[7]+now[8]);
        setTimeout(update_time, 1000);
    })();
    $('a.button').click(function() {
        clock.toggleClass('light dark');
    });
});
</script>
</body>
</html>

说明

在上面的示例中，我们使用 html、CSS 和 javascript 创建了一个数字时钟的示例。我们还可以根据您的选择更改主题，例如浅色或深色。

输出

以下是这个例子的输出。

How to display a digital clock using HTML, CSS, and JavaScript?

示例 2

<! DOCTYPE html>
<html lang = "en">
<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
  <title> How to display a digital clock using HTML, CSS and JavaScript?
 </title>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </script>
		<script src = "https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"> </script>	
<style>
body { 
  text-align: center;
  padding: 20px;
background-color: #F8F9FA;
background-size: 1800% 1800%;
font-family: "Lucida Console", "Courier New", monospace;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 18s ease infinite;
-o-animation: rainbow 18s ease infinite;
  animation: rainbow 18s ease infinite; }
h1  {
  line-height: 2em; 
  padding-bottom: 5px;
  text-transform: none;
  font-size: 1.7em;
 font-weight: bold;
  font-style: italic;
 font-family: "Lucida Console", "Courier New", monospace;
  color: #999; 
  letter-spacing: -0.005em;
  word-spacing: 1px;
  letter-spacing: none;
}
h2  {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
  font-family: "Lucida Console", "Courier New", monospace;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
}
.clock {
    position: absolute;
    top: 50%;
    left: 50%;
	 padding-top: 15px;
    transform: translateX(-50%) translateY(-50%);
    color: #17D4FE;
    font-size: 60px;
    font-family: Orbitron;
    letter-spacing: 7px;
}
</style>
<body>
<h1> Example </h1>
<h2> How to display a digital clock using HTML, CSS and JavaScript? </h2>
<div id = "MyClockDisplay" class = "clock" onload = "showTime()"> </div>
<script>
function showTime(){
    var date = new Date();
    var h = date.getHours();
    var m = date.getMinutes();
    var s = date.getSeconds();
    var session = "AM";
    if(h == 0) {
        h = 12;
    }
    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;
    document.getElementById("MyClockDisplay").innerText = time;
    document.getElementById("MyClockDisplay").textContent = time;
    setTimeout(showTime, 1000);
}
showTime();
</script>
</body>
</html>

说明

在上面的示例中，我们使用 html、CSS 和 javascript 创建了一个数字时钟的示例。

输出

以下是这个例子的输出。

下一主题JQuery Multiscroll.js

如何使用 HTML、CSS 和 JavaScript 显示数字时钟？

示例 1

示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

如何使用 HTML、CSS 和 JavaScript 显示数字时钟？

示例 1

示例 2

相关帖子

jQuery jTippy 工具提示插件

使用 JQuery Ajax 的动态拖放表行

JQuery 日历

仅允许在文本框中使用 10 个数字，使用 Jquery

使用 jQuery 自动刷新或重新加载页面

Web 的 jQuery 文件管理器

jQuery Excel 导出插件库

jQuery 在 5 秒后重定向到另一个页面

带有缩略图的 JQuery 照片库

Pietimer jQuery 插件

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器