求助：基于HTML/CSS/JS/PHP的可自定义颜色尺寸的国际象棋棋盘问题

Hey there! I know this is for your exam assignment, so let's get your chess board working properly with custom colors and adjustable dimensions. First, let's go over the common issues in your original code snippet, then I'll share a complete, working version.

Common Issues in Your Initial Code #

• The changeColor(value) call in the <select> is incorrect — you should pass this.value instead of just value
• You're missing a second color selector for the alternate squares
• There's no input for setting custom board dimensions (height/width)
• No JavaScript logic to generate the chess board grid itself
• No CSS styling to properly lay out the squares

Complete Working Code #

HTML #

<!DOCTYPE html>
<html>
<head>
    <title>Custom Chess Board</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h3>Customize Your Chess Board</h3>
    
    <div class="controls">
        <label>First Color: </label>
        <select id="color1" onchange="generateBoard()">
            <option value="#000000">Black</option>
            <option value="#0000ff">Blue</option>
            <option value="#8b4513">Brown</option>
            <option value="#ff0000">Red</option>
        </select>

        <label>Second Color: </label>
        <select id="color2" onchange="generateBoard()">
            <option value="#ffffff">White</option>
            <option value="#eeeeee">Light Gray</option>
            <option value="#f0e68c">Khaki</option>
            <option value="#ffa500">Orange</option>
        </select>

        <div class="dimensions">
            <label>Board Width (squares): </label>
            <input type="number" id="boardWidth" value="8" min="2" max="20">
            
            <label>Board Height (squares): </label>
            <input type="number" id="boardHeight" value="8" min="2" max="20">
        </div>

        <button onclick="generateBoard()">Generate Board</button>
    </div>

    <div id="chessBoard"></div>

    <script src="script.js"></script>
</body>
</html>

CSS (style.css) #

.controls {
    margin: 20px 0;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.controls label, .controls select, .controls input, .controls button {
    margin: 0 10px 10px 0;
    padding: 5px;
}

#chessBoard {
    display: inline-block;
    border: 2px solid #333;
}

.square {
    width: 50px;
    height: 50px;
    float: left;
    box-sizing: border-box;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

JavaScript (script.js) #

function generateBoard() {
    // Get user inputs
    const color1 = document.getElementById('color1').value;
    const color2 = document.getElementById('color2').value;
    const width = parseInt(document.getElementById('boardWidth').value);
    const height = parseInt(document.getElementById('boardHeight').value);
    const boardContainer = document.getElementById('chessBoard');

    // Clear existing board
    boardContainer.innerHTML = '';

    // Generate each row and square
    for (let row = 0; row < height; row++) {
        const rowDiv = document.createElement('div');
        rowDiv.classList.add('clearfix');
        
        for (let col = 0; col < width; col++) {
            const square = document.createElement('div');
            square.classList.add('square');
            
            // Alternate colors based on row + column sum
            if ((row + col) % 2 === 0) {
                square.style.backgroundColor = color1;
            } else {
                square.style.backgroundColor = color2;
            }
            
            rowDiv.appendChild(square);
        }
        
        boardContainer.appendChild(rowDiv);
    }
}

// Generate initial board on page load
window.onload = generateBoard;

PHP Note (if needed) #

If you wanted to use PHP to save or persist user preferences, you could add a form that submits to a PHP script, but for the front-end functionality above, PHP isn't required. If you do need PHP integration, here's a quick example of handling form submission:

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $color1 = $_POST['color1'];
    $color2 = $_POST['color2'];
    $width = $_POST['boardWidth'];
    $height = $_POST['boardHeight'];
    
    // You could save these values to a session or database here
    session_start();
    $_SESSION['chessPrefs'] = [
        'color1' => $color1,
        'color2' => $color2,
        'width' => $width,
        'height' => $height
    ];
}
?>

Key Features Explained #

• Custom Colors: Two dropdowns let you pick colors for alternating squares, and the board updates automatically when you change them
• Adjustable Dimensions: Input boxes let you set how many squares tall/wide the board is (restricted to 2-20 for usability)
• Automatic Grid Generation: The JavaScript loops through rows and columns, calculating which color each square should be using (row + col) % 2
• Clean Layout: CSS uses floats and clearfix to properly align the squares into a grid

内容的提问来源于stack exchange，提问作者Irfan