diff --git a/kuji.css b/kuji.css new file mode 100644 index 0000000..dda35be --- /dev/null +++ b/kuji.css @@ -0,0 +1,8 @@ +body{ + text-align: center; +} +div{ + text-align: center; + border: 2px solid #000000; + margin: 10px 500px; +} \ No newline at end of file diff --git a/kuji.html b/kuji.html new file mode 100644 index 0000000..c1ded7c --- /dev/null +++ b/kuji.html @@ -0,0 +1,26 @@ + + + + + + kuji + + + + + +

くじ引き

+ +

+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+ + \ No newline at end of file diff --git a/kuji.js b/kuji.js new file mode 100644 index 0000000..8c811b6 --- /dev/null +++ b/kuji.js @@ -0,0 +1,41 @@ +(() => { + function CountDown() { + var count = 4, + tmID, + hit = Math.floor(Math.random()*10+1); + areas = document.querySelectorAll("div"), + button = document.getElementById("start"), + infobox = document.getElementById("result"); + function countDown() { + if (--count == 0) { + infobox.innerHTML = "失敗…"; + infobox.setAttribute("class", "failure") + for (let i of areas) { + if (i.textContent == hit) { + i.removeEventListener("click", stopCountDown, false); + } + } + } else { + infobox.innerHTML = count + "秒前"; + tmID = setTimeout(countDown, 1000); + } + } + function startCountDown() { + tmID = setTimeout(countDown, 1000); + button.removeEventListener("click", startCountDown, false); + for (let i of areas) { + if (i.textContent == hit) { + i.addEventListener("click", stopCountDown, false); + } + } + } + function stopCountDown() { + clearTimeout(tmID); + infobox.innerHTML = "成功!!"; + infobox.setAttribute("class", "success"); + areas.removeEventListener("click", stopCountDown, false); + } + button.addEventListener("click", startCountDown, false); + } + document.addEventListener("DOMContentLoaded", CountDown, false); + })(); \ No newline at end of file