javascript 一个 CSS 样式的倒数计时器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8386276/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
A CSS-styleable countdown timer?
提问by minimal_
I imagined this would be super-simple, but it is eluding me so far. I would like to know how I can implement a timer that counts down to a specific date and can be styled with CSS.
我原以为这会非常简单，但到目前为止我还没有做到。我想知道如何实现一个计时器，该计时器可以倒计时到特定日期并且可以使用 CSS 进行样式设置。
Specifically, I have designed a background image/container and want to style the numbers so they are correctly positioned, sized, coloured and in the correct font.
具体来说，我设计了一个背景图像/容器，并希望对数字进行样式设置，以便它们的位置、大小、颜色和字体正确。
There are a raft of JS and jQuery countdown timers, but none I have found output in a manner which is easy to target with CSS. Modifying the output strings (i.e. including div tags) only seems to break them, although my JS knowledge is not great enough to understand why (a guess, is that the scripts seem to target a certain div class and 'inject' the appropriate code. Perhaps introducing new divs screws this up?)
有大量的 JS 和 jQuery 倒数计时器，但我没有发现以易于使用 CSS 定位的方式输出。修改输出字符串（即包括 div 标签）似乎只会破坏它们，尽管我的 JS 知识还不足以理解为什么（猜测是脚本似乎针对某个 div 类并“注入”了适当的代码。也许引入新的 div 搞砸了？）
I guess my question would have to be... 'what is the easiest way to implement a countdown to a specific date, which can be styled with CSS?', although if you know of an existing plug in that does this, I will love you forever!
我想我的问题必须是......“实现特定日期倒计时的最简单方法是什么，可以使用 CSS 设置样式？”，尽管如果您知道现有的插件可以做到这一点，我会永远爱你！
回答by Manse
This is a very useful plugin for countdowns ... everything is written within a divand span's so you can easily style it with CSS - you could use images if you reallu needed to
这是一个非常有用的倒计时插件......所有内容都写在divand 中span，因此您可以使用 CSS 轻松设置样式 - 如果您确实需要，可以使用图像
回答by Simone
I've used this: http://www.littlewebthings.com/projects/countdown/example/
我用过这个：http: //www.littlewebthings.com/projects/countdown/example/
And I can say it's awesome.
我可以说它很棒。
Unfortunately it's not in pure CSS, there are images, and the switch is not smooth.
可惜不是纯CSS，有图片，切换不流畅。
But you can always learn how to make a beautiful countdown like that by studying how it works.
但是你总是可以通过研究它的工作原理来学习如何制作一个漂亮的倒计时。
Here you can download the source code: http://www.littlewebthings.com/projects/countdown/downloads/lwtCountdown-php.zip
这里可以下载源代码：http: //www.littlewebthings.com/projects/countdown/downloads/lwtCountdown-php.zip
Hope it helps.
希望能帮助到你。
