デジタル時計をつくりましょう
①同じデザインがでてくると思われるのでclassで生成
②とりあえずこんな感じで
<!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 class="s1"></div>
</div>
<script src="clock.js"></script>
</body>
</html>
--->css
body{
background:#cff;
}
.stage{
background-color:#6a6347;
width:300px;
height:300px;
position: relative;
}
.s1{
position:absolute;/*自由な位置に*/
width:100px;
height:20px;
background-color:#150c08;
border-radius: 10px;
top: 40px;
left: 40px;
}
③もろもろ修正して、
<!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 class="s1 stick_h"></div><!--8の字の上の横棒-->
<div class="s2 stick_w"></div><!--8の字の左上の縦棒-->
<div class="s3 stick_h"></div><!--8の字の中央の横棒-->
<div class="s4 stick_w"></div><!--8の字の左下の縦棒-->
<div class="s5 stick_h"></div><!--8の字の下の横棒-->
<div class="s6 stick_w"></div><!--8の字の右上の縦棒-->
<div class="s7 stick_w"></div><!--8の字の下の縦棒-->
</div>
<script src="clock.js"></script>
</body>
</html>
--->css
body{
background:#cff;
}
div .hogehoge{
background-color:#f00;
}
.stage{
background-color:#6a6347;
width:300px;
height:300px;
position: relative;
}
/*横棒*/
.stick_h{
position:absolute;/*自由な位置に*/
width:100px;
height:20px;
background-color:#150c08;
border-radius: 10px;
}
/*縦棒*/
.stick_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: 150px;
left: 50px;
}
.s4{
top: 170px;
left: 30px;
}
.s5{
top: 270px;
left: 35px;
}
.s6{
top: 50px;
left: 155px;
}
.s7{
top: 170px;
left: 140px;
}
せっかくつくったけどこれをプログラムで書きなおします。
7回ループしてappend
今回は$(<'div'>)を作るとして、付与したいのはクラスだけ。
さて。
クラスを複数入れたり取ったりするのをattrで書き換えると「前のクラスが消える」らしい。
今回divにたくさんのクラスを付与したいのでそれだとまずい。
アドクラスというのをつかうと複数のクラスを付与できるらしい。
しかし今回.addClass('s_h');とかやってしまうと、横棒ばかり生成される。
今回横縦混在しているからちょっとまずい。
→配列でもっておきましょう。
あとちょっと独自のクラス名をつけたらややこしくなったから、先生版に戻します。
縦棒横棒の順番も先生版と違ってた。
もろもろ修正。かつfor文で回すとこうなる。
--->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;
}
.s4{
top: 150px;
left: 50px;
}
.s3{
top: 170px;
left: 30px;
}
.s7{
top: 270px;
left: 35px;
}
.s6{
top: 50px;
left: 155px;
}
.s5{
top: 170px;
left: 140px;
}
