バイナリ時計作るよ<javascript>

■手始めに10進数を2進数に変換する関数 (バイナリ時計 - Wikipedia)

function get2(num){
  var binary = [];

  while(true){
    binary.unshift(num%2);
    num = parseInt(num/2);
    if(num<1) break;
  }

  return binary;
}

f:id:surume_Reflection:20170117215752p:plain

さっそくサイドバーに実装→

■我ながらかなりの汚コードだと思う f:id:surume_Reflection:20170121124013p:plain

<div id="binary_clock"></div>
<div id="binary_clock2">
  <div>
    <p></p> <p></p> <p></p> <p></p> <p></p> <p></p>
  </div>

  <div>
    <p></p> <p></p> <p></p> <p></p> <p></p> <p></p>
  </div>

  <div>
    <p></p> <p></p> <p></p> <p></p> <p></p> <p></p>
  </div>
</div>

<script>
function get2(num){
  var binary = [];

  while(true){
    binary.unshift(num%2);
    num = parseInt(num/2);
    if(num<1) break;
  }

  return binary;
}

var el0 = document.getElementById("binary_clock");
var el = document.getElementById("binary_clock2");
var el2 = el.getElementsByTagName("div");

setInterval(function(){
  var d = new Date();
  var t = {hour: d.getHours(), min: d.getMinutes(), sec: d.getSeconds()};

  for(var i=0;i<el2.length;i++){
      var el3 = el2[i].getElementsByTagName("p");
      for(var j=0;j<el3.length;j++){
        var binary = 0;
        el3[j].style.backgroundColor = "#AFF";
        switch(i){
          case 0: binary = get2(t.hour)[j]; break;
          case 1: binary = get2(t.min)[j]; break;
          case 2: binary = get2(t.sec)[j]; break;
        }
        if(binary){
          el3[j].style.backgroundColor = "#000";
          el3[j].classList.add('anim');
          setTimeout(function(){
            el.classList.remove('anim');
          }, 1000);
        }
      }
  }

  el0.innerText = t.hour+"時"+("0"+t.min).slice(-2)+"分"+("0"+t.sec).slice(-2)+"秒";
}, 1000);

</script>

<style>
#binary_clock{
  font-size: 20px;
  font-weight: bold;
}
#binary_clock2 p{
  background: #5F5;
  margin: 0px;
  width: 20px;
  height: 20px;
  display: inline-block;
  border: solid 1px;
}
.anim {
  animation: kf 1s ease infinite;
}
@keyframes kf {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(180deg); }
}
</style>

RiotJSに書き直し

バイナリ時計をRiotJSに書き換え

問題点:
* @keyframesコンポーネント外に出さないと動かない
* RiotJSで指定回数のループをする方法が分からない -> リファレンス確認!
* this.idthis.nameで取得できるがgetElementById等使うべきでない?