Create a gist now

Instantly share code, notes, and snippets.

バイナリ時計をRiotJSに書き換え
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment