serviver-agent · KazuyaMiyashita · Feb 1, 2020 · pxfnc · Mar 8, 2020 · pxfnc
diff --git a/counter.js b/counter.js
@@ -0,0 +1,17 @@
+window.onload = function() {
+  const dvd = document.getElementById("access-counter");
+
+  function showCounter(num, length) {
+    const numstr = (num + '').padStart(length, '0');
+    var html = "";
+    numstr.split("").forEach(n => {
+      html += "<img src=\"img/e" + n + ".gif\">";
+    });
+    dvd.innerHTML = html;
+  }
+
+  const count = 4200; // TODO API TATAKU
+
+  showCounter(count, 8);
+
+}
diff --git a/img/e0.gif b/img/e0.gif
diff --git a/img/e1.gif b/img/e1.gif
diff --git a/img/e2.gif b/img/e2.gif
diff --git a/img/e3.gif b/img/e3.gif
diff --git a/img/e4.gif b/img/e4.gif
diff --git a/img/e5.gif b/img/e5.gif
diff --git a/img/e6.gif b/img/e6.gif
diff --git a/img/e7.gif b/img/e7.gif
diff --git a/img/e8.gif b/img/e8.gif
diff --git a/img/e9.gif b/img/e9.gif
diff --git a/index.html b/index.html
@@ -26,6 +26,15 @@
   color: #d8eaf5;
 }
 
+div#access-counter {
+  margin-top: 1em;
+  text-align: center;
+}
+div#access-counter > img {
+  margin: 0;
+  padding: 0;
+}
+
 #particles-js {
   width: 100%;
   height: 100%;
@@ -80,6 +89,9 @@
   <body>
     <h1>Serviver Agent</h1>
     <div class="description">サバイバーエージェントはベンチャースピリットを持ったEitherT集団です</div>
+    <div id="access-counter">
+      <img src="img/e0.gif"><img src="img/e1.gif"><img src="img/e2.gif"><img src="img/e3.gif"><img src="img/e4.gif"><img src="img/e5.gif"><img src="img/e6.gif"><img src="img/e7.gif"><img src="img/e8.gif"><img src="img/e9.gif">
+    </div>
     <div id="particles-js"></div>
     <div id="dvd-field"></div>
     <svg xmlns="http://www.w3.org/2000/svg" id="dvd">
@@ -92,6 +104,7 @@ <h1>Serviver Agent</h1>
     <script src="particles.js" defer></script>
     <script src="set.js" defer></script>
     <script src="clock.js" defer></script>
+    <script src="counter.js" defer></script>
     </script>
   </body>
 </html>