view source

JavaScript

document.title = '分割した数値を計算';
$(function(){
  var v = 1280;
  $input = $('<input>',{type:'number'}).val(v).css({width:'99%'});
  $form = $('<form>');
  $div = $('<div>');
  $demo = $('#demo');
  $demo.append($form);
  $form.append($input).append($div);

  $input.on('change', function(){
    setSplit();
  });

  var setSplit = function(){
    $div.empty();
    var vv = Number($input.val());
    for(i=2;i<26;i++){
      var $h2 = $('<h2>').text('1 / ' + i);
      $div.append($h2);
      for(j=1;j<i+1;j++){
        var w = 100/i;
        var width = 'calc(' + w + '%' + ' - 1px)';
        var v = vv * j;
        v = v/i;
        var title = j + '/' + i;
        var $i = $('<input>',{type:'text',n:i,m:j, title:title}).val(v).css({width:width});
        if(!Number.isInteger(v)){
          $i.css({color:'#ccc'});
        }
        if(i==4&&j==3 || i==16&&j==9){
          $i.css({backgroundColor:'#fcc'});
        }

        $div.append($i);
        var ii = i;
        $i.on('change', function(){
          var n = Number($(this).attr('n'));
          var m = Number($(this).attr('m'));
          var v = Number($(this).val())*n/m;
          $input.val(v).trigger('change');
        });
      }
    }
  }

  setSplit();
});

CSS

form{
  width:96%;
  margin:0 auto;
}

h2{
  font-weight:bold;
  margin-top:8px;
}
input{
  box-sizing:border-box;
  border:none;
  border-right:1px solid #ccc;
}

HTML

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

view-source:https://hi0a.com/demo/-js/js-number-split/

ABOUT

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

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

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

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

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

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

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