Try Now !

玉石混交！jQueryトライアルディクショナリー

| 00005 | なんだろ　通信路を吹きすさぶパケットフロー

$(function() {
    setInterval(function() {
        $('#packet figure:nth-of-type(2)').css('right', '100vw');
        $('#packet figure:nth-of-type(2)').animate({
            'right': '0vw',
        }, {
            'duration': 160,
            'easing': 'linear'
        })
    }, 170);
    setInterval(function() {
        $('#packet figure:first-of-type').css('right', '100vw');
        $('#packet figure:first-of-type').animate({
            'right': '0vw',
        }, {
            'duration': 90,
            'easing': 'linear'
        })
    }, 100);
    setInterval(function() {
        $('#packet figure:last-of-type').css('right', '100vw');
        $('#packet figure:last-of-type').animate({
            'right': '0vw',
        }, {
            'duration': 180,
            'easing': 'linear'
        })
    }, 200);
});

section {
    width: 100vw;
    height: 200px;
}

article {
    position: relative;
}

#packet {
    z-index: 0;
}
        
#packet figure {
    background: skyblue;
    width: 100px;
    height: 3px;
    position: absolute;
    transition-property: transform;
    transition-timing-function: ease-out;
}

#packet figure:first-of-type {
    width: 100px;
    height: 2px;
    top: 40px;
}

#packet figure:last-of-type {
    width: 150px;
    height: 1px;
    top: 70px;
}

<section>
    <article id="packet">
        <figure>

        </figure>
        <figure>

        </figure>
        <figure>

        </figure>
    </article>
</section>

| 00004 | なんだろ　ピアノの鍵盤ふうレインボーカウンター

            $('td').hide();
            setInterval(function(){
               $('#cell0cell').show();
                setInterval(function(){
                $('#cell1cell').show();
                    setInterval(function(){
                    $('#cell2cell').show();
                        setInterval(function(){
                        $('#cell3cell').show();
                            setInterval(function(){
                            $('#cell4cell').show();
                                setInterval(function(){
                                $('#cell5cell').show();
                                    setInterval(function(){
                                    $('#cell6cell').show();
                                    }, 1000);
                                }, 1000);
                            }, 1000);
                        }, 1000);
                    }, 1000);
                }, 1000);
            }, 1000);

        td {
            height: 3.5em;
            width: .5em;
        }
        #cell0cell {
            background-color: lightcoral;
        }
        #cell1cell {
            background-color: lightpink;
        }
        #cell2cell {
            background-color: lightsalmon;
        }
        #cell3cell {
            background-color: lightyellow;
        }
        #cell4cell {
            background-color: lightgreen;
        }
        #cell5cell {
            background-color: lightcyan;
        }
        #cell6cell {
            background-color: lightskyblue;
        }

    <table>
        <tr>
            <td id="cell0cell">
            </td>
            <td id="cell1cell">
            </td>
            <td id="cell2cell">
            </td>
            <td id="cell3cell">
            </td>
            <td id="cell4cell">
            </td>
            <td id="cell5cell">
            </td>
            <td id="cell6cell">
            </td>
        </tr>
    </table>

| 00003 | なんだろ　ボタンでリストを絞り込み表示

//正規表現を使ってliのhtml表現のなかにstrがあるか調べる関数
function select(str){
    $('#options li').each(function(i){
        //html表現が引数strと一致したら
        if ($(this).html().match(str)){
        //そのliを表示する
            $(this).show();
        //そうでなければ
        } else {
        //表示しない
            $(this).css("display", "none");
        }
    });
}
//はしらせる
$(function(){
//inputをクリックしたら
    $('#selects input').click(function(e){
//inputのidをselect()の引数に
        select($(this).attr('id'));
    });
});

            No CSS

<p id="selects">
<input type="button" id="A" value="A">
<input type="button" id="B" value="B">
<input type="button" id="C" value="C">
<input type="button" id="D" value="D">
<input type="button" id="E" value="E">
<input type="button" id="F" value="F">
</p>
<ul id="options">
<li id="C">C</li>
<li id="E">E</li>
<li id="A">A</li>
<li id="F">F</li>
<li id="A">A</li>
<li id="B">B</li>
<li id="A">A</li>
<li id="C">C</li>
<li id="D">D</li>
<li id="E">E</li>
</ul>

| 00002 | なんだろ　時計の針のようにくるくる回る線分

//大関数
function drawRotateRound() {
    var cs  = document.getElementById('00002');
    var ctx = cs.getContext('2d');
    var w = cs.width;　　//はば
    var h = cs.height;   //たかさ
    var t = 0;           //角度の初期化
    function draw() {
        //（1000msごとに）キャンバスをクリアする
        ctx.clearRect(0, 0, w, h);
        //かきはじめ
        ctx.beginPath();
        //中心を移動
        ctx.translate(70, 70);
        ctx.rotate( t * Math.PI / 180 );
        ctx.translate(-70, -70);
        //線分をえがく
        ctx.moveTo(70, 70);
        ctx.lineTo(70, 0);
        //みどり
        ctx.strokeStyle = 'rgb(155, 187, 89)';
        ctx.stroke();
        //30°ごとにえがく
        t = 30;
      }
    //1000msごとにdrawをよびだす
    setInterval(draw, 1000);
}
    //大関数をはしらせる
drawRotateRound();

            No CSS

<canvas id="00002" width="141" height="141"></canvas>
<script>
    ...
</script>

| 00001 | なんだろ　円が欠けてゆく10秒タイマー

//大関数
function drawLoopRound() {
    var cs  = document.getElementById('00001');
    var ctx = cs.getContext('2d');
    var w = cs.width;　//はば
    var h = cs.height; //たかさ
    var t = 270;       //はじめの位置
    
    function render() {
        //はじめから
        ctx.clearRect(0, 0, w, h);
        //かきはじめ
        ctx.beginPath();
        //中心(70, 70), 半径60px. 270°の位置から時計回りにt°の位置まで円を描く
        //度数はラジアン. _RAD_ * Math.PI / 180 
        ctx.arc(70, 70, 60, 270 * Math.PI / 180, t * Math.PI / 180, true);
        //ぬりはみどり
        ctx.fillStyle = 'rgb(155, 187, 89)';
        //せんもみどり
        ctx.strokeStyle = 'rgb(155, 187, 89)';
        //ぬりつぶす
        ctx.fill();
        //えがきこむ
        ctx.stroke();
        //一周したら0にもどす
        if (t < 360) {
            t++;
        } else {
            t=0;
        }
    }
    //10秒で一周するので31.416ms
    setInterval(render, 31.416);
}
    //大関数をはしらせる
drawLoopRound();

            No CSS

<canvas id="00001" width="141" height="141"></canvas>
<script>
    ...
</script>