翻轉時鐘使用CSS和jsvascript的基於圖像的倒數計時器

Question

我有一個倒計時的時鐘，它工作得很好。現在的問題是，我可以使用CSS和JavaScript將圖像顯示爲數字而不僅僅是數字。這是我當前項目的輸出。

的倒裝時鐘形象，我需要補充的是像this。我看過一個類似的例子，使用jquery here。但不幸的是我不能使用jquery，因爲它可能會操縱DOM並搞砸了React虛擬DOM。我只需要使用css和java腳本來做到這一點。目前我的渲染時間代碼看起來很幼稚。您可能會發現我的源代碼here。

render() { 
     return(
     <div> 
      {this.state.label} <br /> 
      h: {this.state.time.h} m: {this.state.time.m} s: {this.state.time.s} 
     ... 
     </div> 
    ); 
    } 

我該如何更改此代碼，使其只使用css和javascript使用定時器圖像。 Jquery在這方面不會工作。任何有關實施細節的幫助真的很感激。

Answer 1

我能夠解決這個問題。首先，我爲每個圖像位置寫了一個CSS類選擇器。

.list-group-item .digit-display{ 
    display:inline-block; 
    width:50px; 
    height:85px; 
    background:url('http://i.imgur.com/uBTxTTD.jpg'); 
} 

.position-0 { 
    background-position: 0 0; 
} 

.position-1 { 
    background-position: -50px 0px !important; 
} 

然後我寫了一個JavaScript函數，它接受一個數字作爲輸入，併爲低於兩位數回報的CSS類選擇。

displayDigit(digit) { 
    const baseSelector = "digit-display position-"; 
    return `${baseSelector}${digit}`; 
    } 

最後這個函數在JSX元素中被調用如下。

<span className = {this.displayDigit(remainingTime["h"].charAt(0))}></span> 

解決了這個問題。