用Javascript显示一个电子时钟

关注

原创最新推荐文章于 2026-04-19 09:54:35 发布 2.2k 阅读 AI 写同款· GEO 优化 ›

编写JavaScript实现数字时钟，通过按钮实现暂停和开始至此，我们已经完成了JavaScript实现数字时钟并通过按钮实现暂停和开始的功能。点击"暂停"按钮时，数字时钟将停止更新。首先，我们需要创建一个基本的HTML结构，用于容纳时钟和按钮。还有两个按钮，分别具有id为"start"和"pause"，用于开始和暂停时钟。在函数内部，我们获取当前的小时、分钟和秒数，并将它们格式化为两位数的字符串。在CSS样式表中，我们设置了时钟的字体大小、对齐方式和边距，以及按钮的字体大小、内边距和边距。函数来每秒更新时钟的时间，并通过按钮的点击事件来控制时钟的暂停和开始。阅读详情

<!DOCTYPE html>
<html>
<head>
	
<style type="text/css" media="screen">

body {
    background: black;
}

#txt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);/*使时钟居中显示*/
    color: greenyellow;
    font-size: 60px;
    font-family: sans-serif;
    letter-spacing: 7px;
	/*creating a gradient to be used as background, and then clipping mask with text 
	that shows background only where text is present.*/
    background-image: linear-gradient(to bottom right, red, yellow, green);
	color:transparent;
	-webkit-background-clip: text;
    border: 5px solid silver;
}

</style>

<script>
function startTime() {
  var today = new Date();
  var h = today.getHours();
  var m = today.getMinutes();
  var s = today.getSeconds();
  m = showInTwoDigits(m);
  s = showInTwoDigits(s);
  document.getElementById('txt').innerHTML =
  h + ":" + m + ":" + s;
  setTimeout(startTime, 1000);//设定刷新频率为1000毫秒
}
function showInTwoDigits(i) {
  if (i < 10) {i = "0" + i};  // 10以下的数字前加0
  return i;
}
</script>
	
</head>

<body onload="startTime()">

<div id="txt"></div>

</body>
</html>

收录于