view source

JavaScript

document.title = 'アナグラム ランダムな並びのテキスト生成';

$(function(){
   function setText(){
    console.log(text);
    ary = text.split('');
    rText = _.shuffle(ary).join('');
    $p = $('<p>').text(rText);
    $('#demo').append($p);
  }
  text = location.search.substring(1);
  if(!text){
    $input = $('<input>',{placeholder:'文字入力...'});
    $('#demo').append($input);
    $input.focus();
    $input.on('change', function(){
      text = $(this).val();
      setText();
    });
  }
  setText();

  $h1 = $('<h1>').text(document.title);
  $('#demo').after($h1);

})

CSS

#demo{
  display: grid;
  place-content: center;
  place-items: center;
}

#demo p,
#demo input{
  font-size:32px;
  width:90vw;
}

HTML

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-text-anagram/

ABOUT

hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。