使用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.mzph.cn/web/76022.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

LLM小白自学笔记：1.两种指令微调

LLM小白自学笔记：1.两种指令微调

一、LoRA 简单来说&#xff0c;LoRA不直接调整个大模型的全部参数&#xff08;那样太费资源&#xff09;&#xff0c;而是在模型的某些层&#xff08;通常是注意力层&#xff09;加个“旁路”——两个小的矩阵&#xff08;低秩矩阵&#xff09;。训练时只更新这俩小矩阵&#x…
阅读更多...
2026《数据结构》考研复习笔记一（C++基础知识）

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）

【双指针】四数之和（medium）

四数之和&#xff08;medium&#xff09; 题⽬描述&#xff1a;解法&#xff08;排序 双指针&#xff09;算法思路&#xff1a; C 算法代码&#xff1a;Java 算法代码&#xff1a; 题⽬链接&#xff1a;18. 四数之和 题⽬描述&#xff1a; 给你⼀个由 n 个整数组成的数组 num…
阅读更多...
Flask+Influxdb+grafna构建电脑性能实时监控系统

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中配置国民技术N32G系列MCU开发环境

如何在Keil及Jlink中搭建国民技术N32G系列MCU开发环境 根据自己的MCU型号&#xff08;我这里的型号是N32G452REL7&#xff09;访问国民技术官网&#xff0c;依次从N32G通用MCU-技术资源-固件和软件-软件开发套件&#xff0c;获取对应MCU型号的SDK&#xff0c;也可点击这里从网盘…
阅读更多...
微软承认Win11出现极端错误，只能强制关机或重装系统

微软承认Win11出现极端错误，只能强制关机或重装系统

最近&#xff0c;不少使用 Windows 11 的用户反映&#xff0c;在系统更新后&#xff0c;“Windows Hello”突然失效&#xff0c;原本便捷的人脸识别和PIN登录功能统统无法使用。更糟的是&#xff0c;有人在重置系统后直接被挡在系统门外&#xff0c;这让人不禁发问&#xff1a;…
阅读更多...
【android bluetooth 协议分析 02】【bluetooth hal 层详解 1】【uart 介绍】

【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节 调用链路分析简介

第3.1节 调用链路分析简介

调用链路&#xff08;Call Chain / Call Path&#xff09; 是程序在执行过程中&#xff0c;按照调用顺序形成的函数、模块或组件之间的依赖关系链条&#xff0c;完整记录了从程序入口到当前执行点的动态调用路径。它反映了代码执行的逻辑流程&#xff0c;是分析程序行为、调试问…
阅读更多...
System.Security.Cryptography.CryptographicException“填充无效，无法被移除。”

System.Security.Cryptography.CryptographicException“填充无效，无法被移除。”

这个异常通常发生在以下几种情况&#xff1a; 1.密文损坏&#xff1a;密文在传输或存储过程中被篡改或损坏。 2.密钥不匹配&#xff1a;用于解密的密钥与加密时使用的密钥不同。 3.填充模式不匹配&#xff1a;加密时使用的填充模式与解密时指定的填充模式不一致。 4.使用了不正…
阅读更多...
【网络入侵检测】Suricata之数据包内容匹配

【网络入侵检测】Suricata之数据包内容匹配

【作者主页】只道当时是寻常 【专栏介绍】入侵检测。专注网络、主机安全&#xff0c;欢迎关注与评论。 1. 概要 本文详细介绍了网络入侵检测系统&#xff08;如 Suricata&#xff09;中用于检查数据包或流有效载荷的 Payload 关键字。content 用于匹配数据包内容&#xff0c;默…
阅读更多...
Spring Boot 整合 Redis 实现点赞功能：从基础到实践

Spring Boot 整合 Redis 实现点赞功能：从基础到实践

在当今互联网应用开发中&#xff0c;点赞功能几乎成为了各类内容平台的标配。它不仅能增加用户与内容之间的互动&#xff0c;还能直观地反映内容的受欢迎程度。本文将详细介绍如何使用 Spring Boot 整合 Redis 来实现一个简单的文章点赞功能&#xff0c;让你轻松掌握这一实用技…
阅读更多...
openGauss DataVec + Dify，快速搭建你的智能助手平台

openGauss DataVec + Dify，快速搭建你的智能助手平台

在当今数字化和智能化的时代&#xff0c;大语言模型&#xff08;LLM&#xff09;的应用正以前所未有的速度改变着各个领域的工作方式和用户体验。Dify 作为一个开源的大语言模型应用开发平台&#xff0c;为开发者们提供了便捷且强大的工具&#xff0c;助力构建从基础智能体到复…
阅读更多...
OpenLayers：extent与view extent 介绍

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

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 上解决使用 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 变量与数据类型

C++语言程序设计——02 变量与数据类型

目录 一、变量与数据类型&#xff08;一&#xff09;变量的数据类型&#xff08;二&#xff09;变量命名规则&#xff08;三&#xff09;定义变量&#xff08;四&#xff09;变量赋值&#xff08;五&#xff09;查看数据类型&#xff08;六&#xff09;数据类型的字节长度&…
阅读更多...
咋用fliki的AI生成各类视频？AI生成视频教程

咋用fliki的AI生成各类视频？AI生成视频教程

最近想制作视频&#xff0c;多方考查了决定用fliki&#xff0c;于是订阅了一年试试&#xff0c;这个AI生成的视频效果来看真是不错&#xff0c;感兴趣的自己官网注册个账号体验一下就知道了。 fliki官网 Fliki生成视频教程 创建账户并登录 首先&#xff0c;访问fliki官网并注…
阅读更多...
最新文章

Copyright @ 2022~2023