📝 留言板美化區 🖍️ 標記文字畫線效果 🎵 YT播放音樂按鈕 🗳️ 按鈕式移動小彈窗

文字網址轉換超連結

將下方程式碼貼於：版面配置 
<!-- 文字網址轉換連結 -->
<script>
function linkifyAndKeepBr(html) {
  return html.replace(
    // 核心網址匹配 + 斷點條件
    /(https?:\/\/[a-zA-Z0-9./?=&_%#-]+)(?=$|<a|[\u4e00-\u9fff]|[^\w./?=&_%#-])/g,
    '<a href="$1" target="_blank" style="color:#FB95B0;text-decoration:none;">連結文字</a>'
  );
}

document.addEventListener("DOMContentLoaded", function () {
  const fontTags = document.querySelectorAll("font");

  fontTags.forEach(el => {
    el.innerHTML = linkifyAndKeepBr(el.innerHTML);
  });
});
</script>

✏️保留原網址

將連結顯示文字改為 ${url} 即可保留原網址為超連結。

替換♂♀設定留言專屬圖樣/符號

將下方程式碼貼於：版面配置 > 留言板下方

💡這是與網址轉換結合的程式碼，不需要可自行刪減函式//2. 

<!-- 轉屬圖樣+轉換連結 -->
<script>
function processContent(html) {
  // 1. 先判斷性別符號 + 名字
  if (/^[♂♀]名稱A/.test(html)) {
    html = html.replace(/^([♂♀])名稱A/, "替換圖樣名稱A");
  } else if (/^[♂♀]名稱B/.test(html)) {
    html = html.replace(/^([♂♀])名稱B/, "替換圖樣名稱B");
  } else {
    html = html.replace(/^[♂♀]/, "其餘顯示圖樣");
  }

  // 2. 再處理網址轉換超連結
  html = html.replace(
    /(https?:\/\/[a-zA-Z0-9./?=&_%#-]+)(?=$|<a|[\u4e00-\u9fff]|[^\w./?=&_%#-])/g,
    '<a href="$1" target="_blank" style="color:#FB95B0;text-decoration:none;">連結文字</a>'
  );

  return html;
}

document.addEventListener("DOMContentLoaded", function () {
  const fontTags = document.querySelectorAll("font");

  fontTags.forEach(el => {
    el.innerHTML = processContent(el.innerHTML);
  });

  // 監聽動態新增的留言
  const table = document.querySelector("table"); // 換成你的留言容器
  if (table) {
    const observer = new MutationObserver(() => {
      table.querySelectorAll("font").forEach(el => {
        el.innerHTML = processContent(el.innerHTML);
      });
    });
    observer.observe(table, { childList: true, subtree: true });
  }
});
</script>

✏️使用方法

名稱A 改成自己的留言名稱。
替換圖樣 可用其他符號 or 電腦emoji圖示。 👉 圖樣參考
名稱B 設置第二位留言者專屬圖樣。設置多位,比照同段函式複製編寫

替換下課時間留言按鈕圖示

將下方程式碼貼於：版面配置 > 留言板下方

⭐文字連結版 

<!-- 替換圖示 -->
<script>
document.addEventListener("DOMContentLoaded", function () {
  // 1. 替換訪客回應按鈕
  document.querySelectorAll("a[href*='aft=re'] img[src*='re.gif']").forEach(img => {
    const link = img.closest("a");
    if (link) {
      link.innerHTML = "<span style='color: #999; background-color: #f4f4f4; padding: 5px; border-radius: 5px;'>回應</span>";
    }
  });

  // 2. 替換等待回覆按鈕
  document.querySelectorAll("img[src*='wait.gif']").forEach(img => {
    const span = document.createElement("span");
    span.textContent = "等待回覆";
    span.style.color = "#999";
    span.style.fontStyle = "italic";
    span.style.padding = "5px";
    span.style.backgroundColor = "#f4f4f4";
    span.style.borderRadius = "5px";
    img.parentNode.replaceChild(span, img);
  });

  // 3. 替換觀看密語按鈕
  document.querySelectorAll("a[href^='javascript:look'] img[src*='look.gif']").forEach(img => {
    const link = img.closest("a");
    if (link) {
      link.innerHTML = `<span style='color: #999; background-color: #f4f4f4; padding: 5px; border-radius: 5px;'>觀看密語</span>`;
      link.style.textDecoration = "none";
    }
  });

  // 4. 替換回留言板按鈕
  document.querySelectorAll("a[href='/book.php?A=你的留言板帳號'] img[src='http://images.kikia.net/images/back.gif']").forEach(img => {
    const link = img.closest("a");
    if (link) {
      link.innerHTML = `<span style='color: #999; background-color: #f4f4f4; padding: 5px; border-radius: 5px;'>回留言板</span>`;
    }
  });
});
</script>

⭐更換圖示版

程式碼同上，只需要將link.innerHTML = ``內語法
⤿ <span style='color:........5px;'>回應</span>
改為
⤿ <img src="圖檔網址" width="自訂縮放數字px">
// 替換等待回覆按鈕為另一張圖片
document.querySelectorAll("img[src*='wait.gif']").forEach(img => {
  const newImg = document.createElement("img");
  newImg.src = "新圖片路徑"; 
  newImg.style.width = "24px";  // 可調整大小
  newImg.style.height = "24px";
  img.parentNode.replaceChild(newImg, img);
});

去除留言IP隱藏符號

將下方程式碼貼於：版面配置 > 留言板下方 框內末端 
<!-- 去除IP符號 -->
<script>
function hideAllIPPatterns() {
  const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);

  while (walker.nextNode()) {
    const node = walker.currentNode;
    const text = node.nodeValue;

    // 檢查是否含有 IP 樣式
    if (text.includes('---') && /\*.*\*/.test(text)) {
      // 僅保留日期之前的文字
      const cleaned = text.split('---')[0].trim();
      node.nodeValue = cleaned;
    }
  }
}

// 初次執行
hideAllIPPatterns();

// 防止留言載入延遲
let counter = 0;
const checkTimer = setInterval(() => {
  hideAllIPPatterns();
  counter++;
  if (counter > 20) clearInterval(checkTimer);
}, 500);
</script>

隱藏與美化回應留言輸入框

將下方程式碼貼於：CSS語法

/* 輸入框固定字色 */
textarea[name="mess"] {
  color: #999 !important; /* 輸入框固定字色 */
  letter-spacing: 1.3pt; /* 文字間距 */
  margin: 5px 0px; /* 回應內容外框間距 */
}

/* 美化送出 重寫 回上頁按鈕樣式 */
input[type="submit"],
input[type="reset"],
input[type="button"] {
  background-color: #f9f9f9; /* 按鈕背景色 */
  color: #888; /* 文字顏色 */
  border: none; /* 去除框線 */
  border-radius: 8px; /* 圓角度 */
  padding: 4px 12px; /* 上下+左右內距 */
  font-size: 12px; /* 文字大小 */
  cursor: pointer; /* 手指型游標 */
  transition: background 0.3s, transform 0.2s; /* 動畫平滑效果 */
  margin: 5px 10px; /* 外間距 */
}

input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
  background-color: #f1f1f1;
  transform: translateY(-1px);
}

input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active {
  transform: translateY(1px);
  box-shadow: inset 0 0 3px rgba(0,0,0,0.2);
}

將下方Script貼於：版面配置 > 留言板下方

<!-- 美化/隱藏回應留言輸入框 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  // --- 1. 隱藏不要的欄位 ---
  const hideSelectors = [
    'select[name="sex"]',       // 性別
    'input[name="user"]',       // 好友密碼
    'select[name="color"]',     // 回應字色
    'input[name="email"]',      // 電子郵件
    'input[name="icq"]',        // ICQ
    'input[name="msn"]',        // MSN
    'input[name="yahoo"]'       // 即時通
  ];

  document.querySelectorAll(hideSelectors.join(',')).forEach(el => {
    const td = el.closest('td');
    if (!td) return;

    // 隱藏欄位
    td.style.display = 'none';

    // 隱藏左邊的 label td
    const prev = td.previousElementSibling;
    if (prev && prev.tagName.toLowerCase() === 'td') {
      prev.style.display = 'none';
    }
  });

  // --- 2. 美化留言輸入框 ---
  const mess = document.querySelector('textarea[name="mess"]');
  if(mess) {
    mess.style.backgroundColor = '#f9f9f9'; // 背景色
    mess.style.border = '1px solid #f9f9f9'; // 框線樣式
    mess.style.borderRadius = '8px';  // 圓角度
    mess.style.width = '340px'; // 寬度
    mess.style.height = '160px';  // 長度
    mess.style.padding = '6px 10px';  // 上下+左右內距
    mess.style.outline = 'none';
    mess.style.boxSizing = 'border-box';
    mess.spellcheck = false; // 關閉拼寫檢查
  }

  // --- 3. 美化其他輸入框 ---
  const inputs = ['name','urlname','url','authinput'];
  inputs.forEach(name => {
    const el = document.querySelector(`input[name="${name}"]`);
    if (!el) return;
    
    el.style.margin= '2px 0px';   // 外間距
    el.style.backgroundColor = '#f9f9f9';
    el.style.border = '1px solid #f9f9f9';
    el.style.borderRadius = '3px';
    el.style.outline = 'none';
    el.style.boxSizing = 'border-box';
    el.style.padding = '6px 10px';

    // 寬高
    if(name === 'authinput') {
      el.style.width = '60px';  // 驗證碼框寬
      el.style.height = '25px';
    } else {
      el.style.width = '130px';
      el.style.height = '25px';
    }
  });
});
</script>

