yami-timer/timer.html at master · vestige/yami-timer · 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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
.ike {
  background-image: url("./ike2.jpg");
  background-repeat:repeat;
  color:red;
  font-size:100px;
}
</style>
<script>
function initialize() {
  var MAX_SECONDS = 120;
  var start_  = null;
  var timer_  = null;
  /*
   *
   */
  function $(id) {
    return document.getElementById(id);
  }
  /*
   *
   */
  function count_down(e) {
    // r
    if (e.keyCode == 82) {
      clearTimeout(timer_);
      $("timer").innerText = MAX_SECONDS;
      $("timer").style.opacity = 1;
      $("yami").style.backgroundColor = '';
      $("yami").style.opacity = 1;
      $("freezer").style.display = "none";
    }
    else if (e.keyCode == 32) {
      // space
      if (!document.body.start) {
        $("yami").style.backgroundColor = "black";
        start_ = Date.now();
        timer_ = setInterval(function() {
          var diff    = Date.now() - start_;
          var remain  = parseInt(((MAX_SECONDS * 1000 - diff) / 1000),10);
          $("timer").innerText = remain;
          $("yami").style.opacity = (MAX_SECONDS + 10 - remain) / MAX_SECONDS * 1;
          if (remain < 20) {
            $("timer").style.opacity = (1 - (20 - remain) / 20);
          }
          if (remain == 0) {
            clearTimeout(timer_);
           // $("freezer").style.display = "";
            $("yami").className = 'ike';
            $("yami").innerText = '虚無の漆黒も、深海のごとく深き闇も、我々の時計の刻みを止めることはできない';
            return;
          }
        } , 100);
      }
      else {
        clearTimeout(timer_);
      }
      document.body.start = !document.body.start;
    }
  }

  document.body.addEventListener("keydown" , count_down , true);
  $("timer").innerText = MAX_SECONDS;
}
</script>
</head>
<body background="yamiwall.jpeg" bgcolor="black" style="margin:0;" onload="initialize()">
  <div id="yami" align="center" style="height:80%;width:100%;">
    <span id="timer" style="color:white;font-size:300pt;"></span>
    <img id="freezer" src="./ike2.jpg" style="display:none">
  </div>
  <div align="center" style="color:white;font-size:50pt">
    powered by #tkbjs
  </div>
</body>
</html>