带进度条的倒数计时器

Question

这是我目前所拥有的：http://jsfiddle.net/BgEtE/

我想得到这样的东西：http://fusionmedia.dk/construction/

我需要这样的进度条，并且我需要像他们拥有的那样显示日期。另外，我需要为计时器使用一种名为“Russel square”的字体。我已经看遍了，但遇到了麻烦。

Answer 1

对于计时器，您可以使用this one 并且可以集成进度条，但我不太确定。

这是another great tutorial，您可以轻松适应以获得您想要的东西。

好吧，我不是专家，但这并不难，看看这个updated demo。注意默认变量// def values

   var iCms = 1000;
    var iMms = 60 * iCms;
    var iHms = 3600 * iCms;
    var iDms = 24 * 3600 * iCms;  

这是您在本节中“安排”进度条所需要使用的：

// def options
        var aDefOpts = {
            start: new Date(), // now
            finish: new Date().setTime(new Date().getTime() + 5 * iMms), // now + 5 days

例如，如果你写 ...+5 * iMms 它将是五分钟后。 iDms => Days / iHms=> hours / iCms=> seconds.

另外看看我在演示中添加的 css，我认为要使用自定义字体，您首先必须将字体上传到您的服务器，然后使用类似这样的东西在样式表中添加字体：

@font-face{
font-family: myFont;
src: url('myFont.ttf');
}

@font-face{
font-family: myFontEI;
src: url('myFont.eot');
}

Then Attach it as a font family like so...

font-family: myFont, myFontEI;