TakizawaAkira/RiotJS_BinaryClock.html

## RiotJS_BinaryClock.html
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.0.15/riot+compiler.min.js"></script>
</head>
<body>
<binary_clock></binary_clock>
<style>
@keyframes binary_clock_kf {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(180deg); }
}
</style>

<script type="riot/tag">
<binary_clock>
  <div class="clock_time">{time}</div>
  <div id="binary_clock">
    <div each={el in el_length}>
      <p each={el}></p>
    </div>
  </div>
  <style scoped>
  :scope .clock_time{
    font-size: 20px;
    font-weight: bold;
  }
  :scope #binary_clock div p{
    background: #5F5;
    margin: 0px;
    width: 20px;
    height: 20px;
    display: inline-block;
    border: solid 1px;
  }
  .anim {
    animation: binary_clock_kf 1s ease infinite;
  }
  </style>
  <script>
  //10進数->2進数
  this.get2 = function(num){
    var binary = [];
    while(true){
      binary.unshift(num%2);
      num = parseInt(num/2);
      if(num<1) break;
    }
    return binary;
  }

  var d, t;
  var interval_function = function(){
    //時間更新
    d = new Date();
    t = {hour: d.getHours(), min: d.getMinutes(), sec: d.getSeconds()};
    this.time = t.hour+"時"+("0"+t.min).slice(-2)+"分"+("0"+t.sec).slice(-2)+"秒";
    riot.update();

    //binary時計更新
    var el = document.getElementById("binary_clock");
    var el2 = el.getElementsByTagName("div");
    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;

          switch(i){
            case 0: binary = this.get2(t.hour)[j]; break;
            case 1: binary = this.get2(t.min)[j]; break;
            case 2: binary = this.get2(t.sec)[j]; break;
          }
          if(binary){
            el3[j].style.backgroundColor = "#000";
            el3[j].classList.add('anim');
          }else if(binary===0){
            el3[j].style.backgroundColor = "#AFF";
          }
        }
    }
  };

  //timer
  this.el_length = [["", "", "", "", "", ""], ["", "", "", "", "", ""], ["", "", "", "", "", ""]];
  this.timer = setInterval(interval_function, 1000);
</binary_clock>
</script>

<script>
  riot.mount('binary_clock');
</script>
</body>
	<head>
	<meta charset="utf-8">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.0.15/riot+compiler.min.js"></script>
	</head>
	<body>
	<binary_clock></binary_clock>
	<style>
	@keyframes binary_clock_kf {
	0% { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(180deg); }
	}
	</style>

	<script type="riot/tag">
	<binary_clock>
	<div class="clock_time">{time}</div>
	<div id="binary_clock">
	<div each={el in el_length}>
	<p each={el}></p>
	</div>
	</div>
	<style scoped>
	:scope .clock_time{
	font-size: 20px;
	font-weight: bold;
	}
	:scope #binary_clock div p{
	background: #5F5;
	margin: 0px;
	width: 20px;
	height: 20px;
	display: inline-block;
	border: solid 1px;
	}
	.anim {
	animation: binary_clock_kf 1s ease infinite;
	}
	</style>
	<script>
	//10進数->2進数
	this.get2 = function(num){
	var binary = [];
	while(true){
	binary.unshift(num%2);
	num = parseInt(num/2);
	if(num<1) break;
	}
	return binary;
	}

	var d, t;
	var interval_function = function(){
	//時間更新
	d = new Date();
	t = {hour: d.getHours(), min: d.getMinutes(), sec: d.getSeconds()};
	this.time = t.hour+"時"+("0"+t.min).slice(-2)+"分"+("0"+t.sec).slice(-2)+"秒";
	riot.update();

	//binary時計更新
	var el = document.getElementById("binary_clock");
	var el2 = el.getElementsByTagName("div");
	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;

	switch(i){
	case 0: binary = this.get2(t.hour)[j]; break;
	case 1: binary = this.get2(t.min)[j]; break;
	case 2: binary = this.get2(t.sec)[j]; break;
	}
	if(binary){
	el3[j].style.backgroundColor = "#000";
	el3[j].classList.add('anim');
	}else if(binary===0){
	el3[j].style.backgroundColor = "#AFF";
	}
	}
	}
	};

	//timer
	this.el_length = [["", "", "", "", "", ""], ["", "", "", "", "", ""], ["", "", "", "", "", ""]];
	this.timer = setInterval(interval_function, 1000);
	</binary_clock>
	</script>

	<script>
	riot.mount('binary_clock');
	</script>
	</body>