如何在无CSS的JavaScript时钟中为时分秒设置不同字体与颜色

嘿，问题出在你用的是<input>元素——它的value是纯文本，没法给其中的小时、分钟、秒分别设置样式。要实现你的需求，咱们得把输入框换成可以单独设置样式的HTML元素（比如<span>），然后分别控制每个时间部分的样式和内容。下面是修改后的完整方案：

修改后的代码 #

<form action="" name="forme">
  <!-- 每个时间部分用单独的span，直接加内联样式（无外部CSS） -->
  <span id="hours" style="font-family: 'Arial', sans-serif; color: #ff0000; font-size: 24px;"></span>:
  <span id="minutes" style="font-family: 'Courier New', monospace; color: #0000ff; font-size: 20px;"></span>:
  <span id="seconds" style="font-family: 'Georgia', serif; color: #008000; font-size: 16px;"></span>
</form>

<script>
function runTime() {
  var theTime = new Date();
  // 给个位数补零，让时间格式更规范（比如1:2:3变成01:02:03）
  var hr = theTime.getHours().toString().padStart(2, '0');
  var mn = theTime.getMinutes().toString().padStart(2, '0');
  var sc = theTime.getSeconds().toString().padStart(2, '0');
  
  // 分别更新每个span的内容
  document.getElementById('hours').innerText = hr;
  document.getElementById('minutes').innerText = mn;
  document.getElementById('seconds').innerText = sc;
  
  // 推荐用函数引用的方式调用setTimeout，比字符串更安全规范
  setTimeout(runTime, 1000);
}

// 页面加载完成后启动时钟
window.addEventListener('load', runTime);
</script>

关键说明 #

• 替换<input>为<span>：<span>是行内元素，允许我们给每个时间部分单独设置内联样式（style属性），完全不需要外部CSS文件。
• 内联样式设置：你可以随意修改每个span的font-family（字体）、color（颜色）、font-size（字号）等样式属性，满足你的个性化需求。
• 补零处理：用padStart(2, '0')给个位数的时间补零，让显示更美观专业。
• 优化setTimeout：把原来的字符串"runTime()"换成函数引用runTime，这是更标准的写法，避免潜在的安全问题和性能损耗。

如果需要动态修改样式（比如根据时间变化切换颜色），也可以在JS里直接操作元素的style属性，例如：

// 动态修改小时的样式
document.getElementById('hours').style.fontFamily = 'Verdana';
document.getElementById('hours').style.color = '#ff6600';

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