var elehoge = $('<div>').addClass(stick[i]).addClass('s'+(i+1));
この部分はメソッドチェーン
括弧の場所が間違っていたので初め動かなかった。
i=0から始まっているので+1しないとs0が生成されてしまうので(i+1)になってしまうというわけ
いま8しか表示できないので数字を表示できるようにしていきますよ
①onクラスとoffクラスを追加。そこでbackgroundを指定
②横棒縦棒のbackgroundはもういらないので取る
③配列として0という数字を表すときはどことどこを光らせるか決めよう
--->clock.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<link rel="stylesheet" href="clock.css">
<script src="../jquery-3.4.1.min.js"></script>
</head>
<body>
<div class="stage">
</div>
<script src="clock.js"></script>
</body>
</html>
--->clock.css
body{
background:#cff;
}
/*
div .hogehoge{
background-color:#f00;
}
*/
.stage{
background-color:#6a6347;
width:300px;
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);/*ちょっと斜めに*/
}
.s1{
top: 35px;
left: 60px;
}
.s2{
top: 50px;
left: 40px;
}
.s3{
top: 170px;
left: 30px;
}
.s4{
top: 150px;
left: 50px;
}
.s5{
top: 170px;
left: 140px;
}
.s6{
top: 50px;
left: 155px;
}
.s7{
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()*10);/*0から9までの10種類*/
//ran = 5;
//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('nums');
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);
}
});
別の書き方
三項演算子で
for(var i=0; i<7; i++){
var elehoge = $('<div>').addClass(stick[i]).addClass('s'+(i+1));
var tmpClass = nums[ran].charAt(i) == 1 ? 'on':'off';
elehoge.addClass(tmpClass);
$('.stage').append(elehoge);
}
