javascript - JavaScript 翻转计数器

Question

我想在我的网站上添加一个翻转计数器，类似于 Apple 用于其10 亿应用程序倒计时的计数器。

任何人都可以让他们的 JavaScript 独立工作吗？

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

Answer 1

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

首先，他们有一个非常高的图像，称为filmstrip.png包含每个数字的每个翻转“状态”（0 到 9；看看按比例缩小的细节，你就会明白我的意思）。

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

• 第一个是容器元素，它的width和height设置为单个翻转“状态”的尺寸，并且overflow设置为hidden。这个元素是相对定位的。

• 第二个元素是绝对定位的（因为第一个元素是相对定位的，所以第二个元素相对于第一个元素是绝对定位的）。

• 第三个元素将其background-image设置为filmstrip.png，并将其width设置height为该图像的尺寸。

然后，JavaScript 似乎迅速改变了top第二个元素的属性，导致不同部分filmstrip.png一个接一个地暴露出来，从而产生翻转动画。

史蒂夫

Answer 2

到这里，准备在你自己的网页中实现 http://cnanney.com/journal/code/apple-style-counter-revisited/

Answer 3

我制作了一个计数器，它可以用非常少的 javascript 给它一点“大脑”：

function Counter(selector, settings){
  this.settings = Object.assign({
    digits: 5,
    delay: 250, // ms
    direction: ''  // ltr is default
  }, settings||{})
  
  var scopeElm = document.querySelector(selector)
  
  // generate digits markup
  var digitsHTML = Array(this.settings.digits + 1).join('<div><b data-value="0"></b></div>')
  scopeElm.innerHTML = digitsHTML;

  this.DOM = {
    scope : scopeElm,
    digits : scopeElm.querySelectorAll('b')
  }
  
  this.DOM.scope.addEventListener('transitionend', e => {
    if (e.pseudoElement === "::before" && e.propertyName == 'margin-top'){
      e.target.classList.remove('blur')
    }
  })
  
  this.count()
}

Counter.prototype.count = function(newVal){
  var countTo, className, 
      settings = this.settings,
      digitsElms = this.DOM.digits;
  
  // update instance's value
  this.value = newVal || this.DOM.scope.dataset.value|0

  if( !this.value ) return;
  
  // convert value into an array of numbers
  countTo = (this.value+'').split('')
  
  if(settings.direction == 'rtl'){
    countTo = countTo.reverse()
    digitsElms = [].slice.call(digitsElms).reverse()
  }
  
  // loop on each number element and change it
  digitsElms.forEach(function(item, i){ 
      if( +item.dataset.value != countTo[i]  &&  countTo[i] >= 0 )
        setTimeout(function(j){
            var diff = Math.abs(countTo[j] - +item.dataset.value);
            item.dataset.value = countTo[j]
            if( diff > 3 )
              item.className = 'blur';
        }, i * settings.delay, i)
  })
}



/////////////// create new counter for this demo ///////////////////////

var counter = new Counter('.numCounter', {direction:'rtl', delay:200, digits:7})
setInterval(randomCount, 3000)

function randomCount(){
  counter.count( getRandomNum(0, 9999999))
}

function getRandomNum(min,max){
    return Math.floor(Math.random()*(max-min+1) + min)
}

.numCounter {
  display: inline-block;
  height: 90px;
  line-height: 90px;
  text-shadow: 0 0 2px #fff;
  font-weight: bold;
  white-space: normal;
  font-size: 50px;
}

.numCounter > div {
  display: inline-block;
  vertical-align: top;
  height: 100%;
}

.numCounter > div > b {
  display: inline-block;
  width: 40px;
  height: 100%;
  margin: 0 0.1em;
  border-radius: 8px;
  text-align: center;
  background: white;
  overflow: hidden;
}

.numCounter > div > b::before {
  content: ' 0 1 2 3 4 5 6 7 8 9 ';
  display: block;
  word-break: break-all;
  -webkit-transition: 0.5s cubic-bezier(0.75, 0.15, 0.6, 1.15), text-shadow 150ms;
  transition: 0.5s cubic-bezier(0.75, 0.15, 0.6, 1.15), text-shadow 150ms;
}

.numCounter > div > b.blur {
  text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.2), 
               0 0.1em 2px rgba(255, 255, 255, 0.6), 
               0 0.3em 3px rgba(255, 255, 255, 0.3), 
               0 -0.1em 2px rgba(255, 255, 255, 0.6), 
               0 -0.3em 3px rgba(255, 255, 255, 0.3);
}

.numCounter > div > b[data-value="1"]::before { margin-top: -90px; }
.numCounter > div > b[data-value="2"]::before { margin-top: -180px;}
.numCounter > div > b[data-value="3"]::before { margin-top: -270px;}
.numCounter > div > b[data-value="4"]::before { margin-top: -360px;}
.numCounter > div > b[data-value="5"]::before { margin-top: -450px;}
.numCounter > div > b[data-value="6"]::before { margin-top: -540px;}
.numCounter > div > b[data-value="7"]::before { margin-top: -630px;}
.numCounter > div > b[data-value="8"]::before { margin-top: -720px;}
.numCounter > div > b[data-value="9"]::before { margin-top: -810px;}

.numCounter > div:nth-last-child(3n)::before {
  content: ",";
  display: inline;
  font-size: 1.1em;
  opacity: .6;
  color: white;
}

html, body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial;
}

.numCounter {
  overflow: hidden;
  padding: .4em;
  text-align: center;
 
  border-radius: 16px;
  background: black;
}
.numCounter b {
  color: black;
}

<div class='numCounter' data-value='1839471'></div>

它看起来很棒，现场表演也很好，它可以从任何数字计算到任何数字。

Answer 4

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

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

Answer 5

我推荐开源变体：FlipclockJS，它可能是在此事件之后创建的 :)

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