JavaScript 經典網頁特效實戰：文字跟隨滑鼠漂浮 & 訪客停留時間顯示

特效一：文字跟隨滑鼠漂浮

讓指定文字在滑鼠移動時如蛇般跟隨漂浮，增加頁面動態感。

核心實現步驟

1. CSS 定義文字樣式：絕對定位、初始隱藏、字體顏色大小。
2. JavaScript 初始化：將文字拆分為單字元陣列，創建對應的 span 元素，預設位置置於可視區外。
3. 滑鼠事件捕獲：跨瀏覽器獲取滑鼠座標 (pageX/pageY 或 clientX/clientY + scrollLeft/scrollTop)。
4. 動畫循環：定時器每 30ms 更新各字元位置，前一字元位置傳遞給後一字元，形成漂浮軌跡。
5. DOM 渲染：根據瀏覽器模型 (document.all 或 document.layers) 設置各 span 的 left/top。

關鍵代碼片段

<STYLE>
.spanstyle { position:absolute; visibility:visible; top:-50px; font-size:10pt; font-family:Verdana; font-weight:bold; color:red; }
</STYLE>

<script>
var message = "您的自定義文字".split("");
var xpos = [], ypos = [];
for (var i=0; i<message.length; i++) { xpos[i]=ypos[i]=-50; }

document.onmousemove = function(e) {
    e = e || window.event;
    x = e.pageX || document.body.scrollLeft + e.clientX;
    y = e.pageY || document.body.scrollTop + e.clientY;
};

function makesnake() {
    for (var i=message.length-1; i>0; i--) {
        xpos[i] = xpos[i-1] + 20;
        ypos[i] = ypos[i-1];
    }
    xpos[0] = x + 20; ypos[0] = y;
    for (var i=0; i<message.length; i++) {
        var span = document.getElementById("span"+i).style;
        span.left = xpos[i] + "px";
        span.top = ypos[i] + "px";
    }
    setTimeout(makesnake, 30);
}
// 頁面加載時創建 span 元素並啟動動畫
</script>

部署要點

• 在 <body> 中動態寫入 <span id='span0' class='spanstyle'>字</span>...
• 自定義文字內容，替換示例中的 URL/名稱。
• 現代瀏覽器建議使用 requestAnimationFrame 替代 setTimeout 提升性能。

特效二：訪客停留時間實時顯示

頁面顯示「您已停留 XX 分 XX 秒」並每秒更新，增強用戶粘性感知。

核心邏輯

1. 頁面加載時記錄 time_start = new Date() 基準時間戳。
2. show_secs() 計算當前時間差，轉換為「分:秒」格式 (不足兩位補零)。
3. 將結果寫入表單輸入框 document.time.time_spent.value。
4. setTimeout('show_secs()', 1000) 形成每秒更新循環。

關鍵代碼片段

<script>
var clock_start = new Date().getTime();
function show_secs() {
    var total_secs = Math.round((new Date().getTime() - clock_start) / 1000);
    var mins = Math.floor(total_secs / 60);
    var secs = total_secs % 60;
    document.time.time_spent.value = 
        (mins>9?mins:"0"+mins) + ":" + (secs>9?secs:"0"+secs);
    setTimeout(show_secs, 1000);
}
</script>

<body onload="show_secs()">
<form name="time">
您的停留時間為:<br>
<input type="text" name="time_spent" size="10" readonly>
</form>

現代化改進建議

• 使用 setInterval 替代遞歸 setTimeout，避免棧溢出風險。
• 採用 textContent 直接更新 <span> 或 <div>，無需表單控件。
• 結合 localStorage 實現跨頁面/跨會話累計停留時間統計。