Question

如何使小时（h）和秒（s）的字体大小变小，如40px，而分钟（m）的字体更大，如68px？这不起作用。

<script>
function startTime() {
    var today = new Date();
    var h = today.getUTCHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    m = checkTime(m);
    s = checkTime(s);


    var hh = h.fontsize("40px");
    var mm = m.fontsize("68px");
    var ss = s.fontsize("40px");
    document.getElementById('ora').innerHTML =
    hh + ":" + mm + ":" + ss;
    var t = setTimeout(startTime, 500);
}
function checkTime(i) {
    if (i < 10) {i = "0" + i};
    return i;
}
</script>

Answer 1

HTML：

<div id="hours">

</div>
<div id="minutes">

</div>
<div id="seconds">

</div>

CSS：

#hours, #seconds{
  font-size: 40px;
}

#minutes{
  font-size: 68px;
  margin: 0 20px 0 20px;
}

div{
  display: inline-block;
}

JavaScript：

   function startTime() {
        var today = new Date();
        var h = today.getUTCHours();
        var m = today.getMinutes();
        var s = today.getSeconds();
        m = checkTime(m);
        s = checkTime(s);

        document.getElementById('hours').innerHTML = h; 
        document.getElementById('minutes').innerHTML = m;
        document.getElementById('seconds').innerHTML = s;
        var t = setTimeout(startTime, 500);
    }

    function checkTime(i) {
        if (i < 10) {i = "0" + i};
        return i;
    }

JSFiddle Demo

Answer 2

要添加样式，您必须将其作为HTML元素：您可以尝试以下方式：

function startTime() {
    var today = new Date();
    var h = today.getUTCHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    m = checkTime(m);
    s = checkTime(s);


    var hh = ('<text class="hour">' + h + '</text>');
    var mm = ('<text class="minute">' + m + '</text>');
    var ss = ('<text class="second">' + s + '</text>');
    document.getElementById('ora').innerHTML =
    hh + ":" + mm + ":" + ss;
    var t = setTimeout(startTime, 500);
}
function checkTime(i) {
    if (i < 10) {i = "0" + i};
    return i;
}

startTime()

.hour{
  font-size:60px;
}
.minute{
  font-size:40px;
}
.second{
  font-size:20px;
}

<div id="ora"></div>

Answer 3

您将使用HTML和CSS。

function startTime() {
    var today = new Date();
    var h = today.getUTCHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    m = checkTime(m);
    s = checkTime(s);

    document.getElementById('ora').innerHTML =
    '<div class="hours">' + h + '</div>' + ":" + '<div class="minutes">' + m + '</div>' + ":" + '<div class="seconds">' + s + '</div>';
    var t = setTimeout(startTime, 500);
}
function checkTime(i) {
    if (i < 10) {i = "0" + i};
    return i;
}

startTime();

div {display: inline-block;}
.hours {
  font-size: 80px;
  color: #999;
}
.minutes {
  font-size: 60px;
  color: #555;
}

.seconds {
  font-size: 40px;
  color: #333;
}

<div id='ora'></div>

Answer 4

<div id="ora">
</div>

<script>
function startTime() {
    var today = new Date();
    var h = today.getUTCHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    m = checkTime(m);
    s = checkTime(s);

    hh = document.createElement("span");
    hh.textContent = h + ":";
    hh.style.fontSize = "68px";

    mm = document.createElement("span");
    mm.textContent = m + ":";
    mm.style.fontSize = "58px";

    ss = document.createElement("span");
    ss.textContent = s;
    ss.style.fontSize = "48px";

    div = document.getElementById('ora');
    div.innerHTML= "";

    div.appendChild(hh);
    div.appendChild(mm);
    div.appendChild(ss);

    var t = setTimeout(startTime, 500);
}
function checkTime(i) {
    if (i < 10) 
    {
        i = "0" + i;
    }
    return i;
}
startTime();
</script>

JavaScript时钟字体大小

4 个答案: