『玩玩』Google AI - ‎Gemini - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

『玩玩』Google AI - ‎Gemini

google ai - ‎gemini

1833 2025-03-16 03:40:06 ‧ 1034 瀏覽

分享至

純粹試玩
看看會出現什麼結果

敘述內容：產生一個網頁形式濾水器濾心更換記錄表；須包含更換日期、濾芯圖像、濾芯名稱、單價，添加紀錄項目按鍵．

就產生了

<!DOCTYPE html>
<html>
<head>
    <title>濾水器濾心更換記錄表</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }
        .filter-image {
            max-width: 100px;
            max-height: 100px;
        }
    </style>
</head>
<body>
    <h1>濾水器濾心更換記錄表</h1>
    <table id="filterTable">
        <thead>
            <tr>
                <th>更換日期</th>
                <th>濾芯圖像</th>
                <th>濾芯名稱</th>
                <th>單價</th>
            </tr>
        </thead>
        <tbody>
            </tbody>
    </table>
    <br>
    <button onclick="addRecord()">添加紀錄項目</button>

    <script>
        function addRecord() {
            var table = document.getElementById("filterTable").getElementsByTagName('tbody')[0];
            var newRow = table.insertRow(table.rows.length);
            var cell1 = newRow.insertCell(0);
            var cell2 = newRow.insertCell(1);
            var cell3 = newRow.insertCell(2);
            var cell4 = newRow.insertCell(3);

            // 創建輸入框和圖像選擇
            cell1.innerHTML = '<input type="date">';
            cell2.innerHTML = '<input type="file" accept="image/*" onchange="previewImage(this)"> <img class="filter-image" src="" alt="濾芯圖像">';
            cell3.innerHTML = '<input type="text" placeholder="濾芯名稱">';
            cell4.innerHTML = '<input type="number" placeholder="單價">';
        }

        function previewImage(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    input.nextElementSibling.src = e.target.result;
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>
</body>
</html>

附帶
說明：

HTML 結構：
創建了一個表格（），包含表頭（）和表體（）。
表頭包含「更換日期」、「濾芯圖像」、「濾芯名稱」和「單價」四個欄位。
表體用於動態添加記錄。
一個「添加紀錄項目」的按鈕（）。
CSS 樣式：
簡單的 CSS 樣式用於表格的邊框、間距和對齊。
.filter-image 類用於限制濾芯圖像的大小。
JavaScript 功能：
addRecord() 函數：
在表格的末尾添加一個新的行（）。
在新行中創建四個儲存格（），分別對應四個欄位。
在每個儲存格中添加相應的 HTML 輸入元素（日期選擇器、圖像上傳、文字輸入框和數字輸入框）。
previewImage() 函數：
當用戶選擇圖像時，使用 FileReader 讀取圖像文件。
將讀取的圖像數據設置為圖像元素的 src 屬性，以顯示預覽。
使用方法：

將上述 HTML 代碼保存為一個 .html 文件（例如 filter_log.html）。
使用網頁瀏覽器打開該文件。
點擊「添加紀錄項目」按鈕，即可添加新的濾芯更換記錄。
在相應的輸入框中填寫更換日期、濾芯名稱和單價。
點擊圖像上傳按鈕，選擇濾芯的圖像。
進階功能（可選）：

本地存儲：使用瀏覽器的本地存儲（localStorage 或 sessionStorage）來保存記錄，以便下次打開網頁時仍然存在。
編輯和刪除：添加編輯和刪除按鈕，以便用戶修改或刪除現有的記錄。
數據驗證：添加 JavaScript 驗證，以確保用戶輸入的數據格式正確。
排序和篩選：添加排序和篩選功能，以便用戶更方便地查找和管理記錄。
匯出和匯入：添加匯出（例如 CSV 或 Excel）和匯入功能，以便用戶備份或分享記錄。
響應式設計：使用 CSS 媒體查詢，使網頁在不同設備（例如手機和平板電腦）上都能良好顯示。