DQX 輝晶獣の出現時間の管理

サーバーとマップごとにデータの編集時刻を記録

00:00

  view source
  JavaScript
  
function getCurrentTime() {
  var ctime = new Date();
  var MM = ctime.getMonth()+1;
  var dd = ctime.getDate();
  var hh = ctime.getHours();
  var mm = ctime.getMinutes();
  MM = ('00' + MM).slice(-2);
  dd = ('00' + dd).slice(-2);
  hh = ('00' + hh).slice(-2);
  mm = ('00' + mm).slice(-2);
  var t = hh+":"+mm;
  return t;
}

$(function(){

  var wrap = $('#demo');
  var table = $('<div>');
  var areas = [
    '原野',
    '山岳',
    '砂漠',
    '全',
  ];

  wrap.append(table);
  var trHeader = $('<div>').addClass('tr');
  table.append(trHeader);
  for(var i=0;i<40;i++){
    var td = $('<div>').addClass('td');
    var p = $('<p>').text(i+1);
    trHeader.append(td);
    td.append(p);
  }
  for(var j=0;j<areas.length;j++){
    var tr = $('<div>').addClass('tr');
    table.append(tr);
    var td = $('<div>').addClass('td');
    tr.append(td);
    td.text(areas[j]);
    for(var i=0;i<40;i++){
      var td = $('<div>').addClass('td');
      tr.append(td);
      var input = $('<input>',{list: 'datalist',i:i,j:j});
      var inputDate = $('<p>').addClass('date');
      td.append(input).append(inputDate);
    }
  }

  var colorHash = {
y:'#ff0',
r:'#f00',
b:'#00f',
n:'#0f0',
  };
  $(document).on('change', 'input', function(){
    var v = $(this).val();
    $(this).removeClass();
    Object.keys(colorHash).map(key => {
      if(v.match(key)){
        $(this).addClass(key);
      }
    });
    if(v){
      $(this).next().text(getCurrentTime());
    } else {
      $(this).next().text('');
    }
    if($(this).attr('j') === '3'){
      var ii = $(this).attr('i');
      $('[i='+ii+']').not('[j="3"]').val(v).trigger('change');
    }
  });

  var now = $('#now');
  now.text(getCurrentTime());
  setInterval(function(){
    now.text(getCurrentTime());
  }, 60*1000);
});




//gas でサーバー記録しようと思ったけどやめた。


  CSS
  .tr{
  display: inline-block;
}
.td{
  display: flex;
  height:32px;
  border:1px solid #000;
  justify-content: center;
  align-items: center;
}
.td:nth-child(odd){
  background-color:#ddd;
}
.tr input{
  width:40px;
  border:none;
}
.tr .date{
  width:60px;
  height:32px;
  line-height:24px;
  text-align:center;
  background-color:#ccc;
  padding-left:4px;
}
input.y{
  background-color:#ffc;
}
input.r{
  background-color:#fcc;
}
input.b{
  background-color:#ccf;
}
input.n{
  background-color:#cfc;
}

#now{
  position:fixed;
  right:20px;
  top:20px;
  font-size:48px;
  font-weight:bold;
}
#code{
  display:none;
}
  HTML
  
    ページのソースを表示 : Ctrl+U , DevTools : F12
    view-source:https://hi0a.com/demo/-js/js-dqx-kishojuu/
  
  ABOUT
  
    hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。
    プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
    必要な機能の関数をコピペ利用したり勉強に活用できます。
    プログラムの動作サンプル結果は画面上部に出力表示されています。
    環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
    画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
    動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。
    途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。