Question

我有一个非常简单的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>

Answer 1

您不能（轻松/可靠）将多种格式应用于表单字段的内容；因此，我将对此进行更改，以便您正在写入或可能写入一组s（格式的每一位一个）。然后，您可以使用普通CSS设置样式

Answer 2

您可以这样做：

演示：https://codepen.io/anon/pen/EJJXRy

<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();

更改JavaScript时钟中数字的样式

2 个答案: