<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Articles on City of Ten Thousand Buddhas</title><link>https://cttbusa.org/articles/</link><description>Recent content in Articles on City of Ten Thousand Buddhas</description><generator>Hugo</generator><language>en-US</language><lastBuildDate>Tue, 20 Oct 2026 00:00:00 +0000</lastBuildDate><atom:link href="https://cttbusa.org/articles/index.xml" rel="self" type="application/rss+xml"/><item><title>塞納河邊，梁皇啟建</title><link>https://cttbusa.org/articles/lhbc-seine/</link><pubDate>Tue, 20 Oct 2026 00:00:00 +0000</pubDate><guid>https://cttbusa.org/articles/lhbc-seine/</guid><description/></item><item><title/><link>https://cttbusa.org/articles/css/lhbc-tiao-zhuan-beginning-ending/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://cttbusa.org/articles/css/lhbc-tiao-zhuan-beginning-ending/</guid><description>&lt;!DOCTYPE html&gt;&#10;&lt;html lang="en"&gt;&#10;&lt;head&gt;&#10; &lt;meta charset="UTF-8"&gt;&#10; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;&#10; &lt;title&gt;控制面板 · 卷首卷尾与跳转&lt;/title&gt;&#10; &lt;style&gt;&#10; /* 基础样式，让界面更整洁 */&#10; * {&#10; box-sizing: border-box;&#10; margin: 0;&#10; padding: 0;&#10; }&#10;&#10; body {&#10; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;&#10; background: #faf9f8;&#10; padding: 2rem 1rem;&#10; display: flex;&#10; flex-direction: column;&#10; align-items: center;&#10; }&#10;&#10; /* 长内容模拟，让页面可滚动，展示滚动效果 */&#10; .content-placeholder {&#10; max-width: 780px;&#10; width: 100%;&#10; background: white;&#10; border-radius: 24px;&#10; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);&#10; padding: 2rem 2rem 3rem;&#10; margin-bottom: 2rem;&#10; }&#10;&#10; .content-placeholder h2 {&#10; font-weight: 500;&#10; font-size: 1.8rem;&#10; letter-spacing: -0.02em;&#10; margin-bottom: 1.5rem;&#10; color: #1e1e1e;&#10; border-left: 5px solid #1e1e1e;&#10; padding-left: 1rem;&#10; }&#10;&#10; .question-item {&#10; padding: 1.5rem 0;&#10; border-bottom: 1px solid #eaeaea;&#10; }&#10;&#10; .question-item:last-child {&#10; border-bottom: none;&#10; }&#10;&#10; .question-label {&#10; font-weight: 600;&#10; font-size: 1.1rem;&#10; color: #1e1e1e;&#10; margin-bottom: 0.4rem;&#10; display: flex;&#10; align-items: center;&#10; gap: 0.5rem;&#10; }&#10;&#10; .question-label .badge {&#10; background: #1e1e1e;&#10; color: white;&#10; font-size: 0.75rem;&#10; padding: 0.2rem 0.6rem;&#10; border-radius: 30px;&#10; font-weight: 400;&#10; letter-spacing: 0.02em;&#10; }&#10;&#10; .answer {&#10; color: #3a3a3a;&#10; line-height: 1.6;&#10; font-size: 1rem;&#10; background: #f6f6f6;&#10; padding: 1rem 1.2rem;&#10; border-radius: 16px;&#10; margin-top: 0.6rem;&#10; }&#10;&#10; /* ----- 控制区卡片样式 ----- */&#10; .controls-section {&#10; max-width: 780px;&#10; width: 100%;&#10; margin-bottom: 2rem;&#10; }&#10;&#10; .controls {&#10; background: white;&#10; padding: 1.5rem 1.8rem;&#10; border-radius: 60px;&#10; box-shadow: 0 10px 25px -8px rgba(0, 0, 0, 0.1);&#10; display: flex;&#10; flex-wrap: wrap;&#10; align-items: center;&#10; gap: 0.75rem 1rem;&#10; border: 1px solid #f0f0f0;&#10; backdrop-filter: blur(2px);&#10; }&#10;&#10; .controls button {&#10; background: #1e1e1e;&#10; border: none;&#10; color: white;&#10; font-weight: 500;&#10; font-size: 0.95rem;&#10; padding: 0.7rem 1.3rem;&#10; border-radius: 40px;&#10; cursor: pointer;&#10; transition: all 0.2s ease;&#10; letter-spacing: 0.01em;&#10; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);&#10; border: 1px solid #1e1e1e;&#10; display: inline-flex;&#10; align-items: center;&#10; justify-content: center;&#10; line-height: 1;&#10; white-space: nowrap;&#10; }&#10;&#10; .controls button:hover {&#10; background: #333;&#10; transform: translateY(-1px);&#10; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);&#10; }&#10;&#10; .controls button:active {&#10; transform: translateY(1px);&#10; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);&#10; }&#10;&#10; /* 跳转组特殊样式 */&#10; .jump-group {&#10; display: flex;&#10; align-items: center;&#10; gap: 0.5rem;&#10; background: #f5f5f5;&#10; padding: 0.25rem 0.25rem 0.25rem 1rem;&#10; border-radius: 40px;&#10; margin-left: auto; /* 把跳转推到右边，视觉更平衡 */&#10; }&#10;&#10; @media (max-width: 650px) {&#10; .jump-group {&#10; margin-left: 0;&#10; width: 100%;&#10; justify-content: space-between;&#10; }&#10; .controls {&#10; border-radius: 32px;&#10; justify-content: center;&#10; }&#10; }&#10;&#10; .jump-group label {&#10; font-size: 0.9rem;&#10; color: #5a5a5a;&#10; font-weight: 450;&#10; white-space: nowrap;&#10; }&#10;&#10; .jump-group input {&#10; width: 70px;&#10; padding: 0.55rem 0.7rem;&#10; border-radius: 40px;&#10; border: 1px solid #ddd;&#10; background: white;&#10; font-size: 0.9rem;&#10; text-align: center;&#10; outline: none;&#10; transition: 0.15s;&#10; font-weight: 500;&#10; }&#10;&#10; .jump-group input:focus {&#10; border-color: #1e1e1e;&#10; box-shadow: 0 0 0 3px rgba(30, 30, 30, 0.1);&#10; }&#10;&#10; .jump-group button {&#10; background: #1e1e1e;&#10; padding: 0.55rem 1.2rem;&#10; font-size: 0.9rem;&#10; }&#10;&#10; /* 卷尾标记样式 */&#10; .tail-marker {&#10; text-align: center;&#10; margin-top: 1.5rem;&#10; font-size: 0.85rem;&#10; color: #aaa;&#10; letter-spacing: 0.3px;&#10; border-top: 1px dashed #ddd;&#10; padding-top: 2rem;&#10; font-weight: 400;&#10; }&#10; &lt;/style&gt;&#10;&lt;/head&gt;&#10;&lt;body&gt;&#10;&#10; &lt;!-- 模拟长回答内容区域 (方便演示滚动和跳转) --&gt;&#10; &lt;div class="content-placeholder" id="questionList"&gt;&#10; &lt;h2&gt;📋 回答卷&lt;/h2&gt;&#10;&#10; &lt;!-- 每个问题作为一个锚点，id="q1" ... "q8" 用于跳转 --&gt;&#10; &lt;div class="question-item" id="q1"&gt;&#10; &lt;div class="question-label"&gt;&lt;span class="badge"&gt;#1&lt;/span&gt; 什麼是閉包？&lt;/div&gt;&#10; &lt;div class="answer"&gt;閉包是指函數記住了其詞法作用域，即使該函數在其詞法作用域之外執行。經典例子：計數器。&lt;/div&gt;&#10; &lt;/div&gt;&#10;&#10; &lt;div class="question-item" id="q2"&gt;&#10; &lt;div class="question-label"&gt;&lt;span class="badge"&gt;#2&lt;/span&gt; 解釋事件循環 (Event Loop)&lt;/div&gt;&#10; &lt;div class="answer"&gt;事件循環是 JavaScript 的並發模型，負責執行代碼、收集和處理事件、執行排隊的子任務。&lt;/div&gt;&#10; &lt;/div&gt;&#10;&#10; &lt;div class="question-item" id="q3"&gt;&#10; &lt;div class="question-label"&gt;&lt;span class="badge"&gt;#3&lt;/span&gt; var、let、const 區別&lt;/div&gt;&#10; &lt;div class="answer"&gt;var 有函數作用域與變量提升；let、const 是塊級作用域。const 宣告後不能重新賦值。&lt;/div&gt;&#10; &lt;/div&gt;&#10;&#10; &lt;div class="question-item" id="q4"&gt;&#10; &lt;div class="question-label"&gt;&lt;span class="badge"&gt;#4&lt;/span&gt; 什麼是 Promise？&lt;/div&gt;&#10; &lt;div class="answer"&gt;Promise 是異步操作的最終完成或失敗的對象，提供 .then、.catch、.finally 等方法。&lt;/div&gt;&#10; &lt;/div&gt;&#10;&#10; &lt;div class="question-item" id="q5"&gt;&#10; &lt;div class="question-label"&gt;&lt;span class="badge"&gt;#5&lt;/span&gt; 箭頭函數與普通函數差異&lt;/div&gt;&#10; &lt;div class="answer"&gt;箭頭函數沒有自己的 this、arguments，也不能用作構造函數。它捕獲所在上下文的 this。&lt;/div&gt;&#10; &lt;/div&gt;&#10;&#10; &lt;div class="question-item" id="q6"&gt;&#10; &lt;div class="question-label"&gt;&lt;span class="badge"&gt;#6&lt;/span&gt; 什麼是原型鏈？&lt;/div&gt;&#10; &lt;div class="answer"&gt;每個對象都有一個指向原型對象的內部鏈接，當訪問屬性時會沿著原型鏈向上查找。&lt;/div&gt;&#10; &lt;/div&gt;&#10;&#10; &lt;div class="question-item" id="q7"&gt;&#10; &lt;div class="question-label"&gt;&lt;span class="badge"&gt;#7&lt;/span&gt; async/await 的作用&lt;/div&gt;&#10; &lt;div class="answer"&gt;async 函數返回 Promise，await 用於等待 Promise 解決，讓異步代碼寫起來像同步。&lt;/div&gt;&#10; &lt;/div&gt;&#10;&#10; &lt;div class="question-item" id="q8"&gt;&#10; &lt;div class="question-label"&gt;&lt;span class="badge"&gt;#8&lt;/span&gt; 什麼是模塊化？&lt;/div&gt;&#10; &lt;div class="answer"&gt;模塊化將代碼拆分為獨立、可復用的單元，例如 ES Modules 使用 import/export。&lt;/div&gt;&#10; &lt;/div&gt;&#10;&#10; &lt;!-- 卷尾标记（视觉提示，也作为“卷尾”跳转目标） --&gt;&#10; &lt;div class="tail-marker" id="scrollTail"&gt;—— 卷尾 · 到底了 ——&lt;/div&gt;&#10; &lt;/div&gt;&#10;&#10; &lt;!-- 控制区域：包含展开、收起、回到卷首、回到卷尾、以及跳转问题#? --&gt;&#10; &lt;section class="controls-section"&gt;&#10; &lt;div class="controls"&gt;&#10; &lt;!-- 原有功能: 展开/收起/回到卷首 (保持原样) --&gt;&#10; &lt;button onclick="expandAll()"&gt;展開全部&lt;/button&gt;&#10; &lt;button onclick="collapseAll()"&gt;收起回答&lt;/button&gt;&#10; &lt;button onclick="window.scrollTo({top:0,behavior:'smooth'})"&gt;回到卷首&lt;/button&gt;&#10;&#10; &lt;!-- 新增: 回到卷尾 (使用 scrollTo 平滑滚动到最底部) --&gt;&#10; &lt;button onclick="scrollToTail()"&gt;回到卷尾&lt;/button&gt;&#10;&#10; &lt;!-- 新增: 調到問題#? 输入编号后跳转 --&gt;&#10; &lt;div class="jump-group"&gt;&#10; &lt;label for="questionNumber"&gt;調到問題&lt;/label&gt;&#10; &lt;input type="number" id="questionNumber" min="1" max="8" placeholder="#" value="1" step="1"&gt;&#10; &lt;button onclick="jumpToQuestion()"&gt;跳转&lt;/button&gt;&#10; &lt;/div&gt;&#10; &lt;/div&gt;&#10; &lt;/section&gt;&#10;&#10; &lt;script&gt;&#10; // ---------- 原有函数 (演示用) ----------&#10; // 展开全部: 将所有 .answer 显示出来 (简单展示，原本可能受折叠控制，这里为了演示可见性)&#10; function expandAll() {&#10; const answers = document.querySelectorAll('.answer');&#10; answers.forEach(el =&gt; {&#10; el.style.display = 'block'; // 确保可见&#10; // 加一点动画视觉反馈 (可选)&#10; el.style.transition = '0.15s';&#10; el.style.opacity = '1';&#10; });&#10; // 同时也显示出尾部标记 (如果被隐藏)&#10; const tail = document.querySelector('.tail-marker');&#10; if (tail) tail.style.display = 'block';&#10; // 刷新一下（无实际存储，只是为了演示）&#10; console.log('全部展开 (演示)');&#10; }&#10;&#10; // 收起回答: 将所有 .answer 隐藏 (演示)&#10; function collapseAll() {&#10; const answers = document.querySelectorAll('.answer');&#10; answers.forEach(el =&gt; {&#10; el.style.display = 'none'; // 隐藏回答内容&#10; });&#10; // 注意：尾部标记保留，但回答隐藏后占位还在，没问题&#10; console.log('回答已收起 (演示)');&#10; }&#10;&#10; // 新增: 滚动到卷尾 (最底部)&#10; function scrollToTail() {&#10; // 方案1: 滚动到页面底部 (整个文档底部)&#10; // window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });&#10;&#10; // 方案2 (更精确): 滚动到卷尾标记元素 (id="scrollTail")，并使其靠近视口底部&#10; const tailElement = document.getElementById('scrollTail');&#10; if (tailElement) {&#10; // 平滑滚动到卷尾标记，并让标记底部可见 (滚动到元素底部)&#10; tailElement.scrollIntoView({ behavior: 'smooth', block: 'end' });&#10; } else {&#10; // 如果找不到标记，回退到滚动到整个文档底部&#10; window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });&#10; }&#10; }&#10;&#10; // 新增: 跳转到指定问题 (#1 ~ #8)&#10; function jumpToQuestion() {&#10; // 获取输入框的值&#10; const input = document.getElementById('questionNumber');&#10; if (!input) return;&#10; &#10; let number = parseInt(input.value, 10);&#10; // 简单校验: 如果无效或超出范围，提示并重置&#10; const maxQuestions = 8; // 目前有8个问题 (q1 ~ q8)&#10; &#10; if (isNaN(number) || number &lt; 1 || number &gt; maxQuestions) {&#10; alert(`請輸入 1 到 ${maxQuestions} 之間的數字`);&#10; // 重置为1（或者保持之前，但为演示清晰，重置）&#10; input.value = 1;&#10; return;&#10; }&#10; &#10; // 构造目标元素的 id，例如 q1, q2 ...&#10; const targetId = 'q' + number;&#10; const targetElement = document.getElementById(targetId);&#10; &#10; if (targetElement) {&#10; // 平滑滚动到该元素，并让它出现在视口顶部附近 (block: 'start')&#10; targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });&#10; // 可选: 短暂高亮一下目标问题 (视觉反馈)&#10; targetElement.style.transition = 'background 0.3s';&#10; targetElement.style.background = '#fff9e6';&#10; setTimeout(() =&gt; {&#10; targetElement.style.background = '';&#10; }, 800);&#10; } else {&#10; alert('找不到對應的問題，請確認編號');&#10; }&#10; }&#10;&#10; // 页面加载后可以做一些初始化 (比如确保回答默认可见)&#10; window.addEventListener('DOMContentLoaded', () =&gt; {&#10; // 确保所有回答显示 (因为可能有人手动隐藏了，刷新后正常)&#10; // 但为了演示效果，默认都是显示的，没问题。&#10; // 也可以给输入框添加回车快捷跳转&#10; const inputField = document.getElementById('questionNumber');&#10; if (inputField) {&#10; inputField.addEventListener('keypress', (e) =&gt; {&#10; if (e.key === 'Enter') {&#10; e.preventDefault();&#10; jumpToQuestion();&#10; }&#10; });&#10; }&#10; });&#10;&#10; // 为了让「回到卷尾」在页面较短时也能正常工作，无需额外处理&#10; // 若内容不够长，scrollIntoView 会尝试滚动到最底部，效果符合预期&#10; &lt;/script&gt;&#10;&#10; &lt;!-- 如果内容不够长，可以再添加一些填充文字使滚动明显 (但已有8个问题，一般够) --&gt;&#10; &lt;!-- 可选: 增加一些底部填充以保证卷尾可见 (但已有tail-marker) 无需额外操作 --&gt;&#10;&lt;/body&gt;&#10;&lt;/html&gt;</description></item></channel></rss>