将棋対戦成績表
日付を入力してください:
先手の名前を入力してください:
後手の名前を入力してください:
先手の成績を入力してください:
後手の成績を入力してください:
対局場所を入力してください:
成績表
日付 | 先手 | 後手 | 成績 | 対局場所(Google map) |
---|---|---|---|---|
通算勝率 |
以下が、JavaScriptを使用して実装したプログラムです。 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>将棋対戦成績表</title> </head> <body> <h1>将棋対戦成績表</h1> <p>日付を入力してください:<input type="text" id="date"></p> <p>先手の名前を入力してください:<input type="text" id="sente"></p> <p>後手の名前を入力してください:<input type="text" id="gote"></p> <p>先手の成績を入力してください:<input type="text" id="senteRecord"></p> <p>後手の成績を入力してください:<input type="text" id="goteRecord"></p> <p>対局場所を入力してください:<input type="text" id="place"></p> <button onclick="addRecord()">成績を追加する</button> <h2>成績表</h2> <table> <thead> <tr> <th>日付</th> <th>先手</th> <th>後手</th> <th>成績</th> <th>対局場所(Google map)</th> </tr> </thead> <tbody id="recordList"> </tbody> <tfoot> <tr> <td colspan="3">通算勝率</td> <td id="totalRecord"></td> <td></td> </tr> </tfoot> </table> <script> let records = []; function addRecord() { const date = document.getElementById("date").value; const sente = document.getElementById("sente").value; const gote = document.getElementById("gote").value; const senteRecord = document.getElementById("senteRecord").value; const goteRecord = document.getElementById("goteRecord").value; const place = document.getElementById("place").value; if (date === "" || sente === "" || gote === "" || senteRecord === "" || goteRecord === "" || place === "") { alert("全ての項目を入力してください!"); return; } const record = { date: date, sente: sente, gote: gote, senteRecord: senteRecord, goteRecord: goteRecord, place: place }; records.push(record); displayRecords(); } function displayRecords() { const recordList = document.getElementById("recordList"); recordList.innerHTML = ""; let totalSenteWinCount = 0; let totalGoteWinCount = 0; for (let i = 0; i < records.length; i++) { const record = records[i]; const senteWinCount = record.senteRecord.match(/(\d+)勝/)[1]; const goteWinCount = record.goteRecord.match(/(\d+)勝/)[1]; const senteLoseCount = record.senteRecord.match(/(\d+)敗/)[1]; const goteLoseCount = record.goteRecord.match(/(\d+)敗/)[1]; const senteDrawCount = record.senteRecord.match(/(\d+)引き分け/)[1]; const goteDrawCount = record.goteRecord.match(/(\d+)引き分け/)[1]; totalSenteWinCount += parseInt(senteWinCount); totalGoteWinCount += parseInt(goteWinCount); const tr = document.createElement("tr"); tr.innerHTML = ` <td>${record.date}</td> <td>${record.sente}</td> <td>${record.gote}</td> <td>${senteWinCount}勝${senteLoseCount}敗${senteDrawCount}引き分け-${goteWinCount}勝${goteLoseCount}敗${goteDrawCount}引き分け</td> <td><a href="https://www.google.com/maps?q=${record.place}" target="_blank">${record.place}</a></td> `; recordList.appendChild(tr); } const totalSenteCount = totalSenteWinCount + totalGoteWinCount; const totalGoteCount = records.length * 2 - totalSenteCount; const totalSenteWinRate = Math.round(totalSenteWinCount / totalSenteCount * 100 * 10) / 10; const totalGoteWinRate = Math.round(totalGoteWinCount / totalGoteCount * 100 * 10) / 10; const totalRecord = `${totalSenteWinRate}% - ${totalGoteWinRate}%`; document.getElementById("totalRecord").textContent = totalRecord; } </script> </body> </html> ``` このプログラムでは、先手と後手の勝敗と引き分けの回数から成績を算出し、通算勝率を表示します。また、Googleマップへのリンクも表示することができます。全ての項目を入力すると、成績表に追加することができます。