如何减小HTML日期显示组件中时分秒的字体大小，保留年月日字号

解决方法 #

你不需要拆分到两个独立ID的元素里，只需要在输出时分秒的部分嵌套一个带自定义类的行内标签，单独控制它的字号即可，修改后的完整代码如下：

<html>
<head><title>My website</title>
<style type=text/css>
.clock {background-color: #000000; text-align: center; margin: 2px 0px 0px 1190px; font-size: 30px; position: fixed; border-radius: 10px;   color: #fff; text-shadow: 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff; border: 5px solid white;}
/* 新增时分秒部分的样式，字号可自定义调整 */
.time-part {
  font-size: 20px;
}
div {margin: 2px;}
body {background-color: #0d0d0d; font-family: "Vibur", sans-serif;}
</style>
</head>
<body>
  <p id="date" class="clock"></p>
  <script>
  setInterval(function(){
  date = new Date();
  sekundy = date.getSeconds();
  if (sekundy<10) sekundy = "0"+sekundy;
   minuty = date.getMinutes();
  if (minuty<10) minuty = "0"+minuty;
   godziny = date.getHours()
  if (godziny<10) godziny = "0"+godziny;
   dzien = date.getDay();
   data = date.getDate();
   miesiac = date.getMonth();
   rok = date.getFullYear();
  // 时分秒部分套上带类的span标签
  document.getElementById('date').innerHTML = data+"."+((miesiac+1)%12)+"."+rok+"<br><span class='time-part'>"+godziny+" : "+minuty+" : "+sekundy+"</span>";
  },1000);
  </script>
</body>
</html>

补充说明 #

• 你之前拆分两个ID元素只显示年月日，大概率是因为你只给年月日对应的元素赋值，忘记了给时分秒的元素更新内容
• 原代码里的背景色值少了#前缀，上面的代码里已经帮你补全，否则部分浏览器会识别异常无法显示正确的背景色
• 你可以自行调整.time-part里的font-size数值，达到你想要的时分秒字号效果

内容的提问来源于stack exchange，提问作者CoolBoiBS