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

雪碧聊技术2025-04-22 11:08

目录

一.代码

二.效果展示

三.该计分器的优点

一.代码

html 复制代码 
<!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;

    
    //初始化页面时，设置两位选手的分数为0
    let 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的分数+4
        score_1 += 4;
        //更新选手1的记分牌
        score_person1.innerText = score_1;
        //将选手2的分数-4
        score_2 -= 4;
        //更新选手2的记分牌
        score_person2.innerText = score_2;
        //将选手的普胜数量+1
        pusheng_sum_1 +=1;
        //更新选手1的普胜数
        pusheng_person1.innerText = pusheng_sum_1;
    })
    //点击【大金】
    var dajin_1 = document.getElementById("dajin_1");
    dajin_1.addEventListener('click', function () {
        //将选手1的分数+10
        score_1 += 10;
        //更新选手1的记分牌
        score_person1.innerText = score_1;
        //将选手2的分数-10
        score_2 -= 10;
        //更新选手2的记分牌
        score_person2.innerText = score_2;
        //将选手的大金数量+1
        dajin_sum_1 += 1;
        //更新选手1的大金数
        dajin_person1.innerText = dajin_sum_1;
        
    })
    //点击【小金】
    var xiaojin_1 = document.getElementById("xiaojin_1");
    xiaojin_1.addEventListener('click', function () {
        //将选手1的分数+7
        score_1 += 7;
        //更新选手1的记分牌
        score_person1.innerText = score_1;
        //将选手2的分数-7
        score_2 -= 7;
        //更新选手2的记分牌
        score_person2.innerText = score_2;
        //将选手的小金数量+1
        xiaojin_sum_1 += 1;
        //更新选手1的小金数
        xiaojin_person1.innerText = xiaojin_sum_1;
    })
    //点击【黄金九】
    var jinjiu_1 = document.getElementById("jinjiu_1");
    jinjiu_1.addEventListener('click', function () {
        //将选手1的分数+4
        score_1 += 4;
        //更新选手1的记分牌
        score_person1.innerText = score_1;
        //将选手2的分数-4
        score_2 -= 4;
        //更新选手2的记分牌
        score_person2.innerText = score_2;
        //将选手的黄金九数量+1
        jinjiu_sum_1 += 1;
        //更新选手1的黄金九数
        jinjiu_person1.innerText = jinjiu_sum_1;
    })
    //点击【犯规】
    var fangui_1 = document.getElementById("fangui_1");
    fangui_1.addEventListener('click', function() {
        //将选手1的分数-1
        score_1 -= 1;
        //更新选手1的记分牌
        score_person1.innerText = score_1;
        //将选手2的分数+1
        score_2 += 1;
        //更新选手2的记分牌
        score_person2.innerText = score_2;
        //将选手的犯规数量+1
        fangui_sum_1 += 1;
        //更新选手1的犯规数
        fangui_person1.innerText = fangui_sum_1;
    })




    //点击【选手2】的按钮
    //点击【普胜】
    var pusheng_2 = document.getElementById("pusheng_2");
    pusheng_2.addEventListener('click', function () {
        //将选手2的分数+4
        score_2 += 4;
        //更新选手2的记分牌
        score_person2.innerText = score_2;
        //将选手1的分数-4
        score_1 -= 4;
        //更新选手1的记分牌
        score_person1.innerText = score_1;
        //将选手的普胜数量+1
        pusheng_sum_2 += 1;
        //更新选手2的普胜数
        pusheng_person2.innerText = pusheng_sum_2;
    })
    //点击【大金】
    var dajin_2 = document.getElementById("dajin_2");
    dajin_2.addEventListener('click', function () {
        //将选手2的分数+10
        score_2 += 10;
        //更新选手2的记分牌
        score_person2.innerText = score_2;
        //将选手1的分数-10
        score_1 -= 10;
        //更新选手1的记分牌
        score_person1.innerText = score_1;
        //将选手的大金数量+1
        dajin_sum_2 += 1;
        //更新选手2的大金数
        dajin_person2.innerText = dajin_sum_2;
    })
    //点击【小金】
    var xiaojin_2 = document.getElementById("xiaojin_2");
    xiaojin_2.addEventListener('click', function () {
        //将选手2的分数+7
        score_2 += 7;
        //更新选手2的记分牌
        score_person2.innerText = score_2;
        //将选手1的分数-7
        score_1 -= 7;
        //更新选手1的记分牌
        score_person1.innerText = score_1;
        //将选手的小金数量+1
        xiaojin_sum_2 += 1;
        //更新选手2的小金数
        xiaojin_person2.innerText = xiaojin_sum_2;
    })
    //点击【黄金九】
    var jinjiu_2 = document.getElementById("jinjiu_2");
    jinjiu_2.addEventListener('click', function () {
        //将选手2的分数+4
        score_2 += 4;
        //更新选手2的记分牌
        score_person2.innerText = score_2;
        //将选手1的分数-4
        score_1 -= 4;
        //更新选手1的记分牌
        score_person1.innerText = score_1;
        //将选手的黄金九数量+1
        jinjiu_sum_2 += 1;
        //更新选手2的黄金九数量
        jinjiu_person2.innerText = jinjiu_sum_2;
    })
    //点击【犯规】
    var fangui_2 = document.getElementById("fangui_2");
    fangui_2.addEventListener('click', function () {
        //将选手2的分数-1
        score_2 -= 1;
        //更新选手2的记分牌
        score_person2.innerText = score_2;
        //将选手1的分数+1
        score_1 += 1;
        //更新选手1的记分牌
        score_person1.innerText = score_1;
        //将选手的犯规数量+1
        fangui_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）。

喜欢本篇文章的话，可以留个免费的关注呦~~

相关推荐
独立开阀者_FwtCoder12 分钟前
# 一天 Star 破万的开源项目「GitHub 热点速览」
前端·javascript·面试
天天扭码22 分钟前
前端进阶 | 面试必考—— JavaScript手写定时器
前端·javascript·面试
梦雨生生39 分钟前
拖拉拽效果加点击事件
前端·javascript·css
前端Hardy41 分钟前
HTML&CSS：全网最全的代码时钟效果
javascript·css·html
前端Hardy1 小时前
HTML&CSS：看这里，动态背景卡片效果
javascript·css·html
前端Hardy1 小时前
第2课：变量与数据类型——JS的“记忆盒子”
前端·javascript
前端Hardy1 小时前
第1课：初识JavaScript——让你的网页“动”起来！
javascript
冴羽1 小时前
SvelteKit 最新中文文档教程（23）—— CLI 使用指南
前端·javascript·svelte
jstart千语1 小时前
【SpringBoot】HttpServletRequest获取使用及失效问题（包含@Async异步执行方案）
java·前端·spring boot·后端·spring
徐小夕1 小时前
花了2个月时间，写了一款3D可视化编辑器3D-Tony
前端·javascript·react.js
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02我决定放弃搞 Java 了03RAG 实践- Ollama+RagFlow 部署本地知识库04【漏洞复现】SpringBlade tenant/list SQL 注入漏洞05YOLOv8改进 | 细节创新篇 | iAFF迭代注意力特征融合助力多目标细节涨点06DeepSeek各版本说明与优缺点分析07如何在WPS和Word/Excel中直接使用DeepSeek功能08Scipy||第三章 线性代数 (scipy.linalg)09本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程10YOLOv8改进 | 2023检测头篇 | 利用AFPN改进检测头适配YOLOv8版（全网独家创新）