將改進混亂時鐘的網頁版

ejsoon · 帖子由 **ejsoon** » 2026年 4月 17日 17:16

gemini pro：

代码：全选

Here is the modified section of the code. You only need to replace the `// 5. If ckmode is "number"` section with the following block. 

All code and comments are written in English as requested.

```javascript
            // 5. If ckmode is "number"
            else if (ckmode === "number") {
                const ckvalue = obj.getAttribute("ckvalue");
                
                if (ckvalue) {
                    const values = ckvalue.split(",").map(v => parseInt(v.trim()));
                    const presentNumbers = new Set(values);
                    
                    // Coordinates for missing numbers (scale 0.7,0.7)
                    // Left side for odd numbers
                    const leftCoords = [
                        "translate(-120,-172) scale(0.7,0.7)",
                        "translate(-160,-160) scale(0.7,0.7)",
                        "translate(-172,-120) scale(0.7,0.7)",
                        "translate(-172,120) scale(0.7,0.7)",
                        "translate(-160,160) scale(0.7,0.7)",
                        "translate(-120,172) scale(0.7,0.7)"
                    ];
                    
                    // Right side for even numbers
                    const rightCoords = [
                        "translate(120,-172) scale(0.7,0.7)",
                        "translate(160,-160) scale(0.7,0.7)",
                        "translate(172,-120) scale(0.7,0.7)",
                        "translate(172,120) scale(0.7,0.7)",
                        "translate(160,160) scale(0.7,0.7)",
                        "translate(120,172) scale(0.7,0.7)"
                    ];

                    let leftIndex = 0;
                    let rightIndex = 0;

                    // Step 5a: Find missing numbers (1-12) and place them on the sides
                    for (let num = 1; num <= 12; num++) {
                        if (!presentNumbers.has(num)) {
                            const tileIndex = num - 1;
                            if (tileElements[tileIndex]) {
                                if (num % 2 !== 0) {
                                    // Odd number goes to the left
                                    tileElements[tileIndex].setAttribute("transform", leftCoords[leftIndex]);
                                    leftIndex++;
                                } else {
                                    // Even number goes to the right
                                    tileElements[tileIndex].setAttribute("transform", rightCoords[rightIndex]);
                                    rightIndex++;
                                }
                            }
                        }
                    }

                    // Step 5b: Place the valid numbers provided in the input
                    values.forEach((val, positionIndex) => {
                        // Only process valid numbers (ignore 0)
                        if (val > 0 && val <= 12) {
                            const tileIndex = val - 1; 
                            if (tileElements[tileIndex] && translateArray[positionIndex]) {
                                tileElements[tileIndex].setAttribute("transform", translateArray[positionIndex]);
                            }
                        }
                    });
                }
            }
```

ejsoon · 帖子由 **ejsoon** » 2026年 4月 17日 22:16

增加功能：每隔12秒就自動保存。如果第一個的類名不是「.ejautolocal」，那就新增並插入至第一位；如果是，則覆蓋保存。

ejsoon · 帖子由 **ejsoon** » 2026年 4月 17日 22:20

gemini fast：

代码：全选

To implement the auto-save feature every 12 seconds, you need to add a periodic timer and logic to handle the `.ejautolocal` class.

Here are the specific modifications for your script:

### 1. Add the Auto-Save Logic and Interval
Add this block at the end of your script or after the existing event listeners. It defines the `autoSave` function and sets up the 12-second interval.

```javascript
// Function to handle auto-save every 12 seconds
function autoSave() {
    let etmainclone = etmain.cloneNode(true);
    let etmaincwait = etmainclone.querySelector(".etwait");
    if (etmaincwait) etmaincwait.remove();
    
    let data = etmainclone.outerHTML;
    const base64Data = 'data:image/svg+xml;base64,' + btoa(data);
    
    const firstImg = dataarea.firstElementChild;

    if (firstImg && firstImg.classList.contains('ejautolocal')) {
        // Update existing auto-save slot
        firstImg.src = base64Data;
    } else {
        // Create new auto-save slot and insert at the first position
        const img = document.createElement('img');
        img.src = base64Data;
        img.classList.add('ejtilesvgdata', 'ejautolocal');
        dataarea.insertBefore(img, dataarea.firstChild);
    }
    
    saveState();
    updateLocalStorage();
}

// Start interval for auto-saving every 12 seconds
setInterval(autoSave, 12000);
```

---

### 2. Update `updateLocalStorage`
Ensure that the `ejautolocal` class is preserved when reloading from `localStorage`. Modify the `updateLocalStorage` function to track classes:

```javascript
function updateLocalStorage() {
    const images = document.querySelectorAll('.ejtilesvgdata');
    let minimizels = localStorage.getItem("minimizels");
    localStorage.clear();
    images.forEach((img, index) => {
        // Store both src and class information
        const data = {
            src: img.src,
            isAuto: img.classList.contains('ejautolocal')
        };
        localStorage.setItem(`svg_${index}`, JSON.stringify(data));
    });
    localStorage.setItem("minimizels", minimizels);
}
```

---

### 3. Update `loadFromLocalStorage`
Modify the loading logic to parse the stored JSON and re-apply the `ejautolocal` class if necessary:

```javascript
function loadFromLocalStorage() {
    const svgKeys = [];
    for (let i = 0; i < localStorage.length; i++) {
        const key = localStorage.key(i);
        if (key.startsWith('svg_')) {
            const rawData = localStorage.getItem(key);
            try {
                const item = JSON.parse(rawData);
                svgKeys.push({ key, src: item.src, isAuto: item.isAuto });
            } catch (e) {
                // Fallback for old simple string data
                svgKeys.push({ key, src: rawData, isAuto: false });
            }
        }
    }
    svgKeys.sort((a, b) => {
        const numA = parseInt(a.key.replace('svg_', ''), 10);
        const numB = parseInt(b.key.replace('svg_', ''), 10);
        return numA - numB;
    });
    dataarea.innerHTML = '';
    svgKeys.forEach(item => {
        const img = document.createElement('img');
        img.src = item.src;
        img.classList.add('ejtilesvgdata');
        if (item.isAuto) img.classList.add('ejautolocal');
        dataarea.appendChild(img);
    });
}
```

ejsoon · 帖子由 **ejsoon** » 2026年 4月 17日 22:25

竟然能上傳js文件了？

增加每12秒自動保存到localstorage。

ejsoon · 帖子由 **ejsoon** » 2026年 4月 18日 07:18

時針分針秒針：

ejsoon · 帖子由 **ejsoon** » 2026年 4月 18日 08:51

修改自動保存邏輯：

自動保存不會在頁面加載時自動開啟，也不再只能保存到第一個。

當點擊#update時，它將處於select狀態，再點擊下面dataarea的其中一個img時，此img邊框色變#a72，它將每隔7秒自動保存到那個img所指向的數據。當再次點擊update時，選中狀態消失，停止自動保存。

在保存時，img的左上角會短暫出現一個綠色的加號，可直接使用add內的svg圖案。

當開啟自動保存和關閉自動保存時，才會把當前數據放進undo stack中，在自動保存期間不會自動保存進undo stack。

只需給出所要修改的地方，所有的代碼和注釋都要使用英文。

代码：全选

Here are the specific modifications needed to implement the new auto-save logic. 

### 1. Add new global variables for the auto-save interval
Place these near your existing global variables (like `let deleteMode = false;`, `let historyIndex = -1;`):

```javascript
// New global variables for target-based auto-saving
let autoSaveInterval = null;
let autoSaveTarget = null;
// Ensure dataarea is relative so the absolute-positioned plus sign aligns correctly
dataarea.style.position = 'relative';
```

### 2. Update the `dataarea` click listener
Replace your current `dataarea.addEventListener` block with this updated version to handle selecting the target image and triggering the 7-second auto-save interval:

