如何更改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>

我對HTML所做的任何更改都不會保留，因為Javascript接管並且字體恢復正常。 另外，我想使用非標准字體，所以有沒有辦法使用@ font-face與Javascript？

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

請查看此鏈接以供參考。

希望這可以幫助 ：）