✏️線條樣式

style.border順序: 1px solid #f9f9f9;　線寬 樣式 顏色
solid 實線　　dotted 點線　　 dashed 虛線　 double 雙線

留言內容主體調整與美化

將下方程式碼貼於：CSS

留言外框圓角加陰影 

/* 留言外框 */
table[width="400"][cellspacing="1"] {
  border-collapse: separate;
  border-radius: 15px;  /* 圓角度 */
  overflow: hidden;
  background: #f4f4f4;  /* 邊框色 */
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);  /* 陰影 */
  margin-bottom: 40px;  /* 留言框外間距 */
}
底部頁數顯示樣 
/* 頁數顯示 */
th {
  background-color:#fff;  /* 頁數背景色 */
  font-size: 7.5pt;  /* 數字大小 */
  font-family: 'Calibri', sans-serif;  /* (可選)小字體 */
}

留言內容顯示樣

/* 留言顯示 */
td {
  font-size: 8.5pt;  /* 字大小 */
  letter-spacing: 1.7pt;  /* 字間距 */ 
  padding:4px 0px;  /* 內文與暱稱距離(不能太多,訪客簽寫留言區也受影響) */
}

留言區塊左側空間縮減

/* 縮減左側寬度  */
td[rowspan="2"][width="80"][height="80"][align="center"][valign="bottom"] {
  width: 50px !important;  /* 改成你要的寬度 */
}

