shinnamon.github.io/jitan.html at master · shinnamon/shinnamon.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<html>
<head>
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
  <script>
var jitan = jitan || {};
jitan.times = [
  { name: '1m', time: 1 },
  { name: '3m', time: 3 },
  { name: '5m', time: 5 },
  { name: '10m', time: 10 },
  { name: '15m', time: 15 },
  { name: '30m', time: 30 },
  { name: '60m', time: 60 * 1 },
  { name: '3h', time: 60 * 3 },
  { name: '8h', time: 60 * 8 },
  { name: '15h', time: 60 * 15 },
  { name: '24h', time: 60 * 24 },
  { name: '3d', time: 60 * 24 * 3 },
  { name: '7d', time: 60 * 24 * 7 },
  { name: '30d', time: 60 * 24 * 30 }
];
jitan.onload = function () {
  var maketags = function (name) {
    var ret = [];
    ret.push('<td class="' + name + '">');
    ret.push('<table style="width: 100%; background-color: #dddddd;">');
    jitan.times.forEach(function (n, i) {
      ret.push('<tr style="vertical-align: middle;"><td>');
      ret.push('<span style="display: inline-block; width: 3em;">' + n.name + '</span>');
      ret.push('<input type="number" pattern="\d*" name="jitan-' + n.time + '" time="' + n.time + '" size="6" parent="' + name + '" style="font-size: 16px; transform: scale(0.8); width: 5em;"/>');
      ret.push('</td></tr>');
    });
    ret.push('</table>');
    ret.push('<table style="width: 100%; margin-top: 5px; background-color: #dddddd;">');
    ret.push('<tr><td style="background-color: #dddddd;" class="result" total="0">&nbsp;</td></tr>');
    ret.push('</table>');
    return ret.join('');
  };
  var out = [];
  out.push('<table class="input" style="width: 100%;"><tr>');
  out.push(maketags('g1'));
  out.push(maketags('g2'));
  out.push('</tr></table>');
  out.push('<table style="width: 100%;"><tr><td class="total" style="padding: 5px; background-color: #dddddd;">&nbsp;</td></tr></table>');
  document.querySelector('.jitan').innerHTML = out.join('');;
  document.querySelectorAll('input[name^="jitan-"]').forEach(function (n, i) {
    n.addEventListener('change', jitan.onchange);
    n.addEventListener('keyup', jitan.onkeyup);
  });
};
jitan.onchange = function (e) {
  var maketotal = function (num) {
    var day = parseInt(num / 60 / 24, 10);
    var hor = parseInt((num - day * 60 * 24) / 60, 10);
    var min = parseInt(num - day * 60 * 24 - hor * 60, 10);
    return day + 'd  ' + hor + 'h  ' + min + 'm';
  };
  var subtotal = 0;
  var parent = e.currentTarget.attributes.parent.value;
  document.querySelectorAll('.' + parent + ' input[name^="jitan-"]').forEach(function (n, i) {
    subtotal += n.value * n.getAttribute('time');
  });
  var target = document.querySelector('.' + parent + ' .result');
  target.setAttribute('total', subtotal);
  target.innerHTML = maketotal(subtotal);
  var total = 0;
  document.querySelectorAll('.result').forEach(function (n, i) {
    total += parseInt(n.getAttribute('total'), 10);
  });
  document.querySelector('.total').innerHTML = 'total: ' + maketotal(total);
};
jitan.onkeyup = function (e) {
  if (e.keyCode == 13) {
    var targets = document.querySelectorAll('input');
    for (var i = 0; i < targets.length; i++) {
      if (targets[i] === e.currentTarget) {
        if (i + 1 == targets.length) {
          targets[0].focus();
        } else {
          targets[i + 1].focus();
        }
        break;
      }
    }
  }
};
document.addEventListener('DOMContentLoaded', jitan.onload);
</script>
</head>
<body>
<h4 style="margin: 0;">時短計算 ver.2019.10.28</h4>
<div class="jitan"></div>
</body>
</html>