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: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;
}

test5.js 

$(function(){
    
    var idhoge = setInterval(disp,1000);
    
    
    function disp(){
        $('.stage').empty();//いったん空に
        var today =new Date();
        var second = today.getSeconds();
        var keta= [second%10 , Math.floor(second/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*/
        
        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];
                console.log('hoge is '+hoge);
                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);
        }
        */
    }
});

back