当前位置：首页 > news >正文

使用HTML + CSS + JS，编写一个台球追分计分器

news 来源：原创 2025/6/23 12:18:50

一.代码

二.效果展示

三.该计分器的优点

一.代码

<!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文件，横屏运行的界面也十分美观。如下：