无聊写个简易红蓝两队比赛计分器

1184798949 · 发表于 2025-1-17 17:21:03

感谢分享

chis777780 · 发表于 2025-1-17 16:33:39

感谢分享，很给力！~

kyo9766 · 发表于 2025-1-17 16:01:36

华庭大哥发表于 2025-1-17 15:49
直接让给AI帮你写个HTML就可以了http://www.huating.xyz/bifen.html
[mw_shl_code=html,true]

现在有AI了，写个简单的前端，方便了很多，感谢分享

华庭大哥 · 发表于 2025-1-17 15:49:52

本帖最后由华庭大哥于 2025-1-17 15:55 编辑

直接让给AI帮你写个HTML就可以了http://www.huating.xyz/bifen.html

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>比赛计分器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        h1 {
            text-align: center;
        }
        .scoreboard {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 20px 0;
        }
        .team {
            font-size: 48px;
        }
        .red-team {
            background-color: red;
            color: #fff;
            padding: 20px;
        }
        .blue-team {
            background-color: blue;
            color: #fff;
            padding: 20px;
        }
        .separator {
            font-size: 48px;
            margin: 0 20px;
        }
        .buttons {
            text-align: center;
        }
        button {
            background-color: #ddd;
            color: black;
            border: none;
            font-size: 16px;
            padding: 10px 20px;
            margin: 5px;
            border-radius: 5px;
        }
        .log {
            margin-top: 30px;
        }
        .log h2 {
            margin-bottom: 10px;
        }
        #log-list {
            list-style-type: none;
            padding: 0;
        }
        #log-list li {
            background: #f2f2f2;
            margin: 5px 0;
            padding: 10px;
            border-left: 5px solid #8c8c8c;
            border-radius: 5px;
            box-shadow: 2px 2px 5px #ccc;
        }
    </style>
</head>
<body>
    <h1>比赛计分器</h1>
    <div class="scoreboard">
        <div class="team red-team">
            <p>红队</p>
            <p id="red-score">4</p>
        </div>
        <div class="separator">vs</div>
        <div class="team blue-team">
            <p>蓝队</p>
            <p id="blue-score">2</p>
        </div>
    </div>
    <div class="buttons">
        <button>红队加1分</button>
        <button>红队减1分</button>
        <button>蓝队加1分</button>
        <button>蓝队减1分</button>
        <button>比分清零</button>
        <button>复制比分</button>
    </div>
    <div class="log">
        <h2>操作日志</h2>
        <ul id="log-list"></ul>
    </div>
    <script>
        // 初始化比分
        let redScore = 4;
        let blueScore = 2;

        // 更新比分显示
        function updateScores() {
            document.getElementById('red-score').innerHTML = redScore;
            document.getElementById('blue-score').innerHTML = blueScore;
        }

        // 红队加1分
        function addRed() {
            redScore++;
            updateScores();
            logAction('红队加1分');
        }

        // 红队减1分
        function subtractRed() {
            if (redScore > 0) {
                redScore--;
            }
            updateScores();
            logAction('红队减1分');
        }

        // 蓝队加1分
        function addBlue() {
            blueScore++;
            updateScores();
            logAction('蓝队加1分');
        }

        // 蓝队减1分
        function subtractBlue() {
            if (blueScore > 0) {
                blueScore--;
            }
            updateScores();
            logAction('蓝队减1分');
        }

        // 比分清零
        function resetScores() {
            redScore = 0;
            blueScore = 0;
            updateScores();
            logAction('比分清零');
        }

        // 复制比分
        function copyScores() {
            const text = `红队 ${redScore} : 蓝队 ${blueScore}`;
            navigator.clipboard.writeText(text).then(() => {
                alert('比分已复制到剪贴板：' + text);
            }).catch(err => {
                console.error('复制失败: ', err);
            });
        }

        // 操作日志记录
        function logAction(action) {
            const logList = document.getElementById('log-list');
            const time = new Date().toLocaleTimeString();
            const li = document.createElement('li');
            li.textContent = `${time} - ${action}`;
            logList.insertBefore(li, logList.firstChild);
        }
    </script>
</body>
</html>

		自动登录	找回密码
密码			注册

[易源码分享] 无聊写个简易红蓝两队比赛计分器