カウンター 数取器アプリ 4連 | Tally counter

人手により目的の計測物の数量を迅速に数え上げるために用いられる計数用の道具 プラスマイナス対応

Z,X,C,V, Ctrl = -1, Space = All, Esc = Clear
ドラゴンクエストX 4アカ キラキラマラソン用カウンター

金策キラキラマラソンコース：攻略の虎
https://dragon-quest.jp/ten/other/marason.php
view source

JavaScript

$(function(){

  var inputs = $('input');
  var countClear = function(){
    var isClear = true;
    inputs.each(function(){
      if($(this).val() !== '0'){
        isClear = false;
      }
    });
    if(!isClear){
      save();
      inputs.val(0);
    } else {
      load();
    }
  }

  var countPush = function(targets, addNum){
    console.log(targets);
    console.log(addNum);
    targets.each(function(){
      var val = Number($(this).val()) + addNum;
      $(this).val(val);
    });
  }

  $('.increment').on('click', function(){
    var addNum = Number($(this).attr('number'));
    var targets = $(this).parent().find('input');
    countPush(targets, addNum);
    return false;
  });
  $('.incrementAll').on('click', function(){
    var addNum = Number($(this).attr('number'));
    var targets = inputs;
    countPush(targets, addNum);
  });
  $('.clear').on('click', function(){
    countClear();
  });

  var keys = [90,88,67,86];//zxcv
  var defKeys = [90,88,67,86,32,27];//zxcv
  $(document).on('keydown', function(e){
    
    defKeys.forEach(function(k, i){
      if(e.keyCode === k){
        e.preventDefault();
      }
    });
    var targets = [];
    var addNum = 1;
    if(event.ctrlKey){
      addNum = -1;
    }

    if(e.keyCode === 27){
      countClear();
    } else if(e.keyCode === 32){
      targets = inputs;
      countPush(targets, addNum);
    } else{
      keys.forEach(function(k, i){
        if(e.keyCode === k){
          targets = inputs.eq(i);
          countPush(targets, addNum);
        }
      });
    }
  });



  $(window).on('beforeunload', function(){
    save();
  });

  var save = function(){
    var counters = [];
    inputs.each(function(){
      counters.push($(this).val());
    });
    var json = {counters:counters};
    localStorage.setItem('counter4', JSON.stringify(json));
    console.log(json);
  }


  var load = function(){
    var counters =[];
    var countersString = localStorage.getItem('counter4');
    if(countersString){
      var counters = JSON.parse(countersString).counters;
    }
    counters.forEach(function(v, i){
      inputs.eq(i).val(v);
    });
  }
  load();


});

CSS

body{
  overflow:hidden;
}
h1,h2{
  display:none;
}
#code{
  display:none;
}

#demo{
  min-height:100vh;
}
#demo *{
  box-sizing:border-box;
  font-weight:bold;
}

.counters{
  display:flex;
}
.counters > div{
  width:25%;
  padding:1vmin;
}

.counter{
  width:100%;
  height:16vh;
  font-size:12vmin;
  text-align:center;
  border:0;
  background-color:#f7f7f7;
}
button{
  width:100%;
  height:16vh;
  font-size:12vmin;
  -webkit-appearance: none;
  border:0;
  margin:1vmin 0;
  cursor:pointer;
}
button:hover{
  background-color:#fcc;
}

.all > div{
  padding:0 1vmin;
  text-align:center;
}

.all button{
  width:100%;
  height:12vh;
  font-size:10vmin;
}


input[type=number]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  width:0;
}

.help{
  position:fixed;
  right:0;
  bottom:0;
  color:#aaa;
  margin:1vmin;
}

pre{
  display:none;
}

@media (max-width:640px){
  .help{
    display:none;
  }
}

HTML

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

view-source:https://hi0a.com/demo/-js/js-counter4/

ABOUT

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

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

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

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

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

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

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

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