使用HTML + CSS + JS,編寫一個臺球追分計分器

目錄

一.代碼

二.效果展示

三.該計分器的優點


一.代碼

<!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)。

喜歡本篇文章的話,可以留個免費的關注呦~~

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/76022.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/76022.shtml
英文地址,請注明出處:http://en.pswp.cn/web/76022.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

LLM小白自學筆記:1.兩種指令微調

一、LoRA 簡單來說&#xff0c;LoRA不直接調整個大模型的全部參數&#xff08;那樣太費資源&#xff09;&#xff0c;而是在模型的某些層&#xff08;通常是注意力層&#xff09;加個“旁路”——兩個小的矩陣&#xff08;低秩矩陣&#xff09;。訓練時只更新這倆小矩陣&#x…

2026《數據結構》考研復習筆記一(C++基礎知識)

C基礎知識復習 一、數據類型二、修飾符和運算符三、Lambda函數和表達式四、數學函數五、字符串六、結構體 一、數據類型 1.1基本類型 基本類型 描述 字節&#xff08;位數&#xff09; 范圍 char 字符類型&#xff0c;存儲ASCLL字符 1&#xff08;8位&#xff09; -128…

基于骨骼識別的危險動作報警分析系統

基于骨骼識別的危險動作報警分析系統 【包含內容】 【一】項目提供完整源代碼及詳細注釋 【二】系統設計思路與實現說明 【三】基于骨骼識別算法的實時危險行為預警方案 【技術棧】 ①&#xff1a;系統環境&#xff1a;Windows 10/11、macOS Ventura、Ubuntu 20.04 ②&#x…

【雙指針】四數之和(medium)

四數之和&#xff08;medium&#xff09; 題?描述&#xff1a;解法&#xff08;排序 雙指針&#xff09;算法思路&#xff1a; C 算法代碼&#xff1a;Java 算法代碼&#xff1a; 題?鏈接&#xff1a;18. 四數之和 題?描述&#xff1a; 給你?個由 n 個整數組成的數組 num…

Flask+Influxdb+grafna構建電腦性能實時監控系統

Influx下載地址&#xff0c;這里下載了以下版本influxdb-1.8.5_windows_amd64.zip 運行前需要先啟動Influx數據庫&#xff1a; 管理員方式運行cmd->F:->cd F:\influxdb\influxdb-1.8.5-1->influxd -config influxdb.conf&#xff0c;以influxdb.conf配置文件啟動數…

如何在Keil中配置國民技術N32G系列MCU開發環境

如何在Keil及Jlink中搭建國民技術N32G系列MCU開發環境 根據自己的MCU型號&#xff08;我這里的型號是N32G452REL7&#xff09;訪問國民技術官網&#xff0c;依次從N32G通用MCU-技術資源-固件和軟件-軟件開發套件&#xff0c;獲取對應MCU型號的SDK&#xff0c;也可點擊這里從網盤…

微軟承認Win11出現極端錯誤,只能強制關機或重裝系統

最近&#xff0c;不少使用 Windows 11 的用戶反映&#xff0c;在系統更新后&#xff0c;“Windows Hello”突然失效&#xff0c;原本便捷的人臉識別和PIN登錄功能統統無法使用。更糟的是&#xff0c;有人在重置系統后直接被擋在系統門外&#xff0c;這讓人不禁發問&#xff1a;…

【android bluetooth 協議分析 02】【bluetooth hal 層詳解 1】【uart 介紹】

一、什么是 UART&#xff1f; UART&#xff08;Universal Asynchronous Receiver/Transmitter&#xff09; 是一種 串行通信協議&#xff0c;它的特點是通信時不需要專門的時鐘信號&#xff08;叫做“異步”通信&#xff09;&#xff0c;常用于兩個設備之間的簡單數據通信&…

天元證券|奶粉行業結構性回暖 乳企競速全齡化、國際化

在過去幾年中&#xff0c;中國嬰配粉市場經歷了量價齊增&#xff0c;量減價增&#xff0c;量減價減的三個周期。歷經多年行業深度洗牌與競爭格局重塑&#xff0c;2024年中國嬰配粉市場回暖態勢愈發清晰可辨。 日前&#xff0c;包括中國飛鶴、澳優、健合集團在內的多家奶粉股披露…

第3.1節 調用鏈路分析簡介

