目錄
一.代碼
二.效果展示
三.該計分器的優點
一.代碼
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>橫屏頁面</title><style>/* 豎屏時強制橫屏 */@media screen and (orientation: portrait) {html,body {width: 100vh;/* 高度作為寬度 */height: 100vw;/* 寬度作為高度 */transform: rotate(90deg);transform-origin: left top;overflow-x: hidden;position: absolute;top: 100%;left: 0;}}</style>
</head><body><!-- <h1>橫屏頁面</h1><p>請將手機旋轉為橫屏以查看內容。</p> --><div style="background-color: white;height:200px;width:400px;"><!-- 選手1的操作面板 --><div style="display: inline-block;background-color: blue;height:200px;width:198px;"><!-- 國籍 + 選手姓名 --><div style="width: 100%;height: 50px;background-color: #143A85;display: flex;justify-content: center;align-items: center;"><img src="./img/國旗.png" style="width:30px;display: block;"><span style="font-family: KaiTi, STKaiti, serif;color:#FFFFF0" id="player1Name">選手1</span></div><!-- 得分 --><div style="width: 100%;height: 100px;background-color: #030303;font-size: 70px;color:white;text-align: center;"id="score_person1">0</div><!-- 操作按鈕 --><div style="width: 100%;height: 50px;background-color: #143A85;"><!-- <span style="color:#FFFFF0">普勝</span><span>大金</span><span>小金</span><span>黃金九</span><span>犯規</span> --><!-- 按鈕組 --><span style="display: inline-block;margin-top: 10px;height:30px;width:36px;cursor: pointer;" id="pusheng_1"><span style="display: block;width:100%;height: 18px;text-align: center;font-size: 14px;color:#FFFFF0" id="pusheng_person1">0</span><span style="display: block;height: 12px;width: 100%;font-size: 8px;color:#FFFFF0;text-align: center;">普勝</span></span><span style="display: inline-block;margin-top: 10px;height:30px;width:36px;cursor: pointer;" id="dajin_1"><span style="display: block;width:100%;height: 18px;text-align: center;font-size: 14px;color:#FFFFF0" id="dajin_person1">0</span><span style="display: block;height: 12px;width: 100%;font-size: 8px;color:#FFFFF0;text-align: center;">大金</span></span><span style="display: inline-block;margin-top: 10px;height:30px;width:36px;cursor: pointer;" id="xiaojin_1"><span style="display: block;width:100%;height: 18px;text-align: center;font-size: 14px;color:#FFFFF0" id="xiaojin_person1">0</span><span style="display: block;height: 12px;width: 100%;font-size: 8px;color:#FFFFF0;text-align: center;">小金</span></span><span style="display: inline-block;margin-top: 10px;height:30px;width:36px;cursor: pointer;" id="jinjiu_1"><span style="display: block;width:100%;height: 18px;text-align: center;font-size: 14px;color:#FFFFF0" id="jinjiu_person1">0</span><span style="display: block;height: 12px;width: 100%;font-size: 8px;color:#FFFFF0;text-align: center;">黃金九</span></span><span style="display: inline-block;margin-top: 10px;height:30px;width:36px;cursor: pointer;" id="fangui_1"><span style="display: block;width:100%;height: 18px;text-align: center;font-size: 14px;color:#FFFFF0" id="fangui_person1">0</span><span style="display: block;height: 12px;width: 100%;font-size: 8px;color:#FFFFF0;text-align: center;">犯規</span></span></div></div><!-- 選手的操作面板 --><div style="display: inline-block;background-color: blue;height:200px;width:198px;"><!-- 國籍 + 選手姓名 --><div style="width: 100%;height: 50px;background-color: #143A85;display: flex;justify-content: center;align-items: center;"><img src="./img/國旗.png" style="width:30px;display: block;"><span style="font-family: KaiTi, STKaiti, serif;display: block;color:#FFFFF0" id="player2Name">選手2</span></div><!-- 得分 --><div style="width: 100%;height: 100px;background-color: #030303;font-size: 70px;color:white;text-align: center;" id="score_person2">0</div><!-- 操作按鈕 --><div style="width: 100%;height: 50px;background-color: #143A85;"><span style="display: inline-block;margin-top: 10px;height:30px;width:36px;cursor: pointer;" id="pusheng_2"><span style="display: block;width:100%;height: 18px;text-align: center;font-size: 14px;color:#FFFFF0" id="pusheng_person2">0</span><span style="display: block;height: 12px;width: 100%;font-size: 8px;color:#FFFFF0;text-align: center;">普勝</span></span><span style="display: inline-block;margin-top: 10px;height:30px;width:36px;cursor: pointer;" id="dajin_2"><span style="display: block;width:100%;height: 18px;text-align: center;font-size: 14px;color:#FFFFF0" id="dajin_person2">0</span><span style="display: block;height: 12px;width: 100%;font-size: 8px;color:#FFFFF0;text-align: center;">大金</span></span><span style="display: inline-block;margin-top: 10px;height:30px;width:36px;cursor: pointer;" id="xiaojin_2"><span style="display: block;width:100%;height: 18px;text-align: center;font-size: 14px;color:#FFFFF0" id="xiaojin_person2">0</span><span style="display: block;height: 12px;width: 100%;font-size: 8px;color:#FFFFF0;text-align: center;">小金</span></span><span style="display: inline-block;margin-top: 10px;height:30px;width:36px;cursor: pointer;" id="jinjiu_2"><span style="display: block;width:100%;height: 18px;text-align: center;font-size: 14px;color:#FFFFF0" id="jinjiu_person2">0</span><span style="display: block;height: 12px;width: 100%;font-size: 8px;color:#FFFFF0;text-align: center;">黃金九</span></span><span style="display: inline-block;margin-top: 10px;height:30px;width:36px;cursor: pointer;" id="fangui_2"><span style="display: block;width:100%;height: 18px;text-align: center;font-size: 14px;color:#FFFFF0" id="fangui_person2">0</span><span style="display: block;height: 12px;width: 100%;font-size: 8px;color:#FFFFF0;text-align: center;">犯規</span></span></div></div></div><button onclick="showInputFields()">設置</button><!-- 輸入選手姓名的提交單(默認隱藏) --><div id="inputFields" style="display:none;"><label for="player1">選手1姓名:</label><input type="text" id="player1"><br><br><label for="player2">選手2姓名:</label><input type="text" id="player2"><br><br><button onclick="assignNames()">提交</button></div>
</body>
<script>//選手1的分數let score_1 = 0;//選手2的分數let score_2 = 0;//選手1獲得的各種球形數量let pusheng_sum_1 = 0;let dajin_sum_1 = 0;let xiaojin_sum_1 = 0;let jinjiu_sum_1 = 0;let fangui_sum_1 = 0;//選手2獲得的各種球形數量let pusheng_sum_2 = 0;let dajin_sum_2 = 0;let xiaojin_sum_2 = 0;let jinjiu_sum_2 = 0;let fangui_sum_2 = 0;//初始化頁面時,設置兩位選手的分數為0let score_person1 = document.getElementById("score_person1");score_person1.innerText = score_1;let score_person2 = document.getElementById("score_person2");score_person2.innerText = score_2;//初始化頁面時,設置兩位選手的各種球形數量/* 選手1 */let pusheng_person1 = document.getElementById("pusheng_person1");pusheng_person1.innerText = pusheng_sum_1;let dajin_person1 = document.getElementById("dajin_person1");dajin_person1.innerText = dajin_sum_1;let xiaojin_person1 = document.getElementById("xiaojin_person1");xiaojin_person1.innerText = xiaojin_sum_1;let jinjiu_person1 = document.getElementById("jinjiu_person1");jinjiu_person1.innerText = jinjiu_sum_1;let fangui_person1 = document.getElementById("fangui_person1");fangui_person1.innerText = fangui_sum_1;/* 選手2 */let pusheng_person2 = document.getElementById("pusheng_person2");pusheng_person2.innerText = pusheng_sum_2;let dajin_person2 = document.getElementById("dajin_person2");dajin_person2.innerText = dajin_sum_2;let xiaojin_person2 = document.getElementById("xiaojin_person2");xiaojin_person2.innerText = xiaojin_sum_2;let jinjiu_person2 = document.getElementById("jinjiu_person2");jinjiu_person2.innerText = jinjiu_sum_2;let fangui_person2 = document.getElementById("fangui_person2");fangui_person2.innerText = fangui_sum_2;//點擊【選手1】的按鈕//點擊【普勝】var pusheng_1 = document.getElementById("pusheng_1");pusheng_1.addEventListener('click', function() {//將選手1的分數+4score_1 += 4;//更新選手1的記分牌score_person1.innerText = score_1;//將選手2的分數-4score_2 -= 4;//更新選手2的記分牌score_person2.innerText = score_2;//將選手的普勝數量+1pusheng_sum_1 +=1;//更新選手1的普勝數pusheng_person1.innerText = pusheng_sum_1;})//點擊【大金】var dajin_1 = document.getElementById("dajin_1");dajin_1.addEventListener('click', function () {//將選手1的分數+10score_1 += 10;//更新選手1的記分牌score_person1.innerText = score_1;//將選手2的分數-10score_2 -= 10;//更新選手2的記分牌score_person2.innerText = score_2;//將選手的大金數量+1dajin_sum_1 += 1;//更新選手1的大金數dajin_person1.innerText = dajin_sum_1;})//點擊【小金】var xiaojin_1 = document.getElementById("xiaojin_1");xiaojin_1.addEventListener('click', function () {//將選手1的分數+7score_1 += 7;//更新選手1的記分牌score_person1.innerText = score_1;//將選手2的分數-7score_2 -= 7;//更新選手2的記分牌score_person2.innerText = score_2;//將選手的小金數量+1xiaojin_sum_1 += 1;//更新選手1的小金數xiaojin_person1.innerText = xiaojin_sum_1;})//點擊【黃金九】var jinjiu_1 = document.getElementById("jinjiu_1");jinjiu_1.addEventListener('click', function () {//將選手1的分數+4score_1 += 4;//更新選手1的記分牌score_person1.innerText = score_1;//將選手2的分數-4score_2 -= 4;//更新選手2的記分牌score_person2.innerText = score_2;//將選手的黃金九數量+1jinjiu_sum_1 += 1;//更新選手1的黃金九數jinjiu_person1.innerText = jinjiu_sum_1;})//點擊【犯規】var fangui_1 = document.getElementById("fangui_1");fangui_1.addEventListener('click', function() {//將選手1的分數-1score_1 -= 1;//更新選手1的記分牌score_person1.innerText = score_1;//將選手2的分數+1score_2 += 1;//更新選手2的記分牌score_person2.innerText = score_2;//將選手的犯規數量+1fangui_sum_1 += 1;//更新選手1的犯規數fangui_person1.innerText = fangui_sum_1;})//點擊【選手2】的按鈕//點擊【普勝】var pusheng_2 = document.getElementById("pusheng_2");pusheng_2.addEventListener('click', function () {//將選手2的分數+4score_2 += 4;//更新選手2的記分牌score_person2.innerText = score_2;//將選手1的分數-4score_1 -= 4;//更新選手1的記分牌score_person1.innerText = score_1;//將選手的普勝數量+1pusheng_sum_2 += 1;//更新選手2的普勝數pusheng_person2.innerText = pusheng_sum_2;})//點擊【大金】var dajin_2 = document.getElementById("dajin_2");dajin_2.addEventListener('click', function () {//將選手2的分數+10score_2 += 10;//更新選手2的記分牌score_person2.innerText = score_2;//將選手1的分數-10score_1 -= 10;//更新選手1的記分牌score_person1.innerText = score_1;//將選手的大金數量+1dajin_sum_2 += 1;//更新選手2的大金數dajin_person2.innerText = dajin_sum_2;})//點擊【小金】var xiaojin_2 = document.getElementById("xiaojin_2");xiaojin_2.addEventListener('click', function () {//將選手2的分數+7score_2 += 7;//更新選手2的記分牌score_person2.innerText = score_2;//將選手1的分數-7score_1 -= 7;//更新選手1的記分牌score_person1.innerText = score_1;//將選手的小金數量+1xiaojin_sum_2 += 1;//更新選手2的小金數xiaojin_person2.innerText = xiaojin_sum_2;})//點擊【黃金九】var jinjiu_2 = document.getElementById("jinjiu_2");jinjiu_2.addEventListener('click', function () {//將選手2的分數+4score_2 += 4;//更新選手2的記分牌score_person2.innerText = score_2;//將選手1的分數-4score_1 -= 4;//更新選手1的記分牌score_person1.innerText = score_1;//將選手的黃金九數量+1jinjiu_sum_2 += 1;//更新選手2的黃金九數量jinjiu_person2.innerText = jinjiu_sum_2;})//點擊【犯規】var fangui_2 = document.getElementById("fangui_2");fangui_2.addEventListener('click', function () {//將選手2的分數-1score_2 -= 1;//更新選手2的記分牌score_person2.innerText = score_2;//將選手1的分數+1score_1 += 1;//更新選手1的記分牌score_person1.innerText = score_1;//將選手的犯規數量+1fangui_sum_2 += 1;//更新選手2的犯規數量fangui_person2.innerText = fangui_sum_2;})//自定義選手姓名function showInputFields() {// 顯示輸入框document.getElementById('inputFields').style.display = 'block';}//設置選手姓名的輸入表單function assignNames() {// 獲取輸入框的值const player1 = document.getElementById('player1').value;const player2 = document.getElementById('player2').value;// 將值賦值給span元素document.getElementById('player1Name').textContent = player1;document.getElementById('player2Name').textContent = player2;// 隱藏輸入框document.getElementById('inputFields').style.display = 'none';}
</script></html>
二.效果展示
使用步驟如下:
①設置兩位選手的姓名:
②然后就可以根據兩位選手的比賽情況,進行分數設置。
? ? 比分制度采用14710制。
? ? 即:犯規=減1分、普勝=4分、小金=7分、大金=10分、黃金九=4分。
點擊兩位選手的不同按鈕,進行加分、減分。
三.該計分器的優點
????????優點如下:
????????①采用水上、水下制,即:兩個選手的分數之和永遠為0。這樣一眼就能看出來誰水上、水下多少分。
? ? ????????舉例:上圖中,選手【秦利文】分數為6,代表水上6分;選手【617】分數為-6,代表水下6分。
????????②兩位選手的每種球形(如:普勝、大金、小金等)數量都可以記錄下來,方便比賽結束后復盤自己的發揮情況,從而后期針對性彌補自己的缺點。
? ? ? ? ③該計分器界面美觀,比賽結束后可以截圖分享朋友圈。?
? ? ? ? ④可以在手機瀏覽器運行該html文件,橫屏運行的界面也十分美觀。如下:
?
結語
以上就是該比賽計分器的實現,界面美觀,代碼只涉及純前端三劍客(HTML、CSS、JS)。
喜歡本篇文章的話,可以留個免費的關注呦~~