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

选中此link作为参考。

希望这会有所帮助：）

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

1 个答案: