使用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）。

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

相关推荐
崔庆才丨静觅6 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60617 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了7 小时前
「2025 年终总结」在所有失去的人中，我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅7 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅7 小时前
5分钟快速搭建 AI 平台并用它赚钱！
前端
崔庆才丨静觅8 小时前
比官方便宜一半以上！Midjourney API 申请及使用
前端
Moment8 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅8 小时前
刷屏全网的“nano-banana”API接入指南！0.1元/张量产高清创意图，开发者必藏
前端
剪刀石头布啊8 小时前
jwt介绍
前端
爱敲代码的小鱼8 小时前
AJAX（异步交互的技术来实现从服务端中获取数据）：
前端·javascript·ajax
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03openclaw配置教程（linux+局域网ollama）04UV安装并设置国内源05OpenClaw Chrome扩展使用教程 - 浏览器中继控制06Linux下V2Ray安装配置指南07Claude Code Skills 实用使用手册08Vue-skills的中文文档09让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南10一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示