JavaScriptでランダムに文字をうち続ける

randomString()

JavaScript

function randomString(elmId, wordCount) {
    var elm = document.getElementById(elmId);

    // ランダムで選ばれる文字
    var str = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
    var strLength = str.length;
    var innerStr = "";

    // タイマーの設定
    var timer = setInterval(function(){
        if(innerStr.length < wordCount) {

            // str からランダムに一文字選ぶ
            innerStr += str[~~(Math.random() * strLength)];
            elm.innerHTML = innerStr;
        } else {

            // 指定した文字数になったらタイマー終了
            clearInterval(timer);
        }
    }, 60); // 0.06秒に1個文字を打つ
}

// 使用例 入れ合い要素の id と500文字
randomString("test1", 500);

ランダムな文字列を入れたい要素の id と文字数を指定することでその要素にその文字数まで文字を入れます。

"文字列"[何番目] でその文字列のその番号の文字を呼び出すことが出来ます。配列と似た感じの操作で引っ張ってこれるので便利です。

サンプル

「start」ボタンを押すとランダムな文字列を挿入します。

CSS は以下のような感じで指定してます。

CSS

#test1 {
    background-color: #333;
    color: #00ff00;
    font-family: Consolas,"Courier New",Courier,Monaco,monospace;
    padding: 16px;
}

ひらがなバージョン

変数 str 部分を変更すればひらがなでもランダムに出来ます。

JavaScript

// 関数名を変更
function randomJpString(elmId, wordCount) {
    var elm = document.getElementById(elmId);

    // ランダムで選ばれる文字をひらがなに
    var str = "あいうえおかきくけこさしすせそたちってとなにぬねのはひふへほまみむめもやゆよわをん";
    var strLength = str.length;
    var innerStr = "";
    var timer = setInterval(function(){
        if(innerStr.length < wordCount) {
            innerStr += str[~~(Math.random() * strLength)];
            elm.innerHTML = innerStr;
        } else {
            clearInterval(timer);
        }
    }, 60);
}

// 使用例 入れたい要素の id と300文字
randomJpString("test2", 300);

サンプル

変数 str を変更すればカタカナでも漢字でも記号でもなんでもいけます。

callback 指定付き

callback 関数を if 内に指定して文字が入力し終わったときに発火する関数を指定できるようにも出来ます。

JavaScript

// 関数名変更
function randomStringCallback(elmId, wordCount, callback) {
    var elm = document.getElementById(elmId);
    var str = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
    var strLength = str.length;
    var innerStr = "";
    var timer = setInterval(function(){
        if(innerStr.length < wordCount) {
            innerStr += str[~~(Math.random() * strLength)];
            elm.innerHTML = innerStr;
        } else {

            //callback の実行
            callback(elmId);
            clearInterval(timer);
        }
    }, 60);
};

// 指定した要素の文字列を消してしまう関数
function strRemove(elmId) {
    document.getElementById(elmId).innerHTML = "";
};

// 使用例 200文字入れたら文字列を消す
randomStringCallback("test3", 200, strRemove);

サンプル

単純な callback ですが、もっと面白いこともできそうです。elmId で要素の id を引き継いでいます。wordCount なども引き継ぎ可能です。

まとめ

何に使うのかよくわかりませんが、色々応用の出来る関数が出来ました。

404ページで遊んだりオープニングページだったりなら面白く使えるかもしれません。