調用鏈路&#xff08;Call Chain / Call Path&#xff09; 是程序在執行過程中&#xff0c;按照調用順序形成的函數、模塊或組件之間的依賴關系鏈條&#xff0c;完整記錄了從程序入口到當前執行點的動態調用路徑。它反映了代碼執行的邏輯流程&#xff0c;是分析程序行為、調試問…

System.Security.Cryptography.CryptographicException“填充無效,無法被移除。”

這個異常通常發生在以下幾種情況&#xff1a; 1.密文損壞&#xff1a;密文在傳輸或存儲過程中被篡改或損壞。 2.密鑰不匹配&#xff1a;用于解密的密鑰與加密時使用的密鑰不同。 3.填充模式不匹配&#xff1a;加密時使用的填充模式與解密時指定的填充模式不一致。 4.使用了不正…

【網絡入侵檢測】Suricata之數據包內容匹配

【作者主頁】只道當時是尋常 【專欄介紹】入侵檢測。專注網絡、主機安全&#xff0c;歡迎關注與評論。 1. 概要 本文詳細介紹了網絡入侵檢測系統&#xff08;如 Suricata&#xff09;中用于檢查數據包或流有效載荷的 Payload 關鍵字。content 用于匹配數據包內容&#xff0c;默…

Spring Boot 整合 Redis 實現點贊功能:從基礎到實踐

在當今互聯網應用開發中&#xff0c;點贊功能幾乎成為了各類內容平臺的標配。它不僅能增加用戶與內容之間的互動&#xff0c;還能直觀地反映內容的受歡迎程度。本文將詳細介紹如何使用 Spring Boot 整合 Redis 來實現一個簡單的文章點贊功能&#xff0c;讓你輕松掌握這一實用技…

openGauss DataVec + Dify,快速搭建你的智能助手平臺

在當今數字化和智能化的時代&#xff0c;大語言模型&#xff08;LLM&#xff09;的應用正以前所未有的速度改變著各個領域的工作方式和用戶體驗。Dify 作為一個開源的大語言模型應用開發平臺&#xff0c;為開發者們提供了便捷且強大的工具&#xff0c;助力構建從基礎智能體到復…

OpenLayers:extent與view extent 介紹

一、范圍的概念 1.什么是范圍&#xff1f; 在Openlayers中范圍&#xff08;Extent&#xff09;是用于表示地理空間區域的一種概念。它通常由一個數字數組構成&#xff0c;數組中的內容為&#xff1a;[最小x坐標&#xff0c;最小y坐標&#xff0c;最大x坐標&#xff0c;最大y坐…

can‘t set boot order in virtualbox

Boot order setting is ignored if UEFI is enabled https://forums.virtualbox.org/viewtopic.php?t99121 如果勾選EFI boot order就是灰色的 傳統BIOS就是可選的 然后選中任意介質&#xff0c;通過右邊的上下箭頭調節順序&#xff0c;最上面的應該是優先級最高的 然后就…

如何在 Kali 上解決使用 evil-winrm 時 Ruby Reline 的 quoting_detection_proc 警告

在使用 Kali Linux 運行 Ruby 工具&#xff08;例如 evil-winrm&#xff09;時&#xff0c;你可能會遇到以下警告&#xff1a; Warning: Remote path completions is disabled due to ruby limitation: undefined method quoting_detection_proc for module Reline這個警告會導…

工資管理系統的主要功能有哪些

工資管理系統通過自動化薪資計算、稅務處理、員工數據管理、報表生成等功能&#xff0c;極大地提升了薪資發放的效率和準確性。在傳統的人工薪資管理中&#xff0c;HR人員需要手動計算每位員工的薪資&#xff0c;并確保符合稅務要求&#xff0c;極易出錯且耗時。而現代工資管理…

C++語言程序設計——02 變量與數據類型

目錄 一、變量與數據類型&#xff08;一&#xff09;變量的數據類型&#xff08;二&#xff09;變量命名規則&#xff08;三&#xff09;定義變量&#xff08;四&#xff09;變量賦值&#xff08;五&#xff09;查看數據類型&#xff08;六&#xff09;數據類型的字節長度&…

咋用fliki的AI生成各類視頻?AI生成視頻教程

最近想制作視頻&#xff0c;多方考查了決定用fliki&#xff0c;于是訂閱了一年試試&#xff0c;這個AI生成的視頻效果來看真是不錯&#xff0c;感興趣的自己官網注冊個賬號體驗一下就知道了。 fliki官網 Fliki生成視頻教程 創建賬戶并登錄 首先&#xff0c;訪問fliki官網并注…