.

iT邦幫忙

0

『玩玩』Google AI  - ‎Gemini

1833 2025-03-16 03:40:061479 瀏覽
  • 分享至 

  • xImage

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

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

就產生了

<!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 媒體查詢,使網頁在不同設備(例如手機和平板電腦)上都能良好顯示。

1833 iT邦新手 3 級 ‧ 2025-03-16 04:34:42 檢舉
記錄失敗
網頁重新載入回到初始狀態
1833 iT邦新手 3 級 ‧ 2025-03-16 16:42:00 檢舉
使用 ChatGPT 也試一下;"產生一個網頁形式濾水器濾心更換記錄表並留存紀錄資料;須包含更換日期、濾芯圖像、濾芯名稱、單價,添加“新增、編輯、刪除”項目按鍵.",輸出成果好一些。
.
圖片
  直播研討會

尚未有邦友回答

立即登入回答