跳到主要內容

CSS小技巧：製作「標籤選單(tab menu)」，完全沒用javascript

部落格文章或是網頁要提升使用者體驗，可以試試加上「標籤選單(tab menu)」。使用標籤選單可以將文章內容分類，然後依不同點選的分類顯示內容。範例如下：

第1頁 第2頁 第3頁

第1頁

這個是第1頁的內容

第2頁

這個是第2頁的內容

第3頁

這個是第3頁的內容

問題

當內容夠多時，按一下標籤標題時，瀏覽器會向下捲動，標籤選項就會看不到，必須向上捲動視窗才能繼續導覽，非常不方便。

會有這種效果是因為CSS的標籤選單是用<a>標籤的hash來控制的，瀏覽器預設功能中，點選hash的目標就會跳到相對應id的標籤(<tag>)，這種視窗捲動的行為也可以用來製作目錄。


解決方案

將標籤標題欄移到內容下方，設定固定內容高度及捲動功能。

第1頁

第1頁內容...dolor sit amet, consectetur adipiscing elit. Sed elit arcu, tincidunt at elit sed, efficitur sagittis mauris. Cras nec egestas arcu, ac tincidunt ipsum. Phasellus tincidunt auctor purus, vel convallis tortor condimentum quis. Aliquam pharetra convallis posuere. Phasellus hendrerit massa sit amet diam condimentum, viverra sodales velit placerat. In hac habitasse platea dictumst. Duis eu massa et sapien consequat pretium. Curabitur dui ante, molestie tempor sem sed, facilisis condimentum augue. Etiam at volutpat mi, maximus convallis diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed maximus ex ex, eu porttitor arcu pretium eget. Nulla sed elementum nunc. In dictum ipsum erat, vel mollis massa auctor eu. In posuere, magna ut lacinia placerat, erat nibh tristique purus, quis volutpat velit purus id quam. Vivamus aliquet nisi euismod, egestas ante nec, varius metus. Curabitur at massa vel ex tristique hendrerit. Aliquam in dolor dui. Etiam ac consectetur lorem. Quisque eget dapibus mi, quis eleifend orci. Sed vulputate odio a bibendum pellentesque. Nullam purus sem, accumsan vitae efficitur nec, fermentum non metus. Donec tortor nibh, sagittis eget suscipit rhoncus, commodo at sapien. Sed vitae odio pretium, malesuada dui imperdiet, scelerisque purus. In diam nulla, iaculis in magna vitae, aliquet suscipit erat. Vestibulum a finibus mauris, sed maximus tortor. In feugiat, dolor id maximus lobortis, nibh quam pellentesque lorem, eu facilisis mi velit id leo. Nullam ut ante erat. Ut sit amet risus viverra diam venenatis pretium. Suspendisse dignissim ex id sodales malesuada. In gravida fermentum nunc a consectetur. Suspendisse augue turpis, vestibulum vel ipsum eu, feugiat cursus metus. Donec tempus risus lorem, id blandit ipsum rhoncus in. Cras ac elit ligula. Nam efficitur ex ut iaculis venenatis. Mauris vitae metus imperdiet eros tincidunt tincidunt eu ac turpis. Nunc aliquam gravida orci, id hendrerit mi condimentum et. Ut vestibulum tempor lectus, sit amet viverra ligula posuere ac. Quisque vel hendrerit urna, sed efficitur orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi in mauris commodo, convallis urna non, posuere eros. Sed ante leo, sodales non diam ut, dignissim mattis dui. Suspendisse leo dolor, porttitor id purus sed, pretium varius mi. Maecenas interdum lacus non ante faucibus egestas quis et risus. Curabitur vel mauris velit. Cras hendrerit fringilla felis, feugiat semper orci eleifend a. Vivamus pharetra ante vel nulla cursus, quis tristique leo tristique. Nunc pharetra lorem erat. Mauris gravida, odio in laoreet convallis, nibh sapien convallis ligula, sit amet convallis orci urna ut mauris. Aenean efficitur vitae ligula finibus luctus. Integer ultricies eleifend laoreet. Nullam aliquet felis quis elit venenatis, ac ultricies diam porttitor. Proin luctus, orci pretium tempus consequat, sapien purus cursus tortor, vitae consectetur metus risus sed justo. Phasellus maximus tempus ipsum. Praesent aliquet viverra erat, et vestibulum massa pellentesque ut. Nulla facilisi. Nullam volutpat erat in lacus vestibulum luctus. Ut lacinia metus eu rutrum aliquet. Etiam in auctor lectus.