留言時間顯示樣+游標靠近轉變深色

/* 時間顯示  */
td[colspan="3"][align="right"],
div[align="right"] {
  padding-right: 15px;  /* 與右邊框距*/
  padding-top: 10px;  /* 與上方留言距離 */
  font-size: 8pt;   /* 數字大小 */
  color: #e5e5e5;   /* 淺色字 */
  letter-spacing: 1.2pt;   /* 字間距*/

}

/* 滑鼠移上去時變深色 */
td[colspan="3"][align="right"]:hover,
div[align="right"]:hover {
  color: #999999;
}

留言文字行距

/* 留言行距 */
font {
  line-height: 25px;
}

標記文字畫線效果

範例：黃色漸層畫線效果　綠色畫中線效果　紅色畫底線效果

css 

/* 標記漸層黃線 */
.mark.yellow {
   background: linear-gradient(
   transparent 40%,
   rgba(255,255,255,0) 40%, 
   #FFE174 90%, /* 黃色色碼 */
   transparent 95%
   padding: 2px 1px;
   color: #999999; /* 文字顏色 */
}
/* 標記綠中線 */
.mark.green {
	 background:linear-gradient(transparent 40%,rgba(255,255,255,0) 40%, #CCFF90 50%,transparent 70%);	
   padding: 2px 1px;
   color: #999999;
}
/* 標記紅底線 */  
.mark.red {
	 border-bottom: 3px solid #EC7A8E;
	 background: none;
	 margin: 0 -2px;
	 padding: 0 2px;
	 color: #999999;
  }
html 
<span class="mark yellow">黃色漸層畫線效果</span>
<span class="mark green">綠色畫中線效果</span>
<span class="mark red">紅色畫底線效果</span>

YOUTUBE播放音樂按鈕

範例：如網頁右側粉色播放音樂按鈕
若用於留言板請將JavaScript貼於：版面配置 > 留言板下方

html 

<!-- 播放音樂按鈕 -->
<div class="music-button" onclick="toggleMusic()" style="width:100px;height:66px;background-image:url('圖檔網址');background-size:cover;cursor:pointer;"></div> 
<!-- 隱藏的音樂播放器 -->
<iframe id="ytplayer" type="text/html" width="0" height="0" src="" frameborder="0" allow="autoplay" allowfullscreen></iframe>

JavaScript 

<!-- 播放Youtube音樂JS -->
<script>
let isPlaying = false;
let videoURL = "YouTube網址";
function getYouTubeID(url) {
  const regExp = /^.*(youtu\.be\/|v=|\/embed\/|\/v\/)([^#&?]*).*/;
  const match = url.match(regExp);
  return (match && match[2].length === 11) ? match[2] : null;
}

function toggleMusic() {
  const player = document.getElementById("ytplayer");
  const videoID = getYouTubeID(videoURL);

  if (!videoID) {
    console.error("❌ 無效的 YouTube 網址");
    return;
  }

  if (!isPlaying) {
    player.src = `https://www.youtube.com/embed/${videoID}?autoplay=1&mute=0&loop=1&playlist=${videoID}&controls=0&modestbranding=1`;
    isPlaying = true;
  } else {
    player.src = "";
    isPlaying = false;
  }
}
 </script>

圖檔按鈕+可移動小彈窗

小彈窗可作為公告、收納小物件用。範例見留言板下方的 表情包按鈕

css 
/* 按鈕圖效果 */
.popup-trigger {
  transition: transform 0.3s ease;
  cursor: pointer;
}

.popup-trigger:hover {
  animation: cute-bounce 0.6s ease;
  transform: scale(1.2) rotate(10deg);
}

 /* 彈窗外框 */
.popup {
  position: fixed;
  top: 200px;
  left: 200px;
  width: 280px;
  display: none;
  border: 3px solid #FFCAD3;
  border-radius: 20px;
  overflow: hidden;
  z-index: 9999;
  font-family: "Microsoft JhengHei", "Arial Rounded MT Bold", sans-serif;
  animation: popupBounce 0.4s ease;
}

/* 彈出動畫 */
@keyframes popupBounce {
  0% { transform: scale(0.7); opacity: 0; }
  60% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); }
}

/* 標題列 */
.popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #ffe4e9;
  border-radius: 17px 17px 0 0;
  cursor: move;
}

/* 標題文字 */
.popup-title {
  letter-spacing: 3px;
  font-size: 13px;
  color: #999;
  font-weight: bold;
}

/* 關閉按鈕 */
.popup-close {
  background: #ffb6c1;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  cursor: pointer;
  font-size: 14px;
  line-height: 22px;
  color: white;
  transition: background 0.2s;
}

.popup-close:hover {
  background: #FFCCD3;
  transform: scale(1.2) rotate(10deg);
}

/* 內容 */
.popup-inner {
  padding: 15px;
  text-align: center;
  font-size: 13px;
}
html 
<img src="按鈕圖檔" class="popup-trigger" onclick="showPopup()" alt="文字說明" style="width: 圖大小px;">

<div class="popup" id="popupBox">
 <div class="popup-header" id="dragHandle">
  <span class="popup-title">標題</span>
   <button class="popup-close" onclick="hidePopup()">×</button>
  </div>
 <div class="popup-inner">內容</div>
</div>
JavaScript 
<script>
const popup = document.getElementById("popupBox");
const dragHandle = document.getElementById("dragHandle");

let isDragging = false;
let offsetX = 0;
let offsetY = 0;

// 開啟/關閉函式 
function showPopup() { 
  popup.style.display = "block"; 
} 
function hidePopup() {
  popup.style.display = "none"; 
}

// 拖曳功能
dragHandle.addEventListener("mousedown", (e) => {
  isDragging = true;
  const rect = popup.getBoundingClientRect();
  offsetX = e.clientX - rect.left;
  offsetY = e.clientY - rect.top;
  document.body.style.userSelect = "none"; // 防止選文字
});

document.addEventListener("mousemove", (e) => {
  if (isDragging) {
    popup.style.left = `${e.clientX - offsetX}px`;
    popup.style.top = `${e.clientY - offsetY}px`;
  }
});

document.addEventListener("mouseup", () => {
  isDragging = false;
  document.body.style.userSelect = ""; // 還原選取
});
</script>

前言

在這裡分享一些我使用到的 HTML、CSS、JavaScript 語法。
方便讓自己之後更快找到需要的程式碼，同時也能幫助到正在學習用語法編輯美化留言板的朋友們。
希望在語法的世界裡大家越得心應手，玩出成就、玩得開心。

❗美化留言板原設定的語法僅針對下課時間版本的留言板修改.ᐟ

💡如果你也在找免費的網路存放空間，分享給你我使用的平台
　⤿ Neocities