如何更改 javascript 计算的字体、颜色、大小等？答案

【问题标题】：How can I change the font, colour, size etc. of a javascript calculation?如何更改 javascript 计算的字体、颜色、大小等？
【发布时间】：2017-04-03 00:41:18
【问题描述】：

我在网站上查看了很多问题，但它们似乎与我的问题不相似。

我有一个用 Javascript 编写的倒数计时器，它产生一系列周、天、小时等，并每秒计算一次。我在 Countdown.js 中的代码是：

var countdown = function(end, elements) {
var _second = 1000, 
    _minute = _second * 60,
    _hour = _minute * 60,
    _day = _hour * 24,
    _week = _day * 7,

    end = new Date(end),
    timer,

    calculate = function() {

        var now = new Date(),
            remaining = end.getTime() - now.getTime(),
            data;

        if(remaining <= 0) {
            clearInterval(timer);

            if(typeof callback === 'function') {
                callback();
            }
        } else {
            if(!timer) {
                timer = setInterval(calculate, _second);
            }

            data = {
            'weeks' : Math.floor(remaining / _week),
            'days' : Math.floor((remaining % _week) / _day),
            'hours' : Math.floor((remaining % _day) / _hour),
            'minutes' : Math.floor((remaining % _hour) / _minute),
            'seconds' : Math.floor((remaining % _minute) / _second)
        }

        if(elements.length) {
            for(x in elements) {
                var x = elements[x];
                document.getElementById(x).innerHTML = data[x];
        }
        }

        }


    };

calculate();
}

我认为我必须对

进行一些更改

if(elements.length) {
            for(x in elements) {
                var x = elements[x];
                document.getElementById(x).innerHTML = data[x];

但不确定如何作为数据[x]；碍事。

我在 index.html 中与此相关的 HTML 是：

<script src="Countdown.js"></script>
<script>
countdown('06/03/2017 03:00:00 PM', ['weeks', 'days', 'hours', 'minutes', 'seconds'] , function() {
console.log('finished!')    
});
</script>

周、天等都在各自的 DIVS 中，如下所示：

<div style="width: 14%; padding-bottom: 14%; background-color: rgba(141,155,112,0.5); float: left;"><span id="weeks">00</span></div>

当 Javascript 接管并且字体恢复正常时，我对 HTML 所做的任何更改都不会保留。另外，我想使用非标准字体，那么有没有办法在 Javascript 中使用@font-face？

【问题讨论】：

您在问题中包含的 JavaScript 绝对不会更改计时器的字体、颜色、大小、字体或任何其他视觉方面。看起来这些东西是由 div 的样式控制的。
感谢@Tibrogargan，JS 只是我展示我所拥有的整个文件。我没有添加任何更改样式的尝试。
你不懂。您发布的内容与您所说的要尝试做的事情无关。此代码不会“接管”任何内容。
@Tibrogargan 您如何建议我向 HTML 添加样式；你能举个例子吗？当我尝试时，样式会在显示为“00”时显示一秒钟，但是当 JS 在一秒钟后运行并显示剩余的周数时，它会恢复为默认大小的 Times New Roman。
您应该发布设置样式的尝试，而不是您的问题。

标签： javascript fonts colors

【解决方案1】：

我不知道您的 javascript 代码如何改变您的样式。但您可以通过 javascript 添加font-face。

创建 FontFace 对象

var f = new FontFace("fingerpaint", "url(fingerpaint-regular-webfont.ttf)", {});

将字体添加到页面

在我们可以将字体添加到文档之前，我们必须明确地强制使用 load() 方法（还有什么？）加载它。

f.load().then(function (loadedFace) {
    document.fonts.add(loadedFace);
});

使用字体

document.body.style.fontFamily = "fingerpaint";

查看此link 以供参考。

希望这会有所帮助:)

【讨论】：

谢谢@mr.7 - 如果我想要这个字体只是为了倒计时，我应该把它放在我上面的JS哪里？