2桁表示にしていきましょう。
まずここを変更
var ran = Math.floor(Math.random()*100);/*0から99までの100種類にupgrade*/
①1の位と10の位をそれぞれ取り出す
②1桁ずつ2回処理しようと
①の部分はきのうやったチェックディジットと同じ
桁を配列で取り出す
var ran = Math.floor(Math.random()*100);/*0から99までの100種類にupgrade*/
var keta [ran%10 , Math.floor(ran/10)];
//左側の方は1の位の値、この右側の計算結果は10の位の値
二重ループにするとして、中をどうしたらいいか？
j=1 1の位
j=2 10の位
var elehoge = $('<div>').addClass(stick[i]).addClass('s'+(j*10+i+1));//最初は1 二週目は11
(j*10+i+1)で二けたが表現できる
このままだとranが二桁で流れてくるのにiは最大6だからエラーになるね？↓
var tmpClass = nums[ran].charAt(i) == 1 ? 'on':'off';
→
nums[keta[j]]
ひとけためが0ならnums[0]にしたい。
それでnums配列のどの信号を使うか指定させたい
一桁目をみたいのか2桁目をみたいのかをketa配列のjで指定
はてな。
--->clock.css
body{
background:#cff;
}
/*
div .hogehoge{
background-color:#f00;
}
*/
.stage{
background-color:#6a6347;
width:400px;
height:300px;
position: relative;
}
/*横棒*/
.s_h{
position:absolute;
width:100px;
height:20px;
background-color:#150c08;/*先生版はこの行を取る*/
border-radius: 10px;
}
/*縦棒*/
.s_w{
position:absolute;
width:20px;
height:100px;
background-color:#150c08;/*先生版はこの行を取る*/
border-radius: 10px;
transform: skew(-5deg);/*ちょっと斜めに*/
}
/*--10の位--*/
.s1{
top: 35px;
left: 260px;
}
.s2{
top: 50px;
left: 240px;
}
.s3{
top: 170px;
left: 230px;
}
.s4{
top: 150px;
left: 250px;
}
.s5{
top: 170px;
left: 340px;
}
.s6{
top: 50px;
left: 355px;
}
.s7{
top: 270px;
left: 235px;
}
/*--1の位--*/
.s11{
top: 35px;
left: 60px;
}
.s12{
top: 50px;
left: 40px;
}
.s13{
top: 170px;
left: 30px;
}
.s14{
top: 150px;
left: 50px;
}
.s15{
top: 170px;
left: 140px;
}
.s16{
top: 50px;
left: 155px;
}
.s17{
top: 270px;
left: 35px;
}
.on{
background-color:#86ff0d;/*先生版 #150c08;*/
}
.off{
background-color:#5c563e;
}
--->clock.js
$(function(){
console.log('hoge');
var ran = Math.floor(Math.random()*100);/*0から99までの100種類にupgrade*/
var keta= [ran%10 , Math.floor(ran/10)];
//左側の方は1の位の値、この右側の計算結果は10の位の値
//0から9の文字を信号の0or1で表現
var nums= ['1110111','0000110','1011011','1001111','0101110','1101101','0111101','1000110','11111111','1101110'];
var stick=['s_h','s_w','s_w','s_h','s_w','s_w','s_h'];/*hvvhvvh*/
console.log('ran is '+ran);
for(var j=0; j<2; j++){/*jが2回だけ回る：1桁目と2桁目*/
for(var i=0; i<7; i++){
var elehoge = $('<div>').addClass(stick[i]).addClass('s'+(j*10+i+1));//最初は1 二週目は11
var tmpClass = nums[keta[j]].charAt(i) == 1 ? 'on':'off';
elehoge.addClass(tmpClass);
$('.stage').append(elehoge);
}
}
/*
for(i=0; i<7; i++){
var elehoge = $('<div>').addClass(stick[i]).addClass('s'+(i+1));
console.log('ran is '+ran);
if(nums[ran].charAt(i)==1){
elehoge.addClass('on');
}else{
elehoge.addClass('off');
}
$('.stage').append(elehoge);
}
*/
});
中枢部分はもうすこしかみ砕くとこれと同じらしい
var hoge = keta[j];
var tmpClass = nums[hoge].charAt(i) == 1 ? 'on':'off';
j=0 のときに1けため
j=1 のときに2けためをやりましょうと
ranは2桁の数字なので
それをあらかじめketaでそれぞれ1の位、10の位というひとつずつに作り直した。
いまranはkanaに逆に（1とｐ10が）入っている
難しいな。
この黄色の部分が理解できるまで自分で動きをトレースしないと。
いまはまだ全然わからない
もう一回jsを記しておく
$(function(){
console.log('hoge');
$('.stage').empty();
var ran = Math.floor(Math.random()*100);/*0から99までの100種類にupgrade*/
var keta= [ran%10 , Math.floor(ran/10)];
//左側の方は1の位の値、この右側の計算結果は10の位の値
console.log('ran is '+ran);
console.log('keta is '+keta);
//0から9の文字を信号の0or1で表現
var nums= ['1110111','0000110','1011011','1001111','0101110','1101101','0111101','1000110','11111111','1101110'];
var stick=['s_h','s_w','s_w','s_h','s_w','s_w','s_h'];/*hvvhvvh*/
for(var j=0; j<2; j++){/*jが2回だけ回る：1桁目と2桁目*/
for(var i=0; i<7; i++){
console.log('here is in for: i='+i+' j='+j);
var elehoge = $('<div>').addClass(stick[i]).addClass('s'+(j*10+i+1));//最初は1 二週目は11
var hoge = keta[j];
var tmpClass = nums[hoge].charAt(i) == 1 ? 'on':'off';
elehoge.addClass(tmpClass);
$('.stage').append(elehoge);
}
}
/*
for(i=0; i<7; i++){
var elehoge = $('<div>').addClass(stick[i]).addClass('s'+(i+1));
console.log('ran is '+ran);
if(nums[ran].charAt(i)==1){
elehoge.addClass('on');
}else{
elehoge.addClass('off');
}
$('.stage').append(elehoge);
}
*/
});
