Question

我想在我的网站上加一个翻转计数器，类似于Apple用于他们的1 billion app countdown。

enter image description here

任何人都可以让他们的JavaScript独立运行吗？

如果有人可以提供工作代码，那就太棒了。

Answer 1

他们正在使用CSS和JavaScript的组合。翻转动画由类似CSS Sprite的技术提供动力。

首先，他们有一个非常高的图像filmstrip.png，其中包含每个数字的每个翻转“状态”（0到9;看看a scaled-down detail，你会看到我的内容平均值）。

然后，在HTML中，每个数字由三个嵌套元素组成：

第一个是容器元素，其width和height设置为单个翻转“状态”的维度，其overflow设置为{{ 1}}。此元素位于相对位置。
第二个元素绝对定位（因为第一个元素相对定位，第二个元素绝对相对定位到第一个元素）。
第三个元素的hidden设置为background-image，其filmstrip.png和width设置为此图片的尺寸。
< / LI>

然后，JavaScript似乎会快速更改第二个元素的height属性，导致top的不同部分一个接一个地暴露，从而导致翻转动画。

史蒂夫

Answer 2

现在可以在您自己的网页中实现 http://cnanney.com/journal/code/apple-style-counter-revisited/

Answer 3

我做了一个非常简单的javascript工作的计数器给它一点点“大脑”：
http://codepen.io/vsync/pen/dlwgj

JADE：

.numCounter(data-value='1839471')
  b
  span ,
  b
  b
  b
  span ,
  b
  b
  b

SCSS：

$digitHeight : 70px;
$speed       : .4s;

.numCounter{ 
  display:inline-block; 
  height:$digitHeight; 
  line-height:$digitHeight; 
  color:#F1F1F1; 
  text-shadow:0 0 2px #fff;
  font-weight:bold; 
  white-space:normal;
  font-size:$digitHeight/1.5;
  > b{
    display:inline-block; 
    width:$digitHeight/1.4; 
    height:100%; 
    margin:0 0.1em;
    border-radius:8px;
    background:#191919; 
    text-align:center;
    box-shadow:1px 1px rgba(white,.05), 1px 1px 5px #111 inset; 
    overflow:hidden;
    &:before{ 
        content:' 0 1 2 3 4 5 6 7 8 9 '; 
        display:block; 
        word-break:break-all;
        word-break:break-word; 
        transition:$speed cubic-bezier(.12,.78,.52,1.2); 
    }
    @for $i from 1 through 9{
        &.d#{$i}:before{ margin-top:-$digitHeight * $i; }
    }
  }
  > span{ 
    display:inline-block; 
    font-size:1.1em; 
    opacity:0.4;
    line-height:1.8; 
    padding:0; 
    vertical-align:top;
    text-shadow:none;
  }
}

它看起来很棒，并且可以很好地进行现场直播，而且可以从任意数字到任意数字进行计数。

Answer 4

在搜索相同的内容时，我发现了一个提供此功能的商业产品：Sprite Countdown Flip。

注意：我不隶属于此产品;但它做得很好，可能对某人有用。

Answer 5

我推荐开源变体：FlipclockJS，可能是在此事件发生后立即创建的：）

Github：objectivehtml/FlipClock，可通过NPM和Bower（未维护）获得

JavaScript翻转计数器

5 个答案:

JADE：

SCSS：