シニアのプログラミング　002 瞬間記憶（脳トレ）

瞬間記憶（脳トレ）　作成中

cssを色々実験（回転、裏返し..）

（１）同じクラス名の「div要素」すべてクラスを変更する。

クラスを外し、新しいクラスをつける

<div class="container mt-2" id="main" style="width:400px">
    <div id="box" class="box mt-5 ml-3"><span>回転</spa></div>
    <div id="box2" class="box mt-5 ml-3">回転</div>
    <div id="box3" class="box mt-5 ml-3">回転</div>
    <button id="btn" class="m-5">実　行</button>

クラス２つ以上ないと、うまくゆきません。
残ってるクラス名で配列リスト作ります。（mt-5）

function cssChange(){
        var elements=document.getElementsByClassName('mt-5');
        for (var i=0;i<elements.length;i++){
            elements[i].classList.remove("box");
            elements[i].classList.add("box2");
        }
 }

（2）カードを一回転する

(function(){
    'use strict';

    document.getElementById('btn').addEventListener('click',cssChange,false);

    function cssChange(){
        var elements=document.getElementsByClassName('aa');
        for (var i=0;i<elements.length;i++){
            //elements[i].classList.remove("box");
            elements[i].classList.add("b");
            elements[i+1].classList.add("c");
            i++;
        }

        var timeoutID = window.setTimeout(test, 700,timeoutID);
    }

    function test(id){
        var elements=document.getElementsByClassName('aa');
    
        for (var i=0;i<elements.length;i++){
            //elements[i].classList.remove("box");
            elements[i].classList.remove("b");
            elements[i+1].classList.remove("c");
            i++;
        }
    }
})();

「setTimeout」一度しか使わないときは、「clearTimeout」はいらないようです。

裏返し（Css追加）、時間が来たら、CSS追加分を外しています。

1~9までの数値をランダムに並び替える

 function rndsort(){
     var arr=[1,2,3,4,5,6,7,8,9];
     for(var i=arr.length-1;i>0;i--){
         var j=Math.floor(Math.random()*(i+1));
         var tmp=arr[i];
         arr[i]=arr[j];
         arr[j]=tmp;
     }
     
 }

参考サイト：　　[Javascript] 配列をシャッフル(ランダムソート)する方法 │ Web備忘録