如何用document.write()实现点击按钮展示工资单结果的动态网页？

Got it, let's build out your payroll program so clicking the Process button generates that formatted result page you're aiming for. Here's a complete working implementation that uses document.write() to create the dynamic output, matching the structure you started with:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Payroll Processing Program</title>
    <!-- Jason Kim Section 17 -->
    <style>
        body {
            background-color: lightgray;
            font-family: Arial, sans-serif;
        }
        h1 {
            text-align: center;
            color: lightblue;
            background-color: white;
            padding: 10px;
            margin: 20px auto;
            width: 80%;
        }
        h2 {
            text-align: center;
            color: #333;
        }
        .form-container {
            background-color: white;
            padding: 25px;
            width: 60%;
            margin: 0 auto;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            background-color: lightblue;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            display: block;
            margin: 20px auto 0;
        }
        button:hover {
            background-color: #87CEEB;
        }
    </style>
</head>
<body>
    <h1>Payroll Processing Program</h1>
    <div class="form-container">
        <h2>Enter Employee Details</h2>
        <div class="form-group">
            <label for="empName">Employee Name:</label>
            <input type="text" id="empName" placeholder="Enter full name">
        </div>
        <div class="form-group">
            <label for="hoursWorked">Hours Worked:</label>
            <input type="number" id="hoursWorked" min="0" step="0.5" placeholder="e.g., 40.0">
        </div>
        <div class="form-group">
            <label for="hourlyRate">Hourly Rate ($):</label>
            <input type="number" id="hourlyRate" min="0" step="0.01" placeholder="e.g., 15.50">
        </div>
        <button onclick="processPayroll()">Process</button>
    </div>

    <script>
        function processPayroll() {
            // Get input values
            const empName = document.getElementById('empName').value.trim();
            const hoursWorked = parseFloat(document.getElementById('hoursWorked').value);
            const hourlyRate = parseFloat(document.getElementById('hourlyRate').value);

            // Validate inputs to avoid errors
            if (!empName || isNaN(hoursWorked) || hoursWorked < 0 || isNaN(hourlyRate) || hourlyRate < 0) {
                alert('Please enter valid information for all fields!');
                return;
            }

            // Calculate payroll components
            const grossPay = hoursWorked * hourlyRate;
            const federalTax = grossPay * 0.15; // 15% federal tax (adjust as needed)
            const stateTax = grossPay * 0.05; // 5% state tax (adjust as needed)
            const totalDeductions = federalTax + stateTax;
            const netPay = grossPay - totalDeductions;

            // Generate styled result page using document.write()
            document.write(`
                <!DOCTYPE html>
                <html>
                <head>
                    <meta charset="UTF-8">
                    <title>Payroll Result for ${empName}</title>
                    <style>
                        body {
                            background-color: lightgray;
                            font-family: Arial, sans-serif;
                        }
                        h1 {
                            text-align: center;
                            color: lightblue;
                            background-color: white;
                            padding: 10px;
                            margin: 20px auto;
                            width: 80%;
                        }
                        .result-card {
                            background-color: white;
                            padding: 30px;
                            width: 70%;
                            margin: 30px auto;
                            border-radius: 8px;
                            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
                        }
                        .result-row {
                            display: flex;
                            justify-content: space-between;
                            margin-bottom: 10px;
                            padding: 8px 0;
                            border-bottom: 1px solid #eee;
                        }
                        .result-label {
                            font-weight: bold;
                            color: #333;
                        }
                        .result-value {
                            color: #0066cc;
                        }
                        .total-row {
                            font-size: 1.2em;
                            font-weight: bold;
                            border-bottom: 2px solid #333;
                            padding-top: 15px;
                        }
                        .back-btn {
                            background-color: lightblue;
                            color: white;
                            padding: 10px 20px;
                            border: none;
                            border-radius: 4px;
                            cursor: pointer;
                            font-size: 16px;
                            display: block;
                            margin: 20px auto;
                            text-decoration: none;
                            text-align: center;
                            width: 150px;
                        }
                        .back-btn:hover {
                            background-color: #87CEEB;
                        }
                    </style>
                </head>
                <body>
                    <h1>Payroll Result</h1>
                    <div class="result-card">
                        <h2 style="text-align:center;">${empName}</h2>
                        <div class="result-row">
                            <span class="result-label">Hours Worked:</span>
                            <span class="result-value">${hoursWorked.toFixed(1)} hours</span>
                        </div>
                        <div class="result-row">
                            <span class="result-label">Hourly Rate:</span>
                            <span class="result-value">$${hourlyRate.toFixed(2)}</span>
                        </div>
                        <div class="result-row total-row">
                            <span class="result-label">Gross Pay:</span>
                            <span class="result-value">$${grossPay.toFixed(2)}</span>
                        </div>
                        <div class="result-row">
                            <span class="result-label">Federal Tax (15%):</span>
                            <span class="result-value">$${federalTax.toFixed(2)}</span>
                        </div>
                        <div class="result-row">
                            <span class="result-label">State Tax (5%):</span>
                            <span class="result-value">$${stateTax.toFixed(2)}</span>
                        </div>
                        <div class="result-row total-row">
                            <span class="result-label">Total Deductions:</span>
                            <span class="result-value">$${totalDeductions.toFixed(2)}</span>
                        </div>
                        <div class="result-row total-row" style="color:green;">
                            <span class="result-label">Net Pay:</span>
                            <span class="result-value">$${netPay.toFixed(2)}</span>
                        </div>
                    </div>
                    <a href="#" class="back-btn" onclick="history.back()">Back to Input</a>
                </body>
                </html>
            `);
        }
    </script>
</body>
</html>

Key Features Explained: #

• Input Validation: Ensures all fields are filled with valid positive values to prevent calculation errors.
• Clear Payroll Calculations: Computes gross pay, standard tax deductions, and net pay (you can adjust tax percentages in the JavaScript function).
• Dynamic Result Page: Uses document.write() to generate a fully styled new page with organized payroll details, including a back button to return to the input form.
• Clean Styling: Matches your initial design with light gray backgrounds, centered headings, and readable result containers.

Customization Tips: #

• Tweak tax rates or add additional deductions (like insurance or 401k) by updating the calculation logic in the processPayroll function.
• Adjust colors, fonts, or spacing in the CSS sections to match the exact appearance from your reference video.
• Add more input fields (like overtime hours) by extending the form and updating the calculation steps.

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