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

Question

我在网站上查看了很多问题，但它们似乎都不是针对与我的类似问题的。

我有一个用 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 ？

Answer 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);
});

使用 FontFace

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

检查这个link供引用。

希望这有帮助:)