第2頁

第2頁內容...Lorem ipsum dolor sit amet, Sed elit arcu, tincidunt at elit sed, efficitur sagittis mauris. Pellentesque vulputate neque non quam posuere fermentum. Donec ut eros eget urna eleifend vestibulum. mus convallis diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed maximus ex ex, eu porttitor arcu pretium eget. Nulla sed elementum nunc. In dictum ipsum erat, vel mollis massa auctor eu. In posuere, magna ut lacinia placerat, erat nibh tristique purus, quis volutpat velit purus id quam. Vivamus aliquet nisi euismod, egestas ante nec, varius metus. Curabitur at massa vel ex tristique hendrerit. Aliquam in dolor dui. Etiam ac consectetur lorem. Quisque eget dapibus mi, quis eleifend orci. Sed vulputate odio a bibendum pellentesque. Nullam purus sem, accumsan vitae efficitur nec, fermentum non metus. Donec tortor nibh, sagittis eget suscipit rhoncus, commodo at sapien. Sed vitae odio pretium, malesuada dui imperdiet, scelerisque purus. In diam nulla, iaculis in magna vitae, aliquet suscipit erat. Vestibulum a finibus mauris, sed maximus tortor. In feugiat, dolor id maximus lobortis, nibh quam pellentesque lorem, eu facilisis mi velit id leo. Nullam ut ante erat. Ut sit amet risus viverra diam venenatis pretium. Suspendisse dignissim ex id sodales malesuada. In gravida fermentum nunc a consectetur. Suspendisse augue turpis, vestibulum vel ipsum eu, feugiat cursus metus. Donec tempus risus lorem, id blandit ipsum rhoncus in. Cras ac elit ligula. Nam efficitur ex ut iaculis venenatis. Mauris vitae metus imperdiet eros tincidunt tincidunt eu ac turpis. Nunc aliquam gravida orci, id hendrerit mi condimentum et. Ut vestibulum tempor lectus, sit amet viverra ligula posuere ac. Quisque vel hendrerit urna, sed efficitur orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi in mauris commodo, convallis urna non, posuere eros. Sed ante leo, sodales non diam ut, dignissim mattis dui. Suspendisse leo dolor, porttitor id purus sed, pretium varius mi. Maecenas interdum lacus non ante faucibus egestas quis et risus. Curabitur vel mauris velit. Cras hendrerit fringilla felis, feugiat semper orci eleifend a. Vivamus pharetra ante vel nulla cursus, quis tristique leo tristique. Nunc pharetra lorem erat. Mauris gravida, odio in laoreet convallis, nibh sapien convallis ligula, sit amet convallis orci urna ut mauris. Aenean efficitur vitae ligula finibus luctus. Integer ultricies eleifend laoreet. Nullam aliquet felis quis elit venenatis, ac ultricies diam porttitor. Proin luctus, orci pretium tempus consequat, sapien purus cursus tortor, vitae consectetur metus risus sed justo. Phasellus maximus tempus ipsum. Praesent aliquet viverra erat, et vestibulum massa pellentesque ut. Nulla facilisi. Nullam volutpat erat in lacus vestibulum luctus. Ut lacinia metus eu rutrum aliquet. Etiam in auctor lectus.

第3頁

