时间戳

首页 > 解决方案 > 更改 javascript 时钟中数字的样式

javascript - 更改 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>

标签： javascripthtmlcss

解决方案

你可以这样做：

演示：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();

推荐阅读