用Javascript显示一个电子时钟

最新推荐文章于 2023-11-16 10:35:40 发布

CodingIsFun

最新推荐文章于 2023-11-16 10:35:40 发布

阅读量2.1k

点赞数 1

分类专栏： Javascript CSS HTML

本文链接：https://blog.csdn.net/CodingIsFun/article/details/86575054

版权

CSS 同时被 3 个专栏收录

25 篇文章 0 订阅

订阅专栏

Javascript

20 篇文章 0 订阅

订阅专栏

HTML

10 篇文章 0 订阅

订阅专栏

<!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>