如何使用 JavaScript 實作頁面標題的捲動顯示效果同時限制顯示字元數？
在網頁開發中，我們常常需要透過動態效果來吸引使用者的注意。其中，頁面標題的滾動顯示效果是一種常見且簡潔的方式。本文將介紹如何使用 JavaScript 實作頁面標題的捲動顯示效果，並同時限制顯示的字元數。
首先，我們需要明確的是，頁面標題是由瀏覽器中的</code>標籤定義的。因此，我們需要透過 JavaScript 來取得並修改這個標籤的內容。以下是實現滾動顯示效果的程式碼範例：</p>
<div class="code" style="position:relative; padding:0px; margin:0px;">
<pre class="brush:html;toolbar:false;"><!DOCTYPE html> <html> <head> <script> // 获取页面标题 var title = document.title; // 每次显示的字符数 var charCount = 0; // 定时器变量 var titleScroll; // 定义滚动显示标题的函数 function scrollTitle() { // 截取标题的前面部分 var prefix = title.substring(0, charCount++); // 修改页面标题 document.title = prefix; // 如果还没有显示完整标题，继续滚动 if (charCount <= title.length) { titleScroll = setTimeout(scrollTitle, 200); } else { // 显示完整标题后，重置字符计数器并重新开始滚动 charCount = 0; titleScroll = setTimeout(scrollTitle, 2000); } } // 页面加载后开始滚动显示标题 window.onload = function() { scrollTitle(); } // 当页面失去焦点时停止滚动，获得焦点时恢复滚动 window.onblur = function() { clearTimeout(titleScroll); } window.onfocus = function() { scrollTitle(); } </script> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script>
</head> <body> <!-- 在这里可以放置页面的内容 --> </body> </html></pre>
<div class="contentsignin">
登入後複製
</div>
</div>
<p>在上述程式碼中，我們定義了一個<code>scrollTitle</code>函數，用於實現標題的滾動顯示效果。函數透過遞歸呼叫<code>setTimeout</code>函數實作定時滾動。在每次捲動時，我們使用<code>substring</code>方法來截取標題的前面部分，並將其賦值給<code><title></code>標籤，實現標題的捲動效果。當顯示完整標題後，我們會將字元計數器重設為0，並在一定時間後重新開始捲動。</p>
<p>接下來，我們需要實作限制顯示字元數的功能。一個簡單的方式是修改<code>scrollTitle</code>函數，在對標題進行截取前，先限制標題的字元數。以下是修改後的程式碼範例：</p>
<div class="code" style="position:relative; padding:0px; margin:0px;">
<pre class="brush:javascript;toolbar:false;">// 定义滚动显示标题的函数 function scrollTitle() { // 截取指定长度的标题 var truncatedTitle = title.substring(0, charCount); // 修改页面标题 document.title = truncatedTitle; // 如果还没有显示完整标题，继续滚动 if (charCount <= title.length) { charCount++; titleScroll = setTimeout(scrollTitle, 200); } else { // 显示完整标题后，重置字符计数器并重新开始滚动 charCount = 0; titleScroll = setTimeout(scrollTitle, 2000); } }</pre>
<div class="contentsignin">
登入後複製
</div>
</div>
<p>在上述程式碼中，我們使用<code>substring</code>方法截取指定長度的標題，並將其賦值給<code><title></code>標籤，實現限製字元數的效果。每次滾動時，我們將字元計數器增加 1，並在遞歸呼叫中判斷是否還有剩餘字元需要滾動顯示。</p>
<p>透過以上程式碼範例，我們可以實現頁面標題的捲動顯示效果，並且限制顯示的字元數。你可以將上述程式碼拷貝到 HTML 檔案中，並在適當的位置放置頁面的內容，例如在<code><body></code>標籤中加入其他元素或文字。當頁面載入完成後，頁面標題就會以捲動的方式顯示在瀏覽器的標題列中。同時，你可以根據需要修改程式碼中的滾動速度、滾動間隔和字元數限制等參數，以獲得更好的滾動顯示效果。</p>
<p>以上是如何使用 JavaScript 實作頁面標題的捲動顯示效果同時限制顯示字元數？的詳細內容。更多資訊請關注PHP中文網其他相關文章！</p>
</div>
</div>
<div style="height: 25px;">
<div class="wzconBq" style="display: inline-flex;">
<span>相關標籤：</span>
<div class="wzcbqd">
<a onclick="hits_log(2,'www',this);" href-data="//m.sbmmt.com/zh-tw/search?word=javascript" target="_blank">javascript</a>
<a onclick="hits_log(2,'www',this);" href-data="//m.sbmmt.com/zh-tw/search?word=捲動顯示" target="_blank">捲動顯示</a>
<a onclick="hits_log(2,'www',this);" href-data="//m.sbmmt.com/zh-tw/search?word=頁面標題" target="_blank">頁面標題</a>
</div>
</div>
<div style="display: inline-flex;float: right; color:#333333;">
來源：php.cn
</div>
</div>
<div class="wzconOtherwz">
<a href="//m.sbmmt.com/zh-tw/faq/620325.html" title=""><span>上一篇：如何使用 JavaScript 實現無限滾動翻頁功能？</span></a>
<a href="//m.sbmmt.com/zh-tw/faq/620360.html" title=""><span>下一篇：如何使用 JavaScript 實作網頁表單驗證功能？</span></a>
</div>
<div class="wzconShengming">
<div class="bzsmdiv">
本網站聲明
</div>
<div>
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
</div>
</div>
<div class="wwads-cn wwads-horizontal" data-id="156" style="max-width:955px"></div>
<div class="wzconZzwz">
<div class="wzconZzwztitle">
作者最新文章
</div>
<ul>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="//m.sbmmt.com/zh-tw/faq/1796572071.html">如何隱藏你的 Linux 的命令列歷史</a>
</div>
<div>
2024-08-17 07:34:37
</div></li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="//m.sbmmt.com/zh-tw/faq/1796572070.html">消息稱 24 核心英特爾酷睿 Ultra 9 QS 處理器頻率達 5.7 GHz，比 ES2 版本高 1.0 GHz</a>
</div>
<div>
2024-08-17 07:34:32
</div></li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="//m.sbmmt.com/zh-tw/faq/1796572068.html">太空驚悚電影《異形：奪命艦》上映首日評分出爐：爛番茄 82%，IMDB 7.5</a>
</div>
<div>
2024-08-17 07:31:35
</div></li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="//m.sbmmt.com/zh-tw/faq/1796572065.html">榮耀</a>
</div>
<div>
2024-08-17 07:06:02
</div></li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="//m.sbmmt.com/zh-tw/faq/1796572061.html">努比亞</a>
</div>
<div>
2024-08-17 07:05:01
</div></li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="//m.sbmmt.com/zh-tw/faq/1796572059.html">華為教育優惠時間2024</a>
</div>
<div>
2024-08-17 07:04:31
</div></li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="//m.sbmmt.com/zh-tw/faq/1796572058.html">火山引擎發布豆包大模型文旅解決方案</a>
</div>
<div>
2024-08-17 07:02:01
</div></li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="//m.sbmmt.com/zh-tw/faq/1796572057.html">BenQ 推出全新 GV50 雷射手提式吸頂投影機</a>
</div>
<div>
2024-08-17 06:59:32
</div></li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="//m.sbmmt.com/zh-tw/faq/1796572055.html">《要塞英雄》重返 iPhone，但並非針對所有用戶</a>
</div>
<div>
2024-08-17 06:56:32
</div></li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="//m.sbmmt.com/zh-tw/faq/1796572053.html">MPG 321CURX：MSI 公佈新款戴爾 Alienware AW3225QF 競爭對手的規格和發布價格</a>
</div>
<div>
2024-08-17 06:53:35
</div></li>
</ul>
</div>
<div class="wzconZzwz">
<div class="wzconZzwztitle">
最新問題
</div>
<div class="wdsyContent">
<div class="wdsyConDiv flexRow wdsyConDiv1">
<div class="wdcdContent flexColumn">
<a href="//m.sbmmt.com/zh-tw/wenda/173508.html" target="_blank" title="使用 AJAX、PHP 和伺服器發送事件從 OpenAI 的 API 串流數據" class="wdcdcTitle">使用 AJAX、PHP 和伺服器發送事件從 OpenAI 的 API 串流數據</a>
<a href="//m.sbmmt.com/zh-tw/wenda/173508.html" class="wdcdcCons">如何使用伺服器傳送事件(SSE)將資料從上述API串流傳輸到使用JavaScript和PHP的瀏覽器客戶端？我已經研究這個問題好幾個小時了，但我似乎無法弄清楚出了什麼問題。作為參考...</a>
<div class="wdcdcInfo flexRow">
<div class="wdcdcileft">
<span class="wdcdciSpan">來自於 2023-11-11 12:03:23</span>
</div>
<div class="wdcdciright flexRow">
<div class="wdcdcirdz flexRow ira">
<b class="wdcdcirdzi"></b>0
</div>
<div class="wdcdcirpl flexRow ira">
<b class="wdcdcirpli"></b>1
</div>
<div class="wdcdcirwatch flexRow ira">
<b class="wdcdcirwatchi"></b>497
</div>
</div>
</div>
</div>
</div>
<div class="wdsyConLine wdsyConLine2"></div>
<div class="wdsyConDiv flexRow wdsyConDiv1">
<div class="wdcdContent flexColumn">
<a href="//m.sbmmt.com/zh-tw/wenda/173469.html" target="_blank" title="未捕獲的類型錯誤：無法設定未定義的屬性（設定'innerHTML”）" class="wdcdcTitle">未捕獲的類型錯誤：無法設定未定義的屬性（設定'innerHTML”）</a>
<a href="//m.sbmmt.com/zh-tw/wenda/173469.html" class="wdcdcCons">我正在嘗試使用php創建一個網頁，在“連續文字框”類別（由我的類別定義）的元素上，單擊時必須啟動一個Javascript函數，該函數應該更改另一個函數的內容id“harta-mod...</a>
<div class="wdcdcInfo flexRow">
<div class="wdcdcileft">
<span class="wdcdciSpan">來自於 2023-11-08 21:06:09</span>
</div>
<div class="wdcdciright flexRow">
<div class="wdcdcirdz flexRow ira">
<b class="wdcdcirdzi"></b>0
</div>
<div class="wdcdcirpl flexRow ira">
<b class="wdcdcirpli"></b>1
</div>
<div class="wdcdcirwatch flexRow ira">
<b class="wdcdcirwatchi"></b>278
</div>
</div>
</div>
</div>
</div>
<div class="wdsyConLine wdsyConLine2"></div>
<div class="wdsyConDiv flexRow wdsyConDiv1">
<div class="wdcdContent flexColumn">
<a href="//m.sbmmt.com/zh-tw/wenda/173425.html" target="_blank" title="JavaScript中如何取得CSS/HTML命名顏色的RGB值" class="wdcdcTitle">JavaScript中如何取得CSS/HTML命名顏色的RGB值</a>
<a href="//m.sbmmt.com/zh-tw/wenda/173425.html" class="wdcdcCons">我已經建立了一個名為[name-rgb]的Javascript物件。你的基本:namedColors={AliceBlue:[240,248,255],AntiqueWhite:[...</a>
<div class="wdcdcInfo flexRow">
<div class="wdcdcileft">
<span class="wdcdciSpan">來自於 2023-11-06 09:05:50</span>
</div>
<div class="wdcdciright flexRow">
<div class="wdcdcirdz flexRow ira">
<b class="wdcdcirdzi"></b>0
</div>
<div class="wdcdcirpl flexRow ira">
<b class="wdcdcirpli"></b>2
</div>
<div class="wdcdcirwatch flexRow ira">
<b class="wdcdcirwatchi"></b>210
</div>
</div>
</div>
</div>
</div>
<div class="wdsyConLine wdsyConLine2"></div>
<div class="wdsyConDiv flexRow wdsyConDiv1">
<div class="wdcdContent flexColumn">
<a href="//m.sbmmt.com/zh-tw/wenda/173404.html" target="_blank" title="為什麼這麼多 JavaScript 腳本要附加隨機數字給事物？碰撞？" class="wdcdcTitle">為什麼這麼多 JavaScript 腳本要附加隨機數字給事物？碰撞？</a>
<a href="//m.sbmmt.com/zh-tw/wenda/173404.html" class="wdcdcCons">我最近一直在學習JavaScript，並且看到了許多使用Math.rand()附加到連結的範例（Face book.com、可讀性書籤）。這解決了什麼問題？ Readability...</a>
<div class="wdcdcInfo flexRow">
<div class="wdcdcileft">
<span class="wdcdciSpan">來自於 2023-11-04 20:00:04</span>
</div>
<div class="wdcdciright flexRow">
<div class="wdcdcirdz flexRow ira">
<b class="wdcdcirdzi"></b>0
</div>
<div class="wdcdcirpl flexRow ira">
<b class="wdcdcirpli"></b>2
</div>
<div class="wdcdcirwatch flexRow ira">
<b class="wdcdcirwatchi"></b>296
</div>
</div>
</div>
</div>
</div>
<div class="wdsyConLine wdsyConLine2"></div>
<div class="wdsyConDiv flexRow wdsyConDiv1">
<div class="wdcdContent flexColumn">
<a href="//m.sbmmt.com/zh-tw/wenda/173339.html" target="_blank" title="識別 JavaScript 中的效能限制" class="wdcdcTitle">識別 JavaScript 中的效能限制</a>
<a href="//m.sbmmt.com/zh-tw/wenda/173339.html" class="wdcdcCons">我試圖找到我的Javascript中的瓶頸。基本上我正在開發一個用Javascript編寫的chrome擴展，它需要4-5秒來執行任務。該任務涉及大量程式碼，並且使用開發工具中內建...</a>
<div class="wdcdcInfo flexRow">
<div class="wdcdcileft">
<span class="wdcdciSpan">來自於 2023-10-31 20:47:17</span>
</div>
<div class="wdcdciright flexRow">
<div class="wdcdcirdz flexRow ira">
<b class="wdcdcirdzi"></b>0
</div>
<div class="wdcdcirpl flexRow ira">
<b class="wdcdcirpli"></b>1
</div>
<div class="wdcdcirwatch flexRow ira">
<b class="wdcdcirwatchi"></b>229
</div>
</div>
</div>
</div>
</div>
<div class="wdsyConLine wdsyConLine2"></div>
</div>
</div>
<div class="wzconZt">
<div class="wzczt-title">
<div>
相關專題
</div>
<a href="//m.sbmmt.com/zh-tw/faq/zt" target="_blank">更多></a>
</div>
<div class="wzcttlist">
<ul>
<li class="ul-li"><a target="_blank" href="//m.sbmmt.com/zh-tw/faq/jsszcd"><img src="https://img.php.cn/upload/subject/202407/22/2024072214415543594.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="js取得數組長度的方法"></a><a target="_blank" href="//m.sbmmt.com/zh-tw/faq/jsszcd" class="title-a-spanl" title=""><span>js取得數組長度的方法</span></a></li>
<li class="ul-li"><a target="_blank" href="//m.sbmmt.com/zh-tw/faq/jssxym"><img src="https://img.php.cn/upload/subject/202407/22/2024072214363232433.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="js刷新當前頁面"></a><a target="_blank" href="//m.sbmmt.com/zh-tw/faq/jssxym" class="title-a-spanl" title=""><span>js刷新當前頁面</span></a></li>
<li class="ul-li"><a target="_blank" href="//m.sbmmt.com/zh-tw/faq/jssswr"><img src="https://img.php.cn/upload/subject/202407/22/2024072214362363697.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="js四捨五入"></a><a target="_blank" href="//m.sbmmt.com/zh-tw/faq/jssswr" class="title-a-spanl" title=""><span>js四捨五入</span></a></li>
<li class="ul-li"><a target="_blank" href="//m.sbmmt.com/zh-tw/faq/jsscjddff"><img src="https://img.php.cn/upload/subject/202407/22/2024072214115932190.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="js刪除節點的方法"></a><a target="_blank" href="//m.sbmmt.com/zh-tw/faq/jsscjddff" class="title-a-spanl" title=""><span>js刪除節點的方法</span></a></li>
<li class="ul-li"><a target="_blank" href="//m.sbmmt.com/zh-tw/faq/javascriptzy"><img src="https://img.php.cn/upload/subject/202407/22/2024072214114396768.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="JavaScript轉義字符"></a><a target="_blank" href="//m.sbmmt.com/zh-tw/faq/javascriptzy" class="title-a-spanl" title=""><span>JavaScript轉義字符</span></a></li>
<li class="ul-li"><a target="_blank" href="//m.sbmmt.com/zh-tw/faq/jsscsjsdff"><img src="https://img.php.cn/upload/subject/202407/22/2024072214113439427.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="js產生隨機數的方法"></a><a target="_blank" href="//m.sbmmt.com/zh-tw/faq/jsscsjsdff" class="title-a-spanl" title=""><span>js產生隨機數的方法</span></a></li>
<li class="ul-li"><a target="_blank" href="//m.sbmmt.com/zh-tw/faq/rhqyjavascrip"><img src="https://img.php.cn/upload/subject/202407/22/2024072214085281458.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="如何啟用JavaScript"></a><a target="_blank" href="//m.sbmmt.com/zh-tw/faq/rhqyjavascrip" class="title-a-spanl" title=""><span>如何啟用JavaScript</span></a></li>
<li class="ul-li"><a target="_blank" href="//m.sbmmt.com/zh-tw/faq/jssymbol"><img src="https://img.php.cn/upload/subject/202407/22/2024072214060282401.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Js中Symbol類詳解"></a><a target="_blank" href="//m.sbmmt.com/zh-tw/faq/jssymbol" class="title-a-spanl" title=""><span>Js中Symbol類詳解</span></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="phpwzright">
<div class="wzrOne">
<div class="wzroTitle">
熱門推薦
</div>
<div class="wzroList">
<ul>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots wzrolr"></span>
<a style="height: auto;" title="js是什麼意思" href="//m.sbmmt.com/zh-tw/faq/482163.html">js是什麼意思</a>
</div></li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots wzrolr"></span>
<a style="height: auto;" title="js怎麼將字串轉為陣列？" href="//m.sbmmt.com/zh-tw/faq/461802.html">js怎麼將字串轉為陣列？</a>
</div></li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots wzrolr"></span>
<a style="height: auto;" title="javascript如何刷新頁面" href="//m.sbmmt.com/zh-tw/faq/473330.html">javascript如何刷新頁面</a>
</div></li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots wzrolr"></span>
<a style="height: auto;" title="js數組怎麼刪除某一項" href="//m.sbmmt.com/zh-tw/faq/475790.html">js數組怎麼刪除某一項</a>
</div></li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots wzrolr"></span>
<a style="height: auto;" title="sqrt函數怎麼使用" href="//m.sbmmt.com/zh-tw/faq/415276.html">sqrt函數怎麼使用</a>
</div></li>
</ul>
</div>
</div>
<div class="wzrThree">
<div class="wzrthree-title">
<div>
熱門教學
</div>
<a target="_blank" href="//m.sbmmt.com/zh-tw/course.html">更多></a>
</div>
<div class="wzrthreelist swiper2">
<div class="wzrthreeTab swiper-wrapper">
<div class="check tabdiv swiper-slide" data-id="one">
相關教學
<div></div>
</div>
<div class="tabdiv swiper-slide" data-id="two">
熱門推薦
<div></div>
</div>
<div class="tabdiv swiper-slide" data-id="three">
最新課程
<div></div>
</div>
</div>
<ul class="one">
<li><a target="_blank" href="//m.sbmmt.com/zh-tw/course/1165.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/068/62611669264af860.jpg" alt="JavaScript 經典案例"></a>
<div class="wzrthree-right">
<a target="_blank" title="JavaScript 經典案例" href="//m.sbmmt.com/zh-tw/course/1165.html">JavaScript 經典案例</a>
<div class="wzrthreerb">
<div>
15140
<b class="kclbcollectb"></b>
</div>
<div class="courseICollection" data-id="1165">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div></li>
</ul>
<ul class="two" style="display: none;">
<li><a target="_blank" href="//m.sbmmt.com/zh-tw/course/812.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)"></a>
<div class="wzrthree-right">
<a target="_blank" title="最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)" href="//m.sbmmt.com/zh-tw/course/812.html">最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)</a>
<div class="wzrthreerb">
<div>
1394825次學習
</div>
<div class="courseICollection" data-id="812">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div></li>
<li><a target="_blank" href="//m.sbmmt.com/zh-tw/course/286.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA 初級入門影片教學"></a>
<div class="wzrthree-right">
<a target="_blank" title="JAVA 初級入門影片教學" href="//m.sbmmt.com/zh-tw/course/286.html">JAVA 初級入門影片教學</a>
<div class="wzrthreerb">
<div>
2349006次學習
</div>
<div class="courseICollection" data-id="286">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div></li>
<li><a target="_blank" href="//m.sbmmt.com/zh-tw/course/504.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="小甲魚零基礎入門學習Python影片教學"></a>
<div class="wzrthree-right">
<a target="_blank" title="小甲魚零基礎入門學習Python影片教學" href="//m.sbmmt.com/zh-tw/course/504.html">小甲魚零基礎入門學習Python影片教學</a>
<div class="wzrthreerb">
<div>
493193次學習
</div>
<div class="courseICollection" data-id="504">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div></li>
<li><a target="_blank" href="//m.sbmmt.com/zh-tw/course/901.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/067/64be28a53a4f6310.png" alt="Web前端開發極速入門"></a>
<div class="wzrthree-right">
<a target="_blank" title="Web前端開發極速入門" href="//m.sbmmt.com/zh-tw/course/901.html">Web前端開發極速入門</a>
<div class="wzrthreerb">
<div>
213410次學習
</div>
<div class="courseICollection" data-id="901">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div></li>
<li><a target="_blank" href="//m.sbmmt.com/zh-tw/course/234.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/068/62611f57ed0d4840.jpg" alt="零基礎精通 PS 影片教學"></a>
<div class="wzrthree-right">
<a target="_blank" title="零基礎精通 PS 影片教學" href="//m.sbmmt.com/zh-tw/course/234.html">零基礎精通 PS 影片教學</a>
<div class="wzrthreerb">
<div>
842673次學習
</div>
<div class="courseICollection" data-id="234">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div></li>
</ul>
<ul class="three" style="display: none;">
<li><a target="_blank" href="//m.sbmmt.com/zh-tw/course/1648.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png" alt="【web前端】Node.js快速入門"></a>
<div class="wzrthree-right">
<a target="_blank" title="【web前端】Node.js快速入門" href="//m.sbmmt.com/zh-tw/course/1648.html">【web前端】Node.js快速入門</a>
<div class="wzrthreerb">
<div>
3127次學習
</div>
<div class="courseICollection" data-id="1648">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div></li>
<li><a target="_blank" href="//m.sbmmt.com/zh-tw/course/1647.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/067/6628cc96e310c937.png" alt="國外Web開發全端課程全集"></a>
<div class="wzrthree-right">
<a target="_blank" title="國外Web開發全端課程全集" href="//m.sbmmt.com/zh-tw/course/1647.html">國外Web開發全端課程全集</a>
<div class="wzrthreerb">
<div>
2494次學習
</div>
<div class="courseICollection" data-id="1647">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div></li>
<li><a target="_blank" href="//m.sbmmt.com/zh-tw/course/1646.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/067/662221173504a436.png" alt="Go語言實戰之 GraphQL"></a>
<div class="wzrthree-right">
<a target="_blank" title="Go語言實戰之 GraphQL" href="//m.sbmmt.com/zh-tw/course/1646.html">Go語言實戰之 GraphQL</a>
<div class="wzrthreerb">
<div>
1977次學習
</div>
<div class="courseICollection" data-id="1646">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div></li>
<li><a target="_blank" href="//m.sbmmt.com/zh-tw/course/1645.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/067/662077e163124646.png" alt="550W粉絲大佬手把手從零學JavaScript"></a>
<div class="wzrthree-right">
<a target="_blank" title="550W粉絲大佬手把手從零學JavaScript" href="//m.sbmmt.com/zh-tw/course/1645.html">550W粉絲大佬手把手從零學JavaScript</a>
<div class="wzrthreerb">
<div>
465次學習
</div>
<div class="courseICollection" data-id="1645">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div></li>
<li><a target="_blank" href="//m.sbmmt.com/zh-tw/course/1644.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/067/6616418ca80b8916.png" alt="python大神Mosh，零基礎小白6小時完全入門"></a>
<div class="wzrthree-right">
<a target="_blank" title="python大神Mosh，零基礎小白6小時完全入門" href="//m.sbmmt.com/zh-tw/course/1644.html">python大神Mosh，零基礎小白6小時完全入門</a>
<div class="wzrthreerb">
<div>
10794次學習
</div>
<div class="courseICollection" data-id="1644">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div></li>
</ul>
</div>
</div>
<div class="wzrFour">
<div class="wzrfour-title">
<div>
最新下載
</div>
<a href="//m.sbmmt.com/zh-tw/xiazai">更多></a>
</div>
<div class="wzrfourList swiper3">
<div class="wzrfourlTab swiper-wrapper">
<div class="check swiper-slide" data-id="onef">
網站特效
<div></div>
</div>
<div class="swiper-slide" data-id="twof">
網站源碼
<div></div>
</div>
<div class="swiper-slide" data-id="threef">
網站素材
<div></div>
</div>
<div class="swiper-slide" data-id="fourf">
前端模板
<div></div>
</div>
</div>
<ul class="onef">
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a target="_blank" title="[表單按鈕] jQuery企業留言表單聯絡程式碼" href="//m.sbmmt.com/zh-tw/xiazai/js/8071">[表單按鈕] jQuery企業留言表單聯絡程式碼</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a target="_blank" title="[播放器特效] HTML5 MP3音樂盒播放特效" href="//m.sbmmt.com/zh-tw/xiazai/js/8070">[播放器特效] HTML5 MP3音樂盒播放特效</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a target="_blank" title="[選單導航] HTML5酷炫粒子動畫導覽選單特效" href="//m.sbmmt.com/zh-tw/xiazai/js/8069">[選單導航] HTML5酷炫粒子動畫導覽選單特效</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a target="_blank" title="[表單按鈕] jQuery可視化表單拖曳編輯程式碼" href="//m.sbmmt.com/zh-tw/xiazai/js/8068">[表單按鈕] jQuery可視化表單拖曳編輯程式碼</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a target="_blank" title="[播放器特效] VUE.JS仿酷狗音樂播放器代碼" href="//m.sbmmt.com/zh-tw/xiazai/js/8067">[播放器特效] VUE.JS仿酷狗音樂播放器代碼</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a target="_blank" title="[html5特效] 經典html5推箱子小遊戲" href="//m.sbmmt.com/zh-tw/xiazai/js/8066">[html5特效] 經典html5推箱子小遊戲</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a target="_blank" title="[圖片特效] jQuery滾動添加或減少圖片特效" href="//m.sbmmt.com/zh-tw/xiazai/js/8065">[圖片特效] jQuery滾動添加或減少圖片特效</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a target="_blank" title="[相簿特效] CSS3個人相簿封面懸停放大特效" href="//m.sbmmt.com/zh-tw/xiazai/js/8064">[相簿特效] CSS3個人相簿封面懸停放大特效</a>
</div></li>
</ul>
<ul class="twof" style="display:none">
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/zh-tw/xiazai/code/8328" title="[前端模板] 家居裝潢清潔維修服務公司網站模板" target="_blank">[前端模板] 家居裝潢清潔維修服務公司網站模板</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/zh-tw/xiazai/code/8327" title="[前端模板] 清新配色個人求職履歷引導頁模板" target="_blank">[前端模板] 清新配色個人求職履歷引導頁模板</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/zh-tw/xiazai/code/8326" title="[前端模板] 設計師創意求職履歷網頁模板" target="_blank">[前端模板] 設計師創意求職履歷網頁模板</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/zh-tw/xiazai/code/8325" title="[前端模板] 現代工程建築公司網站模板" target="_blank">[前端模板] 現代工程建築公司網站模板</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/zh-tw/xiazai/code/8324" title="[前端模板] 教育服務機構響應式HTML5模板" target="_blank">[前端模板] 教育服務機構響應式HTML5模板</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/zh-tw/xiazai/code/8323" title="[前端模板] 網上電子書店商城網站模板" target="_blank">[前端模板] 網上電子書店商城網站模板</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/zh-tw/xiazai/code/8322" title="[前端模板] IT技術解決互聯網公司網站模板" target="_blank">[前端模板] IT技術解決互聯網公司網站模板</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/zh-tw/xiazai/code/8321" title="[前端模板] 紫色風格外匯交易服務網站模板" target="_blank">[前端模板] 紫色風格外匯交易服務網站模板</a>
</div></li>
</ul>
<ul class="threef" style="display:none">
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/zh-tw/xiazai/sucai/3078" target="_blank" title="[PNG素材] 可愛的夏天元素向量素材(EPS+PNG)">[PNG素材] 可愛的夏天元素向量素材(EPS+PNG)</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/zh-tw/xiazai/sucai/3077" target="_blank" title="[PNG素材] 四個紅色的 2023 畢業徽章的向量素材(AI+EPS+PNG)">[PNG素材] 四個紅色的 2023 畢業徽章的向量素材(AI+EPS+PNG)</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/zh-tw/xiazai/sucai/3076" target="_blank" title="[banner圖] 唱歌的小鳥和裝滿花朵的推車設計春天banner向量素材(AI+EPS)">[banner圖] 唱歌的小鳥和裝滿花朵的推車設計春天banner向量素材(AI+EPS)</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/zh-tw/xiazai/sucai/3075" target="_blank" title="[PNG素材] 金色的畢業帽向量素材(EPS+PNG)">[PNG素材] 金色的畢業帽向量素材(EPS+PNG)</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/zh-tw/xiazai/sucai/3074" target="_blank" title="[PNG素材] 黑白風格的山脈圖示向量素材(EPS+PNG)">[PNG素材] 黑白風格的山脈圖示向量素材(EPS+PNG)</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/zh-tw/xiazai/sucai/3073" target="_blank" title="[PNG素材] 不同顏色披風和不同姿勢的超級英雄剪影向量素材(EPS+PNG)">[PNG素材] 不同顏色披風和不同姿勢的超級英雄剪影向量素材(EPS+PNG)</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/zh-tw/xiazai/sucai/3072" target="_blank" title="[banner圖] 扁平風格的植樹節banner向量素材(AI+EPS)">[banner圖] 扁平風格的植樹節banner向量素材(AI+EPS)</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/zh-tw/xiazai/sucai/3071" target="_blank" title="[PNG素材] 九種漫畫風格的爆炸聊天氣泡向量素材(EPS+PNG)">[PNG素材] 九種漫畫風格的爆炸聊天氣泡向量素材(EPS+PNG)</a>
</div></li>
</ul>
<ul class="fourf" style="display:none">
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/zh-tw/xiazai/code/8328" target="_blank" title="[前端模板] 家居裝潢清潔維修服務公司網站模板">[前端模板] 家居裝潢清潔維修服務公司網站模板</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/zh-tw/xiazai/code/8327" target="_blank" title="[前端模板] 清新配色個人求職履歷引導頁模板">[前端模板] 清新配色個人求職履歷引導頁模板</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/zh-tw/xiazai/code/8326" target="_blank" title="[前端模板] 設計師創意求職履歷網頁模板">[前端模板] 設計師創意求職履歷網頁模板</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/zh-tw/xiazai/code/8325" target="_blank" title="[前端模板] 現代工程建築公司網站模板">[前端模板] 現代工程建築公司網站模板</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/zh-tw/xiazai/code/8324" target="_blank" title="[前端模板] 教育服務機構響應式HTML5模板">[前端模板] 教育服務機構響應式HTML5模板</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/zh-tw/xiazai/code/8323" target="_blank" title="[前端模板] 網上電子書店商城網站模板">[前端模板] 網上電子書店商城網站模板</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/zh-tw/xiazai/code/8322" target="_blank" title="[前端模板] IT技術解決互聯網公司網站模板">[前端模板] IT技術解決互聯網公司網站模板</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/zh-tw/xiazai/code/8321" target="_blank" title="[前端模板] 紫色風格外匯交易服務網站模板">[前端模板] 紫色風格外匯交易服務網站模板</a>
</div></li>
</ul>
</div>
</div>
</div>
</div>
<div class="phpFoot">
<div class="phpFootIn">
<div class="phpFootCont">
<div class="phpFootLeft">
<dl>
<dt>
<a href="//m.sbmmt.com/zh-tw/about/us.html" rel="nofollow" target="_blank" title="關於我們" class="cBlack">關於我們</a>
<a href="//m.sbmmt.com/zh-tw/about/disclaimer.html" rel="nofollow" target="_blank" title="免責聲明" class="cBlack">免責聲明</a>
<a href="//m.sbmmt.com/zh-tw/update/article_0_1.html" target="_blank" title="Sitemap" class="cBlack">Sitemap</a>
<div class="clear"></div>
</dt>
<dd class="cont1">
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！
</dd>
</dl>
</div>
</div>
</div>
</div>
<input type="hidden" id="verifycode" value="/captcha.html">
<link rel="stylesheet" id="_main-css" href="//m.sbmmt.com/static/css/viewer.min.css?2" type="text/css" media="all">
</body>
</html>
