JavaScript
HTML5
CSS3
初心者

役に立たない Lチカ(もどき)w

Pythonの勉強を始めました。
何か出力して楽しめるものがないか探していたところ、ラズパイでLチカ関連の記事が目に付いたので色々と調べてみました。
ラズパイ。
本体と色々なモジュール込み込みでおよそ1万円くらいかかりそうです。

。。。と、その前にJavaScriptで、ブラウザ版のLチカ(LEDがチカチカするわけではないけど。。。)を作ってみようと決心しました。

仕様

ボカシ処理した円をブラウザの表示領域に並べる。
ランダムなRGB値を取得し全ての円に着色する。
ランダムなRGB値でチカチカさせる。
一応レスポンシブにも対応。
以上

ソースコードは以下。

Lチカもどき.html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>Lチカ もどき</title>
    <style>
        /*リセットCSS*/
        * {
            margin: 0;
            padding: 0;
        }

    </style>
</head>

<body>
    <!--親要素-->
    <div id="obj__container" style="display: flex; flex-wrap: wrap;justify-content: space-around; align-content: space-around; background-color: #000; overflow: hidden;"></div>

    <script>
        var docWidth = document.documentElement.clientWidth; //ドキュメントの横の表示領域
        var docHeight = document.documentElement.clientHeight; //ドキュメントの縦の表示領域
        var horiLength = 10; //横の個数
        var objSize = docWidth / horiLength; //オブジェクトのサイズ
        console.log(horiLength * Math.floor(docHeight / objSize)); //オブジェクトの総数
        console.log(docWidth + "X" + docHeight); //表示領域
        console.log(objSize); //サイズ表示

        var objContainer = document.getElementById('obj__container');

        for (var i = 1, objLen = horiLength * Math.floor(docHeight / objSize); i <= objLen; i++) {

            var myDiv = document.createElement('div'); //divの子要素を作成

            objContainer.appendChild(myDiv);

            myDiv.setAttribute('id', 'obj__contents' + zeroPad(i)); //個数分、連番付与の要素を作成

            myDiv.setAttribute('style', 'width:' + objSize + 'px; height:' + objSize + 'px; left: ' + objSize * i + 'px; border-radius:50%; filter: blur(' + objSize / 8 + 'px);'); //諸設定

            putColor(myDiv); //チカチカ関数実行

        }

        //▼ランダムなカラー値を与える関数
        function putColor(ele) {
            setInterval(function() { //setInterval
                var rColor = getRandomColorNum(255, 0), //R値
                    gColor = getRandomColorNum(255, 0), //G値
                    bColor = getRandomColorNum(255, 0); //B値
                ele.style.backgroundColor = 'rgb(' + rColor + ',' + gColor + ',' + bColor + ')';
            }, 500);
            return ele;
        }

        //▼ランダムな数値を取得する関数
        function getRandomColorNum(maxColorNum, minColorNum) {
            var colorNum = parseInt(Math.random() * (maxColorNum + 1 - minColorNum) + minColorNum);
            return colorNum;
        }

        //▼ゼロパッディング関数
        function zeroPad(zeroNum) {
            var zeroNum = ('00' + zeroNum).slice(-2);
            return zeroNum
        }

    </script>
</body>
</html>

image.png
▲ランダムなRGB値でチカチカします。

課題

ボタンなどを設置しチカチカの速度を速くしたり、円の大きさを変えたりしても楽しいかも知れません。。。
ベンダープレフィックスは付与していないのでIEではボカシ効果が得られません。
動作確認は適当です。