view source

JavaScript

document.title = '配列の数値の合計値を計算';

const total = ([...ary]) => {
  let t = 0;
  for (let i = 0; i< ary.length; i++) {
    var a = ary[i];
    a = a.replace(/,/, '');
    a = a.replace(/[０-９]/g, function(s) {
        return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
      });
    t+= Number(a) || 0;
  }
  return t;
}

$(function(){
  var max = 9;
  var aryOrg = [...Array(max)].map((_, i) => i+1);
  var v = aryOrg.join('\n');
  var $h1 = $('<h1>').text(document.title);
  var $input = $('<textarea>',{id:'input',placeholder:'配列を貼り付け'}).val(v);
  var $output = $('<textarea>',{id:'output',placeholder:'合計値'});
  $('#demo')
    .append($h1)
    .append($output)
    .append($input);
  
  const sum = ()=>{
    var ary = $input.val().split('\n');
    var v = total(ary);
    $output.val(v);
  }

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

CSS

#demo{
  height:100%;
}
#input{
  font-size:24px;
  width:99%;
  height:80vh;
}
#output{
  font-size:24px;
  width:99%;
  height:1.2em;
}

HTML

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

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

ABOUT

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

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

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

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

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

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

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

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