第3頁內容...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit arcu, tincidunt at elit sed, efficitur sagittis utate neque non quam posuere fermentum. Donec ut eros eget urna eleifend vestibulum. Cras nec egestas arcu, ac tincidunt ipsum. Phasellus tincidunt auctor purus, vel convallis tortor condimentum quis. Aliquam pharetra convallis posuere. Phasellus hendrerit massa sit amet diam condimentum, viverra sodales velit placerat. In hac habitasse platea dictumst. Duis eu massa et sapien consequat pretium. Curabitur dui ante, molestie tempor sem sed, facilisis condimentum augue. Etiam at volutpat mi, maximus convallis diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed maximus ex ex, eu porttitor arcu pretium eget. Nulla sed elementum nunc. In dictum ipsum erat, vel mollis massa auctor eu. In posuere, magna ut lacinia placerat, erat nibh tristique purus, quis volutpat velit purus id quam. Vivamus aliquet nisi euismod, egestas ante nec, varius metus. Curabitur at massa vel ex tristique hendrerit. Aliquam in dolor dui. Etiam ac consectetur lorem. Quisque eget dapibus mi, quis eleifend orci. Sed vulputate odio a bibendum pellentesque. Nullam purus sem, accumsan vitae efficitur nec, fermentum non metus. Donec tortor nibh, sagittis eget suscipit rhoncus, commodo at sapien. Sed vitae odio pretium, malesuada dui imperdiet, scelerisque purus. In diam nulla, iaculis in magna vitae, aliquet suscipit erat. Vestibulum a finibus mauris, sed maximus tortor. In feugiat, dolor id maximus lobortis, nibh quam pellentesque lorem, eu facilisis mi velit id leo. Nullam ut ante erat. Ut sit amet risus viverra diam venenatis pretium. Suspendisse dignissim ex id sodales malesuada. In gravida fermentum nunc a consectetur. Suspendisse augue turpis, vestibulum vel ipsum eu, feugiat cursus metus. Donec tempus risus lorem, id blandit ipsum rhoncus in. Cras ac elit ligula. Nam efficitur ex ut iaculis venenatis. Mauris vitae metus imperdiet eros tincidunt tincidunt eu ac turpis. Nunc aliquam gravida orci, id hendrerit mi condimentum et. Ut vestibulum tempor lectus, sit amet viverra ligula posuere ac. Quisque vel hendrerit urna, sed efficitur orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi in mauris commodo, convallis urna non, posuere eros. Sed ante leo, sodales non diam ut, dignissim mattis dui. Suspendisse leo dolor, porttitor id purus sed, pretium varius mi. Maecenas interdum lacus non ante faucibus egestas quis et risus. Curabitur vel mauris velit. Cras hendrerit fringilla felis, feugiat semper orci eleifend a. Vivamus pharetra ante vel nulla cursus, quis tristique leo tristique. Nunc pharetra lorem erat. Mauris gravida, odio in laoreet convallis, nibh sapien convallis ligula, sit amet convallis orci urna ut mauris. Aenean efficitur vitae ligula finibus luctus. Integer ultricies eleifend laoreet. Nullam aliquet felis quis elit venenatis, ac ultricies diam porttitor. Proin luctus, orci pretium tempus consequat, sapien purus cursus tortor, vitae consectetur metus risus sed justo. Phasellus maximus tempus ipsum. Praesent aliquet viverra erat, et vestibulum massa pellentesque ut. Nulla facilisi. Nullam volutpat erat in lacus vestibulum luctus. Ut lacinia metus eu rutrum aliquet. Etiam in auctor lectus.

第1頁 第2頁 第3頁

程式碼參考

<style>
.wrap{
  height:200px;
  overflow:scroll;
  }
.tab div {
  display: none;
}

.tab div:target {
  display: block;
}
</style><div class="tab">
<div class="wrap" id="l1">
  <h3>第1頁</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit arcu, tincidunt at elit 
  sed, efficitur sagittis mauris. Pellentesque vulputate neque non quam posuere fermentum. Donec ut eros 
  eget urna eleifend vestibulum. Cras nec egestas arcu, ac tincidunt ipsum. 
Phasellus tincidunt auctor purus, vel convallis tortor condimentum quis. Aliquam pharetra convallis posuere. 
Phasellus hendrerit massa sit amet diam condimentum, viverra sodales velit placerat. In hac habitasse platea 
dictumst. Duis eu massa et sapien consequat pretium. Curabitur dui ante, molestie tempor sem sed, facilisis 
condimentum augue. Etiam at volutpat 
mi, maximus convallis diam.Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed maximus ex ex, 
eu porttitor arcu pretium eget. Nulla sed elementum nunc. In dictum ipsum erat, vel mollis massa auctor eu. 
In posuere, magna ut lacinia placerat, erat 
nibh tristique purus, quis volutpat velit purus id quam. Vivamus aliquet nisi euismod, egestas ante nec, 
varius metus. Curabitur at massa vel ex tristique hendrerit. Aliquam in dolor dui. Etiam ac consectetur
lorem. Quisque eget dapibus mi, quis eleifend 
orci.Sed vulputate odio a bibendum pellentesque. Nullam purus sem, accumsan vitae efficitur nec, fermentum non 
metus. Donec tortor nibh, sagittis eget suscipit rhoncus, commodo at sapien. Sed vitae odio pretium, malesuada dui 
imperdiet, scelerisque purus. In diam nulla, iaculis in magna vitae, aliquet suscipit erat. Vestibulum 
a finibus mauris, sed maximus tortor. In feugiat, dolor id maximus lobortis, nibh quam pellentesque lorem, 
eu facilisis mi velit id leo. Nullam ut ante erat. 
Ut sit amet risus viverra diam venenatis pretium. Suspendisse dignissim ex id sodales malesuada. In </p>
 </div>
