更改javascript时钟中的数字样式

我有一个非常简单的javascript时钟，我正在尝试更改数字的颜色和字体，不同的颜色持续数小时、数分钟、数秒。我该怎么做？这里没有css

<form action="" name="forme">
    <input type="text" name="clock">
</form>
<script>
    function runTime() {
        var theTime = new Date();
        var hr = theTime.getHours();
        var mn = theTime.getMinutes();
        var sc = theTime.getSeconds();
        var watch = hr + ":" + mn + ":" + sc;
        document.forme.clock.value = watch;
        setTimeout("runTime()", 1000);

    }
</script>

函数运行时（）{
var theTime=新日期（）；
var hr=time.getHours（）；
var mn=time.getMinutes（）；
var sc=time.getSeconds（）；
var watch=hr+“：”+mn+“：”+sc；
document.forme.clock.value=手表；
setTimeout（“runTime（）”，1000）；
}

您不能（轻松/可靠地）将多种格式应用于表单字段的内容；所以我会修改它，这样您就可以向一个或可能向一组s（格式的每一位对应一个）写入数据。

---

然后，您可以使用普通CSS设置样式，您可以这样做：

演示：

---

---

---

同时显示您的

CSS

和

HTML

<form action="" name="forme">
  <p>
  <span id="hour"></span>:
  <span id="min"></span>:
  <span id="sec"></span>
  </p>
    <input type="hidden" name="clock">
</form>

span#hour{
  color:red;
}
span#min{
  color:blue;
}
span#sec{
  color:black;
}

    function runTime() {
        var theTime = new Date();
        var hr = theTime.getHours();
        var mn = theTime.getMinutes();
        var sc = theTime.getSeconds();

      document.getElementById('hour').innerHTML = hr;
      document.getElementById('min').innerHTML = mn;
      document.getElementById('sec').innerHTML = sc;

      var watch = hr + ":" + mn + ":" + sc;
        document.forme.clock.value = watch;
        setTimeout("runTime()", 1000);

    }
runTime();