代码之家 › 专栏 › 技术社区 › Bence

javascript时钟字体大小

javascript

Bence · 技术社区 · 6 年前

我怎么能把小时(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>

4 回复 | 直到 6 年前

Stefan Rein 6 年前

你可以使用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>

alexP 6 年前

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

Mamun 6 年前

要添加样式,必须将其作为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>

Anshuman Sharma 6 年前

<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>