フリップフロップ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

このような問題を解決できました。まず、各画像位置に対して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; 
} 

次に、桁を入力として受け取り、その桁のCSSクラスセレクタを次のように返すJavaScript関数を作成しました。

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

最後に、この関数はJSX要素内で以下のように呼び出されます。

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

それが問題を解決しました。