Home
BlogThoughtsAbout

111111

March 26, 2025

<!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>
        :root {
            --primary-color: #4361ee;
            --primary-dark: #3a56d4;
            --primary-light: rgba(67, 97, 238, 0.1);
            --secondary-color: #3f8efc;
            --accent-color: #2ec4b6;
            --light-bg: #f8f9fa;
            --card-bg: #ffffff;
            --text-color: #333;
            --text-secondary: #666;
            --text-muted: #888;
            --border-radius: 10px;
            --box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            --transition: all 0.3s ease;
            --success-color: #38b000;
            --info-color: #ffb703;
            --danger-color: #e63946;
            --danger-light: rgba(230, 57, 70, 0.1);
            --border-color: #e0e0e0;
            --warning-color: #ff9e00;
            --warning-light: rgba(255, 158, 0, 0.1);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            background-color: var(--light-bg);
            color: var(--text-color);
            padding: 20px;
        }
        
        .container {
            max-width: 900px;
            margin: 0 auto;
            background: var(--card-bg);
            padding: 30px;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
        }
        
        h1 {
            text-align: center;
            color: var(--primary-color);
            margin-bottom: 25px;
            font-size: 2.2rem;
        }
        
        .card {
            background: var(--card-bg);
            border-radius: var(--border-radius);
            padding: 25px;
            margin-bottom: 25px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            transition: var(--transition);
        }
        
        .card:hover {
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }
        
        .card-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
            position: relative;
        }
        
        .card-icon {
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--primary-color);
            color: white;
            border-radius: 50%;
            margin-right: 10px;
        }
        
        .card-title {
            font-size: 1.3rem;
            font-weight: 600;
            color: var(--primary-color);
        }
        
        .card-actions {
            position: absolute;
            right: 0;
            top: 0;
            display: flex;
            gap: 10px;
        }
        
        .description {
            background-color: #f0f7ff;
            padding: 15px;
            border-radius: var(--border-radius);
            margin-bottom: 25px;
            border-left: 4px solid var(--secondary-color);
            color: var(--text-secondary);
        }
        
        .tip {
            background-color: #fff8e6;
            padding: 12px;
            border-radius: 6px;
            margin: 15px 0;
            border-left: 4px solid var(--info-color);
            color: var(--text-secondary);
            font-size: 0.9rem;
        }
        
        .warning {
            background-color: var(--warning-light);
            padding: 12px;
            border-radius: 6px;
            margin: 15px 0;
            border-left: 4px solid var(--warning-color);
            color: var(--text-secondary);
            font-size: 0.9rem;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--text-secondary);
        }
        
        input {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 16px;
            transition: var(--transition);
        }
        
        input:focus {
            outline: none;
            border-color: var(--secondary-color);
            box-shadow: 0 0 0 3px rgba(63, 142, 252, 0.2);
        }
        
        .row {
            display: flex;
            gap: 20px;
            margin-bottom: 10px;
        }
        
        .col {
            flex: 1;
        }
        
        .btn {
            padding: 10px 15px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 500;
            transition: var(--transition);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
        }
        
        .btn-primary {
            background-color: var(--primary-color);
            color: white;
            box-shadow: 0 4px 10px rgba(67, 97, 238, 0.3);
        }
        
        .btn-primary:hover {
            background-color: var(--primary-dark);
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(67, 97, 238, 0.4);
        }
        
        .btn-primary:active {
            transform: translateY(0);
            box-shadow: 0 2px 5px rgba(67, 97, 238, 0.4);
        }
        
        .btn-calculate {
            width: 100%;
            padding: 14px;
            font-size: 18px;
            font-weight: 600;
            letter-spacing: 0.5px;
            margin-top: 15px;
        }
        
        .btn-success {
            background-color: var(--success-color);
            color: white;
        }
        
        .btn-success:hover {
            background-color: #2e9000;
            transform: translateY(-1px);
        }
        
        .btn-danger {
            background-color: var(--danger-color);
            color: white;
        }
        
        .btn-danger:hover {
            background-color: #d32f2f;
            transform: translateY(-1px);
        }
        
        .btn-outline {
            background-color: transparent;
            border: 1px solid var(--border-color);
            color: var(--text-color);
        }
        
        .btn-outline:hover {
            background-color: var(--light-bg);
            border-color: var(--text-secondary);
        }
        
        .error {
            color: var(--danger-color);
            background-color: var(--danger-light);
            padding: 15px;
            border-radius: 6px;
            margin: 20px 0;
            border-left: 4px solid var(--danger-color);
            display: none;
        }
        
        .success-message {
            color: var(--success-color);
            background-color: rgba(56, 176, 0, 0.1);
            padding: 15px;
            border-radius: 6px;
            margin: 20px 0;
            border-left: 4px solid var(--success-color);
            display: none;
        }
        
        .results-container {
            display: flex;
            flex-direction: column;
            gap: 25px;
        }
        
        .current-value {
            padding: 15px;
            background-color: #e7f3ff;
            border-radius: var(--border-radius);
            text-align: center;
            font-weight: 600;
            color: var(--primary-color);
            margin: 10px 0 20px 0;
            border: 1px solid #c1ddff;
            font-size: 1.1rem;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        
        .input-status {
            display: inline-block;
            font-size: 0.8rem;
            padding: 3px 8px;
            border-radius: 12px;
            margin-left: 8px;
            color: white;
            background-color: var(--success-color);
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            border-radius: 8px;
            overflow: hidden;
        }
        
        th, td {
            padding: 12px;
            text-align: center;
        }
        
        th {
            background-color: var(--primary-color);
            color: white;
            font-weight: 500;
        }
        
        tr:nth-child(even) {
            background-color: #f0f7ff;
        }
        
        tr:hover {
            background-color: #e2eeff;
        }
        
        .result-section {
            background-color: var(--card-bg);
            border-radius: var(--border-radius);
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }
        
        .result-header {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .result-icon {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--accent-color);
            color: white;
            border-radius: 50%;
            margin-right: 10px;
        }
        
        .result-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--accent-color);
        }
        
        /* 保存设置对话框 */
        .settings-dialog {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        
        .dialog-content {
            background-color: white;
            padding: 25px;
            border-radius: var(--border-radius);
            width: 90%;
            max-width: 500px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
        }
        
        .dialog-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border-color);
        }
        
        .dialog-title {
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--primary-color);
            margin: 0;
        }
        
        .dialog-close {
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: var(--text-muted);
        }
        
        .dialog-close:hover {
            color: var(--danger-color);
        }
        
        .dialog-footer {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
        }
        
        /* 保存的设置列表样式 */
        .saved-settings {
            margin-top: 20px;
        }
        
        .settings-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 15px;
        }
        
        .settings-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-color);
        }
        
        .settings-list {
            max-height: 250px;
            overflow-y: auto;
            border: 1px solid var(--border-color);
            border-radius: 6px;
        }
        
        .setting-item {
            padding: 12px 15px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: background-color 0.2s;
        }
        
        .setting-item:last-child {
            border-bottom: none;
        }
        
        .setting-item:hover {
            background-color: var(--primary-light);
        }
        
        .setting-info {
            flex: 1;
            cursor: pointer;
        }
        
        .setting-name {
            font-weight: 500;
            margin-bottom: 3px;
        }
        
        .setting-details {
            font-size: 0.85rem;
            color: var(--text-muted);
        }
        
        .setting-actions {
            display: flex;
            gap: 8px;
        }
        
        .setting-actions button {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            min-width: 0;
            font-size: 0.85rem;
        }
        
        .no-settings {
            padding: 20px;
            text-align: center;
            color: var(--text-muted);
        }
        
        .settings-empty {
            text-align: center;
            padding: 25px;
            color: var(--text-muted);
        }
        
        /* 结果距离信息样式 */
        .distance-info {
            font-size: 0.9rem;
            color: var(--text-muted);
            margin-top: 5px;
        }
        
        .close-match {
            color: var(--success-color);
            font-weight: 500;
        }
        
        .distant-match {
            color: var(--warning-color);
            font-weight: 500;
        }
        
        /* 单独n值显示样式 */
        .calculation-details {
            margin-top: 5px;
            font-size: 0.85rem;
            color: var(--text-secondary);
        }
        
        @media (max-width: 768px) {
            .row {
                flex-direction: column;
                gap: 10px;
            }
            
            .container {
                padding: 20px;
            }
            
            .dialog-content {
                padding: 15px;
            }
            
            .setting-item {
                flex-direction: column;
                align-items: stretch;
            }
            
            .setting-actions {
                justify-content: flex-end;
                margin-top: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>坐标计算器</h1>
        
        <div class="description">
            <p>本计算器基于公式 x=a+step_x*n 和 y=b+step_y*n，生成与当前坐标相近的系列坐标点。</p>
        </div>
        
        <div class="card">
            <div class="card-header">
                <div class="card-icon">⚙️</div>
                <div class="card-title">初始设置</div>
                <div class="card-actions">
                    <button class="btn btn-success" onclick="showSaveDialog()">💾 保存设置</button>
                    <button class="btn btn-outline" onclick="showSettingsDialog()">📋 选择设置</button>
                </div>
            </div>
            
            <div class="row">
                <div class="col">
                    <div class="form-group">
                        <label for="initialX">初始X坐标 (a):</label>
                        <input type="number" id="initialX" value="0" min="0" step="any" placeholder="设置起始X值">
                    </div>
                </div>
                <div class="col">
                    <div class="form-group">
                        <label for="stepX">X步长 (step_x):</label>
                        <input type="number" id="stepX" value="1" min="0" step="any" placeholder="设置X增量">
                    </div>
                </div>
            </div>
            
            <div class="row">
                <div class="col">
                    <div class="form-group">
                        <label for="initialY">初始Y坐标 (b):</label>
                        <input type="number" id="initialY" value="0" min="0" step="any" placeholder="设置起始Y值">
                    </div>
                </div>
                <div class="col">
                    <div class="form-group">
                        <label for="stepY">Y步长 (step_y):</label>
                        <input type="number" id="stepY" value="1" min="0" step="any" placeholder="设置Y增量">
                    </div>
                </div>
            </div>
            
            <div id="successMessage" class="success-message"></div>
        </div>
        
        <div class="card">
            <div class="card-header">
                <div class="card-icon">📍</div>
                <div class="card-title">当前坐标</div>
            </div>
            
            <div class="tip">
                提示：您可以只输入X坐标或只输入Y坐标，计算器会自动找到最匹配的系列坐标。
            </div>
            
            <div class="row">
                <div class="col">
                    <div class="form-group">
                        <label for="inputX">当前X坐标:</label>
                        <input type="number" id="inputX" min="0" step="any" placeholder="输入当前X坐标">
                    </div>
                </div>
                <div class="col">
                    <div class="form-group">
                        <label for="inputY">当前Y坐标:</label>
                        <input type="number" id="inputY" min="0" step="any" placeholder="输入当前Y坐标">
                    </div>
                </div>
            </div>
            
            <button class="btn btn-primary btn-calculate" onclick="calculate()">生成坐标系列</button>
        </div>
        
        <div id="errorMessage" class="error"></div>
        
        <div id="results" class="results-container" style="display: none;">
            <div id="currentValueContainer" class="current-value"></div>
            
            <div class="result-section">
                <div class="result-header">
                    <div class="result-icon">↓</div>
                    <div class="result-title">小于当前坐标的系列</div>
                </div>
                <table id="smallerTable">
                    <thead>
                        <tr>
                            <th>X 坐标</th>
                            <th>Y 坐标</th>
                        </tr>
                    </thead>
                    <tbody id="smallerBody"></tbody>
                </table>
            </div>
            
            <div class="result-section">
                <div class="result-header">
                    <div class="result-icon">↑</div>
                    <div class="result-title">大于当前坐标的系列</div>
                </div>
                <table id="largerTable">
                    <thead>
                        <tr>
                            <th>X 坐标</th>
                            <th>Y 坐标</th>
                        </tr>
                    </thead>
                    <tbody id="largerBody"></tbody>
                </table>
            </div>
        </div>
    </div>
    
    <!-- 保存设置对话框 -->
    <div id="saveSettingDialog" class="settings-dialog">
        <div class="dialog-content">
            <div class="dialog-header">
                <h3 class="dialog-title">保存当前设置</h3>
                <button class="dialog-close" onclick="closeDialog('saveSettingDialog')">&times;</button>
            </div>
            
            <div class="form-group">
                <label for="settingName">设置名称:</label>
                <input type="text" id="settingName" placeholder="例如：项目A坐标">
            </div>
            
            <div class="dialog-footer">
                <button class="btn btn-primary" onclick="saveSetting()">保存</button>
                <button class="btn btn-outline" onclick="closeDialog('saveSettingDialog')">取消</button>
            </div>
        </div>
    </div>
    
    <!-- 选择设置对话框 -->
    <div id="selectSettingDialog" class="settings-dialog">
        <div class="dialog-content">
            <div class="dialog-header">
                <h3 class="dialog-title">已保存的设置</h3>
                <button class="dialog-close" oncl