<div class="wrap" id="l2">
  <h3>第2頁</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit arcu, tincidunt at elit sed, 
  efficitur sagittis mauris. Pellentesque vulputate neque non quam posuere fermentum. Donec ut eros eget urna 
  eleifend vestibulum. Cras nec egestas arcu, ac tincidunt ipsum. Phasellus tincidunt auctor purus, vel convallis
  tortor condimentum quis. Aliquam pharetra convallis posuere. Phasellus hendrerit massa sit amet diam 
  condimentum, viverra sodales velit placerat. In hac habitasse platea dictumst. Duis eu massa et 
  sapien consequat pretium. Curabitur dui ante, molestie 
  tempor sem sed, facilisis condimentum augue. Etiam at volutpat mi, maximus convallis diam.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed maximus ex ex, eu porttitor arcu pretium
eget. Nulla sed elementum nunc. In dictum ipsum erat, vel mollis massa auctor eu. In posuere, magna ut lacinia 
placerat, erat nibh tristique purus, quis volutpat velit purus id quam. Vivamus aliquet nisi euismod, egestas 
ante nec, varius metus. Curabitur at massa vel ex tristique hendrerit. Aliquam in dolor dui. Etiam ac consectetur 
lorem. Quisque eget dapibus mi, quis eleifend orci.
Sed vulputate odio a bibendum pellentesque. Nullam purus sem, accumsan vitae efficitur nec, fermentum non metus. 
Donec tortor nibh, sagittis eget suscipit rhoncus, commodo at sapien. Sed vitae odio pretium, malesuada dui 
imperdiet, scelerisque purus. In diam nulla, iaculis in magna vitae, aliquet suscipit erat. Vestibulum a 
finibus mauris, sed maximus tortor. In feugiat, dolor id maximus lobortis, nibh quam pellentesque lorem, 
eu facilisis mi velit id leo. Nullam ut ante erat. Ut sit amet risus viverra diam venenatis pretium. 
Suspendisse dignissim ex id sodales malesuada. In gravida fermentum nunc a consectetur.
</p>
  </div>
<div class="wrap" id="l3">
  <h3>第3頁</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit arcu, tincidunt at elit sed, 
  efficitur sagittis mauris. Pellentesque vulputate neque non quam posuere fermentum. Donec ut eros eget 
  urna eleifend vestibulum. Cras nec egestas arcu, ac tincidunt ipsum. Phasellus tincidunt auctor purus, 
  vel convallis tortor condimentum quis. Aliquam pharetra convallis posuere. Phasellus hendrerit massa sit 
  amet diam condimentum, viverra sodales velit placerat. In hac habitasse platea dictumst. Duis eu massa et 
  sapien consequat pretium. Curabitur dui ante, molestie tempor sem sed, facilisis condimentum augue. Etiam at 
  volutpat mi, maximus convallis diam.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed maximus ex ex, eu porttitor arcu pretium 
eget. Nulla sed elementum nunc. In dictum ipsum erat, vel mollis massa auctor eu. In posuere, magna ut lacinia 
placerat, erat nibh tristique purus, quis volutpat velit purus id quam. Vivamus aliquet nisi euismod, egestas 
ante nec, varius metus. Curabitur at massa vel ex tristique hendrerit. Aliquam in dolor dui. Etiam ac consectetur 
lorem. Quisque eget dapibus mi, quis eleifend orci.
Sed vulputate odio a bibendum pellentesque. Nullam purus sem, accumsan vitae efficitur nec, fermentum non metus.
Donec tortor nibh, sagittis eget suscipit rhoncus, commodo at sapien. Sed vitae odio pretium, malesuada dui imperdiet,
scelerisque purus. In diam nulla, iaculis in magna vitae, aliquet suscipit erat. Vestibulum a finibus mauris, 
sed maximus tortor. In feugiat, 
dolor id maximus lobortis, nibh quam pellentesque lorem, eu facilisis mi velit id leo. Nullam ut ante erat.
Ut sit amet risus viverra diam venenatis pretium. Suspendisse dignissim ex id sodales malesuada. In </p>
   </div>
