评委打分--可视化系统

最新推荐文章于 2025-06-07 22:50:18 发布

smile boy

最新推荐文章于 2025-06-07 22:50:18 发布

阅读量285

点赞数 8

分类专栏： HTML5+CSS+JavaScript 文章标签： html5 css3 javascript 前端 css

本文链接：https://blog.csdn.net/weixin_47004687/article/details/147823705

版权

HTML5+CSS+JavaScript 专栏收录该内容

18 篇文章

订阅专栏

1.视觉设计：

采用渐变背景（#f5f7fa → #c3cfe2）营造柔和氛围

主容器使用半透明白色背景搭配柔和阴影，增强层次感

四种结果项使用不同浅色背景（蓝、绿、红、紫）方便区分

按钮采用渐变蓝色搭配悬停动画增强交互感

2.交互体验：

输入框聚焦时会有蓝色光晕效果

按钮点击后会有微妙的位移动画

结果区域采用渐显动画（fadeIn）

输入验证机制（非数字检测）

3.响应式布局：

使用flex和grid布局确保不同屏幕尺寸的适配

输入区域采用弹性布局自动适配内容

结果区域使用grid布局自动排列

4.功能实现：

自动计算总分、最高分、最低分

自动计算平均分（保留两位小数）

结果区域默认隐藏，计算后显示

输入验证防止错误数据

5.细节优化：

使用rem单位保证可伸缩性

添加文字阴影提升可读性

精细的过渡动画（所有交互均有动画过渡）

人性化的输入提示（placeholder）

6.截图展示：

7.代码重现：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>评委打分系统</title>
    <style>
        /* 基础样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        /* 整体背景渐变 */
        body {
            min-height: 100vh;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        /* 主容器样式 */
        .container {
            background: rgba(255, 255, 255, 0.95);
            padding: 2.5rem;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 600px;
            transition: transform 0.3s ease;
        }

        /* 标题样式 */
        h1 {
            color: #2c3e50;
            text-align: center;
            margin-bottom: 2rem;
            font-size: 2.2em;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }

        /* 输入区域布局 */
        .input-group {
            display: flex;
            flex-direction: column;
            gap: 1.2rem;
            margin-bottom: 2rem;
        }

        /* 单个评委输入项样式 */
        .judge-input {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        /* 输入框标签样式 */
        label {
            color: #34495e;
            font-weight: 600;
            min-width: 80px;
            font-size: 1.1em;
        }

        /* 输入框样式 */
        input {
            flex: 1;
            padding: 12px 20px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 1em;
            transition: all 0.3s ease;
        }

        input:focus {
            outline: none;
            border-color: #3498db;
            box-shadow: 0 0 8px rgba(52, 152, 219, 0.3);
        }

        /* 按钮样式 */
        button {
            background: linear-gradient(45deg, #3498db, #6dd5fa);
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 8px;
            font-size: 1.1em;
            cursor: pointer;
            transition: all 0.3s ease;
            width: 100%;
            font-weight: 600;
            letter-spacing: 1px;
        }

        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
        }

        /* 结果展示区域 */
        .results {
            margin-top: 2rem;
            display: none; /* 默认隐藏 */
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
            animation: fadeIn 0.5s ease;
        }

        /* 单个结果项样式 */
        .result-item {
            background: white;
            padding: 1.5rem;
            border-radius: 12px;
            text-align: center;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }

        .result-item h3 {
            color: #7f8c8d;
            margin-bottom: 0.5rem;
            font-size: 1em;
        }

        .result-item p {
            font-size: 1.6em;
            font-weight: 700;
            color: #2c3e50;
        }

        /* 自定义颜色标记 */
        #totalScore { background: #e8f4fc; }
        #maxScore { background: #e6f9e6; }
        #minScore { background: #fde8e8; }
        #averageScore { background: #f3e8fd; }

        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🎯 选手评分系统</h1>
        
        <div class="input-group">
            <!-- 三个评委输入框 -->
            <div class="judge-input">
                <label>评委1分数：</label>
                <input type="number" id="score1" placeholder="请输入0-100之间的分数">
            </div>
            <div class="judge-input">
                <label>评委2分数：</label>
                <input type="number" id="score2" placeholder="请输入0-100之间的分数">
            </div>
            <div class="judge-input">
                <label>评委3分数：</label>
                <input type="number" id="score3" placeholder="请输入0-100之间的分数">
            </div>
        </div>

        <button onclick="calculateScore()">📊 计算最终得分</button>

        <!-- 结果展示区域 -->
        <div class="results" id="results">
            <div class="result-item" id="totalScore">
                <h3>总分</h3>
                <p id="total">0</p>
            </div>
            <div class="result-item" id="maxScore">
                <h3>最高分</h3>
                <p id="max">0</p>
            </div>
            <div class="result-item" id="minScore">
                <h3>最低分</h3>
                <p id="min">0</p>
            </div>
            <div class="result-item" id="averageScore">
                <h3>最终得分</h3>
                <p id="average">0</p>
            </div>
        </div>
    </div>

    <script>
        function calculateScore() {
            // 获取三个评委的分数输入值
            const score1 = parseFloat(document.getElementById('score1').value);
            const score2 = parseFloat(document.getElementById('score2').value);
            const score3 = parseFloat(document.getElementById('score3').value);

            // 验证输入有效性
            if (isNaN(score1) || isNaN(score2) || isNaN(score3)) {
                alert("请正确填写所有评委分数！");
                return;
            }

            // 计算结果
            const scores = [score1, score2, score3];
            const total = scores.reduce((a, b) => a + b, 0);
            const max = Math.max(...scores);
            const min = Math.min(...scores);
            const average = (total / scores.length).toFixed(2);

            // 更新显示结果
            document.getElementById('total').textContent = total;
            document.getElementById('max').textContent = max;
            document.getElementById('min').textContent = min;
            document.getElementById('average').textContent = average;
            
            // 显示结果区域
            document.getElementById('results').style.display = 'grid';
        }
    </script>
</body>
</html>