質問編集履歴

コードの追加

2020/05/03 06:03

投稿

HdNu

スコア32

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -137,3 +137,181 @@
 </html>
 ```
+```JavaScript
+const MAX_NUMBER = 75;
+let main = document.getElementById('main');
+let button = document.getElementById('btn');
+let history = document.getElementById('history');
+let historyArray = [];
+let targetNumber = [];
+for(let i = 1; i <= MAX_NUMBER; i++){
+  targetNumber.push(i);
+}
+let timerId;
+button.onclick = () => {
+  if(targetNumber.length === 0){
+    alert('すべての番号の発表が終わりました') ;
+    clearInterval(timerId);
+    return;
+  }
+  if(button.textContent === 'スタート'){
+    button.textContent = 'ストップ';
+    timerId = setInterval( () => {
+      let targetIndex = Math.floor(Math.random() * targetNumber.length) ;
+      main.textContent = targetNumber[targetIndex];
+    }, 100)
+  }else{
+    button.textContent = 'スタート';
+    clearInterval(timerId);
+    let targetIndex = targetNumber.indexOf(Number(main.textContent));
+    targetNumber.splice(targetIndex, 1);
+    historyArray.push(main.textContent);
+    history.textContent = historyArray;
+  }
+}
+$(function() {
+  $("td").click(function() {
+       // 現在のセルの色が無色透明かを判別
+       if($(this).css("background-color")=="rgba(0, 0, 0, 0)") {
+            // 赤色に染める
+            $(this).css("background-color", "red");
+       } else {
+            // 無色透明にする
+            $(this).css("background-color", "");
+       }
+  });
+});
+```
+```CSS
+body {
+  font-family: Arial, sans-serif;
+  text-align: center;
+  font-size: 16px;
+}
+#btn{
+  width: 200px;
+  height: 100px;
+  background: crimson;
+  border-radius: 50%;
+  margin: 30px auto;
+  text-align: center;
+  line-height: 100px;
+  font-weight: bold;
+}
+#container {
+  margin: 0 auto;
+  width: 322px;
+}
+td,th {
+  width: 60px;
+  height: 45px;
+}
+td {
+  background-color: burlywood;
+  text-align: center;
+  border-radius: 50%;
+}
+th {
+  color: rgb(9, 255, 0);
+  font-size: 22px;
+}
+```