<a href="#l1">第1頁</a>   
<a href="#l2">第2頁</a>
<a href="#l3">第3頁</a>
</div>
Labels:

留言

張貼留言

這個網誌中的熱門文章

母體變異數(population variance)、樣本變異數(sample variance)及自由度(degrees of freedom)

母體指的是所有的數據，樣本指的是從母體抽樣的數據，舉例來說，一個班級有40人，它們的身高，40個身高數據，若只針對這個班，就是母體，但是，卻只是代表全校學生身高的一部分，也就是樣本。 回到「機率統計」頁面 樣本平均數(mean)不是母體平均數，樣本變異數(variance)也不是母體變異數，一個班40個人身高的平均數很難剛好是全校學生的身高平均數。 一個班40個人的身高變異數也不會是全校學生的身高變異數。 變異數計算 母體變異數的定義如下： 而樣本變異數的定義如下： 奇怪的地方 平均數 雖然樣本平均數不是母體平均數，不過，如果不斷重複從同一個母體抽樣平均，會得到一個近似母體平均數的數字。舉例來說，從一個學校所有學生中，不斷隨機選出40個學生取平均數，再將這些平均數平均，結果會接近直接算全校學生的身高平均數。 也就是說樣本平均數的期望值就是母體平均數： 變異數 樣本變異數跟母體變異數就沒這麼單純了。奇怪的地方是，為什麼樣本變異數公式的除術是n-1，而不是像平均數計算一樣用n？ 為何樣本變異數要除的是(n-1)？ 除數為n的話，變異數會太小 如果樣本變異數的除數是n，樣本變異數就會常常比母體變異數小。為什麼呢？ 因為，樣本是從母體抽取的，抽樣的數據算出平均，並且抽樣的數據會相對的接近抽樣的平均，總不會剛好抽出的樣本平均數剛好是母體平均數，且樣本數據離樣本平均數就像母體數據離母體平均數一樣分散吧？ 假設母體數據為0-99的整數，共100個數據，從中選出10個數字，然後計算樣本的平均數，分別用n及n-1當作除數算出變異數，連續執行200次，並將200個樣本平均數及200個樣本變異數平均。 也就是取得樣本平均數及樣本變異數的期望值，結果如下： 母體平均數 = 49.5
張貼留言
Read more »

中央極限定理(central limit theorem)證明