```javascript
dataarea.addEventListener('click', function(event) {
    const target = event.target;
    if (target.classList.contains('ejtilesvgdata')) {
        if (deleteMode) {
            deleteSvg(target);
            deleteMode = false;
        } else if (updateMode) {
            // Remove border from previously targeted image if one exists
            if (autoSaveTarget) {
                autoSaveTarget.style.border = ''; 
            } else {
                // Push to undo stack only when turning on auto-save for the first time
                saveState(); 
            }
            
            // Set new auto-save target and style it
            autoSaveTarget = target;
            autoSaveTarget.style.border = '2px solid #a72';
            
            // Clear any existing interval to restart the 7-second timer
            if (autoSaveInterval) {
                clearInterval(autoSaveInterval);
            }
            
            // Start auto-saving to this specific target every 7 seconds
            autoSaveInterval = setInterval(autoSaveTick, 7000);
            
        } else {
            etmain.outerHTML = atob(target.src.split(',')[1]);
            etinit();
            recordHistory();
        }
        setButtonBorder();
    }
});
```

### 3. Update the `updateButton` click listener
Replace your current `updateButton.addEventListener` block. This controls stopping the auto-save, resetting borders, and pushing the final state to the undo stack.

```javascript
updateButton.addEventListener('click', function() {
    if (updateMode == true) {
        updateMode = false;
        
        // Stop auto-save and push to undo stack
        if (autoSaveInterval) {
            clearInterval(autoSaveInterval);
            autoSaveInterval = null;
        }
        if (autoSaveTarget) {
            autoSaveTarget.style.border = ''; // Remove the #a72 border
            autoSaveTarget = null;
            saveState(); // Push to undo stack when turning off auto-save
        }
    } else {
        updateMode = true;
        deleteMode = false;
    }
    setButtonBorder();
});
```

### 4. Replace the old `autoSave` logic
Delete your existing `function autoSave()` and `setInterval(autoSave, 12000);` at the very bottom of the file. Replace them with these two new functions to handle the timed saving and visual indicator:

```javascript
// Function to show a temporary green plus sign on the top-left of the target image
function showSaveIndicator(img) {
    const addSvg = document.querySelector('#add svg');
    const plusIndicator = addSvg.cloneNode(true);
    
    // Position the SVG over the target image
    plusIndicator.style.position = 'absolute';
    plusIndicator.style.top = img.offsetTop + 'px';
    plusIndicator.style.left = img.offsetLeft + 'px';
    plusIndicator.style.width = '24px';
    plusIndicator.style.height = '24px';
    plusIndicator.style.backgroundColor = 'rgba(255, 255, 255, 0.8)';
    plusIndicator.style.borderRadius = '2px';
    plusIndicator.style.zIndex = '10';
    
    // Change the SVG path stroke to green
    const paths = plusIndicator.querySelectorAll('path');
    paths.forEach(p => p.setAttribute('stroke', '#0f0'));
    
    dataarea.appendChild(plusIndicator);
    
    // Remove the indicator after 500 milliseconds
    setTimeout(() => {
        plusIndicator.remove();
    }, 500);
}

// Function to handle auto-saving to the selected target every 7 seconds
function autoSaveTick() {
    if (!autoSaveTarget) return;
    
    let etmainclone = etmain.cloneNode(true);
    let etmaincwait = etmainclone.querySelector(".etwait");
    if (etmaincwait) etmaincwait.remove();
    
    let data = etmainclone.outerHTML;
    const base64Data = 'data:image/svg+xml;base64,' + btoa(data);
    
    autoSaveTarget.src = base64Data;
    
    // Update local storage WITHOUT pushing to the undo stack
    updateLocalStorage();
    
    // Show visual confirmation on the image
    showSaveIndicator(autoSaveTarget);
}
```

將改進混亂時鐘的網頁版

Re: 將改進混亂時鐘的網頁版

Re: 將改進混亂時鐘的網頁版

Re: 將改進混亂時鐘的網頁版

Re: 將改進混亂時鐘的網頁版

Re: 將改進混亂時鐘的網頁版

Re: 將改進混亂時鐘的網頁版

在线用户