无聊写个简易红蓝两队比赛计分器 - 精易论坛

[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>