中央極限定理(central limit theorem )指的是從一個獨立同分布(Independent and identically distributed, i.i.d)取出之變數數量趨近無限多時，其平均數(mean)將趨近常態分布(normal distribution)。 回到「機率統計」頁面 目錄： 動差母函數(moment generating function) 常態分布的動差母函數 中央極限定理證明 中央極限定理模擬 中央極限定理應用 動差母函數(moment generating function) 動差母函數為機率密度函數(probability density fFunction, PDF）及累積分佈函數(cumulative distribution function CDF)之外，另一種描述機率分布模型的一種方式。 定義 M X (t) = E[e tx ] 而 e tx 的泰勒級數(Taylor series)為 e tx  = 1 + tx + t 2 x 2 /2! +  t 3 x 3 /3! + ... 則 M X (t) 的泰勒級數為 M X (t) = E[e tx ]  = 1 + tE[x] +  t 2 /2! E[x 2 ] +  t 3 /3! E[x 3 ] + ... 因此，當t = 0時，以t取 動差母函數m次微分，就可以找到其分布模型的第m動差。 特性 M X+Y (t) = E[e t(x+y) ] =  E[e tx+ty ] =  E[e tx e ty ]  =  E[e tx ]  E[ e ty ] =  M X (t)  M Y (t)  常態分布的動差母
張貼留言
Read more »

HYG、LQD 與 TLT 風險報酬比較

10 年期公債除了站上 4%，再撰寫這篇文章時，已經在 4.3% 徘迴，上次在 這篇文章 研究了現在是否應該要買 LQD 而不是 TLT，本篇文章我想研究非投資等級債是否更適合。 買點 HYG 現在 HYG 價格為 74.04，距離近一次低點 2020/3/20 的 69.75，差別為 5.794% LQD 上次低點在 2020/10/14 的 100.38 附近，與目前的 105.01 相差 4.612%。 TLT 上次低點在 2022/11/4 的 94.22 附近，與目前的 95.16相差 1%。 殖利率上升時，公司債的表現 TLT 2009-01-06 到 2010-01-05 跌了 16.364% 這段期間美國 30 年期公債殖利率從 3.04% 漲到  3.74%，漲了 0.7%。 TLT 2012-11-14 到 2013-11-13 跌了 15.701% 這段期間 美國 30 年期公債殖利率從 2.73% 漲到  3.83%，漲了 1.1%。 TLT 2016-07-29 到 2017-07-28 跌了 10.307% 這段期間 美國 30 年期公債殖利率從 2.18% 漲到  2.89%，漲了 0.71%。 TLT 2021-11-18 到 2023-8-15 跌了 32.695% 這段期間美國 30 年期公債殖利率從 1.97% 漲到  4.35%，漲了 2.38%。 結論 HYG 現在也很便宜，在公債殖利率還有可能持續上漲狀況下，表現可能勝過公債及投資等級公司債。
張貼留言
Read more »

如何在Chart.js的圖上加上X軸或Y軸名稱

 Chart.js可以幫助網頁顯示各類圖表，要在X軸及Y軸上標示名稱方法如下： 找到Chart物件。 在Chart物件內找到options。 在options內找到scales，若無，自行加上scales。 即可在scales下設定X軸及Y軸的標示。 程式碼範例 <div> <canvas id="myChart"></canvas> </div> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script> const labels = [ '1', '2', '3', '4', '5', '6', ]; const data = { labels: labels, datasets: [{ label: '數據', backgroundColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)', data: [0, 10, 5, 2, 20, 30, 45], }] }; const config = { type: 'line', data, options: {scales:{ x:{ title:{ display:true, text:"月" } }, y:{ title:{ display:true, text:"unit" } } } } }; var myChart = new Chart( document.ge
張貼留言
Read more »

賭徒破產理論(Gambler's ruin)機率公式證明

賭徒破產理論(Gambler's ruin)指指的是兩位賭徒，每局賭1元，A賭徒有i元，B賭徒有n-i元，兩人不斷的賭，直到一人輸光為止。 回到「機率統計」頁面 前言 假設A賭徒勝率為p，輸的機率就是1-p，稱為q，我們要求算A贏光所有錢的機率。 讓p(i)代表A賭徒擁有i元的時候，獲得最後勝利的機率。 p(0) = 0，因為已經輸光所有錢並且賭局已結束。 p(n) = 1，因為已經贏光所有錢並且賭局已結束。 那麼p(i)呢？ 遞迴公式(recursive formula) 假設A有i元，它下一局有可能贏，有可能輸。贏的機率為p，輸的機率為1-p = q。 不論這一局是贏還是輸，A要贏光所有錢的機率還是沒有算出來。 這局贏了，接下來贏光所有錢的機率為p(i+1)。 這局輸了，接下來贏光所有錢的機率為p(i-1)。 因此，p(i) = p*p(i+1) + q*p(i-1)，且可以繼續延伸，例如p(i+1) = p*p(i+2) + q*p(i)、p(i-1) = p*p(i-) + q*p(i-2)... 每個公式需要套用原本的公式，稱為遞迴公式公式，而遞迴公式解法可以像解微分方程(differential equation)一樣，可以先用猜的！ 例如dx/dt = rx，微分之後x還是在公式裡，可以先猜測x = e^y。 猜測 假設，p(i) = x i ，並帶入p(i) = p*p(i+1) + q*p(i-1)，得到  x i   = p* x i+1  + q * x i-1 x = p* x 2  + q p* x 2  - x + q = 0 解一元二次方程式得 x = 1 或 x = q/p 微分方程 p(i) = x i ， x = 1 或 x = q/p，且有兩已知數 p(0) = 0 及 p(n) = 1。 而x i 的x有兩個根(root)，必須都帶入線性組合(linear combination)公式求解。 p(i) = A(1) i  + B ( q/p ) i  =  A +  B ( q/p ) i  p(0) = A + B = 0 ， A = -B p(n) = A + B ( q/p ) n   = 1 A + B ( q/p ) n  = -B +  B ( q/p ) n  = B(-1 +  ( q/p ) n )
張貼留言
Read more »