How to use JavaScript to achieve the scrolling display effect of the page title while limiting the number of displayed characters?
In web development, we often need to attract users' attention through dynamic effects. Among them, the scrolling display effect of the page title is a common and concise way. This article will introduce how to use JavaScript to achieve the scrolling display effect of the page title while limiting the number of displayed characters.
First of all, we need to make it clear that the page title is defined by the</code>tag in the browser. Therefore, we need to obtain and modify the content of this tag through JavaScript. The following is a code example to achieve the scrolling display effect:</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><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <body> <!-- 在这里可以放置页面的内容 --> </body> </html></pre>
<div class="contentsignin">
Copy after login
</div>
</div>
<p>In the above code, we define a<code>scrollTitle</code>function to achieve the scrolling display effect of the title. This function implements scheduled scrolling by recursively calling the<code>setTimeout</code>function. Each time we scroll, we use the<code>substring</code>method to intercept the front part of the title and assign it to the<code><title></code>tag to achieve the scrolling effect of the title. When the full title is displayed, we reset the character counter to 0 and restart scrolling after a certain amount of time.</p>
<p>Next, we need to implement the function of limiting the number of displayed characters. A simple way is to modify the<code>scrollTitle</code>function to limit the number of characters in the title before intercepting it. The following is a modified code example:</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">
Copy after login
</div>
</div>
<p>In the above code, we use the<code>substring</code>method to intercept the title of the specified length and assign it to<code><title></code>tag to achieve the effect of limiting the number of characters. Each time we scroll, we increase the character counter by 1 and determine whether there are any remaining characters that need to be scrolled in a recursive call.</p>
<p>Through the above code example, we can achieve the scrolling display effect of the page title and limit the number of displayed characters. You can copy the above code into an HTML file and place the page content at the appropriate location, such as adding other elements or text in the<code><body></code>tag. When the page is loaded, the page title will be displayed in the browser's title bar in a scrolling manner. At the same time, you can modify parameters such as scrolling speed, scrolling interval, and character limit in the code as needed to obtain better scrolling display effects.</p>
<p>The above is the detailed content of How to use JavaScript to achieve the scrolling display effect of the page title while limiting the number of displayed characters?. For more information, please follow other related articles on the PHP Chinese website!</p>
</div>
</div>
<div style="height: 25px;">
<div class="wzconBq" style="display: inline-flex;">
<span>Related labels：</span>
<div class="wzcbqd">
<a onclick="hits_log(2,'www',this);" href-data="//m.sbmmt.com/search?word=javascript" target="_blank">javascript</a>
<a onclick="hits_log(2,'www',this);" href-data="//m.sbmmt.com/search?word=scrolldisplay" target="_blank">scroll display</a>
<a onclick="hits_log(2,'www',this);" href-data="//m.sbmmt.com/search?word=pagetitle" target="_blank">page title</a>
</div>
</div>
<div style="display: inline-flex;float: right; color:#333333;">
source：php.cn
</div>
</div>
<div class="wzconOtherwz">
<a href="//m.sbmmt.com/faq/620325.html" title=""><span>Previous article：How to use JavaScript to implement infinite scrolling?</span></a>
<a href="//m.sbmmt.com/faq/620360.html" title=""><span>Next article：How to use JavaScript to implement web form validation?</span></a>
</div>
<div class="wzconShengming">
<div class="bzsmdiv">
Statement of this Website
</div>
<div>
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact 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">
Latest Articles by Author
</div>
<ul>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="//m.sbmmt.com/faq/1796571876.html">Chainlink (LINK) Price Analysis & Prediction: Will LINK Retest the $20 Mark?</a>
</div>
<div>
2024-08-17 00:45:11
</div></li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="//m.sbmmt.com/faq/1796571875.html">Shiba Inu (SHIB) Price Analysis August 2023: Can SHIB Rally 1,197% to ATH?</a>
</div>
<div>
2024-08-17 00:44:11
</div></li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="//m.sbmmt.com/faq/1796571872.html">Shiba Inu (SHIB) Records Increased Whale Activity, Surge Incoming</a>
</div>
<div>
2024-08-17 00:41:11
</div></li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="//m.sbmmt.com/faq/1796571869.html">XRP Price Prediction: Can XRP break through the key $0.60 level?</a>
</div>
<div>
2024-08-17 00:38:11
</div></li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="//m.sbmmt.com/faq/1796571868.html">Discover How a Modest $1,000 Investment Today Could Pave the Way to an Early Retirement by 2026</a>
</div>
<div>
2024-08-17 00:37:10
</div></li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="//m.sbmmt.com/faq/1796571863.html">Dogecoin (DOGE) Forms Strong Technical Setup, But On-Chain Indicators Hint Otherwise</a>
</div>
<div>
2024-08-17 00:32:10
</div></li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="//m.sbmmt.com/faq/1796571861.html">Arbitrum (ARB) Price Prediction 2023-2025: Can ARB Recover from Its All-Time Low?</a>
</div>
<div>
2024-08-17 00:30:10
</div></li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="//m.sbmmt.com/faq/1796571860.html">Ethereum Developers Clash Over the Network's Inflationary Economics</a>
</div>
<div>
2024-08-17 00:29:10
</div></li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="//m.sbmmt.com/faq/1796571858.html">Mega Dice Raises $1.7M to Develop New Gamification Layer for Its Telegram-Based Crypto Casino</a>
</div>
<div>
2024-08-17 00:27:10
</div></li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="//m.sbmmt.com/faq/1796571855.html">Ethereum Gas Fees Hit a 5-Year Low, Signaling Potential Price Rebound for ETH</a>
</div>
<div>
2024-08-17 00:24:10
</div></li>
</ul>
</div>
<div class="wzconZzwz">
<div class="wzconZzwztitle">
Latest Issues
</div>
<div class="wdsyContent">
<div class="wdsyConDiv flexRow wdsyConDiv1">
<div class="wdcdContent flexColumn">
<a href="//m.sbmmt.com/wenda/173508.html" target="_blank" title="Stream data from OpenAI's API using AJAX, PHP, and server-sent events" class="wdcdcTitle">Stream data from OpenAI's API using AJAX, PHP, and server-sent events</a>
<a href="//m.sbmmt.com/wenda/173508.html" class="wdcdcCons">How can I use Server Sent Events (SSE) to stream data from the above API to a browser clie...</a>
<div class="wdcdcInfo flexRow">
<div class="wdcdcileft">
<span class="wdcdciSpan">From 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/wenda/173469.html" target="_blank" title="Uncaught TypeError: Cannot set property of undefined (set 'innerHTML')" class="wdcdcTitle">Uncaught TypeError: Cannot set property of undefined (set 'innerHTML')</a>
<a href="//m.sbmmt.com/wenda/173469.html" class="wdcdcCons">I'm trying to create a webpage using php, on an element of class "Continuous TextBox&...</a>
<div class="wdcdcInfo flexRow">
<div class="wdcdcileft">
<span class="wdcdciSpan">From 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/wenda/173425.html" target="_blank" title="How to get the RGB value of CSS/HTML named color in JavaScript" class="wdcdcTitle">How to get the RGB value of CSS/HTML named color in JavaScript</a>
<a href="//m.sbmmt.com/wenda/173425.html" class="wdcdcCons">I have created a Javascript object called [name-rgb]. Your basic:namedColors={AliceBlue:[2...</a>
<div class="wdcdcInfo flexRow">
<div class="wdcdcileft">
<span class="wdcdciSpan">From 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/wenda/173404.html" target="_blank" title="Why do so many JavaScript scripts append random numbers to things? collision?" class="wdcdcTitle">Why do so many JavaScript scripts append random numbers to things? collision?</a>
<a href="//m.sbmmt.com/wenda/173404.html" class="wdcdcCons">I've been learning JavaScript lately and have seen many examples of using Math.rand() to a...</a>
<div class="wdcdcInfo flexRow">
<div class="wdcdcileft">
<span class="wdcdciSpan">From 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/wenda/173339.html" target="_blank" title="Identify performance limitations in JavaScript" class="wdcdcTitle">Identify performance limitations in JavaScript</a>
<a href="//m.sbmmt.com/wenda/173339.html" class="wdcdcCons">I'm trying to find the bottleneck in my Javascript. Basically I'm developing a chrome exte...</a>
<div class="wdcdcInfo flexRow">
<div class="wdcdcileft">
<span class="wdcdciSpan">From 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>
Related Topics
</div>
<a href="//m.sbmmt.com/faq/zt" target="_blank">More></a>
</div>
<div class="wzcttlist">
<ul>
<li class="ul-li"><a target="_blank" href="//m.sbmmt.com/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 method to get array length"></a><a target="_blank" href="//m.sbmmt.com/faq/jsszcd" class="title-a-spanl" title=""><span>js method to get array length</span></a></li>
<li class="ul-li"><a target="_blank" href="//m.sbmmt.com/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 refresh current page"></a><a target="_blank" href="//m.sbmmt.com/faq/jssxym" class="title-a-spanl" title=""><span>js refresh current page</span></a></li>
<li class="ul-li"><a target="_blank" href="//m.sbmmt.com/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 rounding"></a><a target="_blank" href="//m.sbmmt.com/faq/jssswr" class="title-a-spanl" title=""><span>js rounding</span></a></li>
<li class="ul-li"><a target="_blank" href="//m.sbmmt.com/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 method to delete node"></a><a target="_blank" href="//m.sbmmt.com/faq/jsscjddff" class="title-a-spanl" title=""><span>js method to delete node</span></a></li>
<li class="ul-li"><a target="_blank" href="//m.sbmmt.com/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 escape characters"></a><a target="_blank" href="//m.sbmmt.com/faq/javascriptzy" class="title-a-spanl" title=""><span>JavaScript escape characters</span></a></li>
<li class="ul-li"><a target="_blank" href="//m.sbmmt.com/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="How to generate random numbers in js"></a><a target="_blank" href="//m.sbmmt.com/faq/jsscsjsdff" class="title-a-spanl" title=""><span>How to generate random numbers in js</span></a></li>
<li class="ul-li"><a target="_blank" href="//m.sbmmt.com/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="How to enable JavaScript"></a><a target="_blank" href="//m.sbmmt.com/faq/rhqyjavascrip" class="title-a-spanl" title=""><span>How to enable JavaScript</span></a></li>
<li class="ul-li"><a target="_blank" href="//m.sbmmt.com/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="Detailed explanation of Symbol class in JS"></a><a target="_blank" href="//m.sbmmt.com/faq/jssymbol" class="title-a-spanl" title=""><span>Detailed explanation of Symbol class in JS</span></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="phpwzright">
<div class="wzrOne">
<div class="wzroTitle">
Popular Recommendations
</div>
<div class="wzroList">
<ul>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots wzrolr"></span>
<a style="height: auto;" title="what does js mean" href="//m.sbmmt.com/faq/482163.html">what does js mean</a>
</div></li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots wzrolr"></span>
<a style="height: auto;" title="How to convert string to array in js?" href="//m.sbmmt.com/faq/461802.html">How to convert string to array in js?</a>
</div></li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots wzrolr"></span>
<a style="height: auto;" title="How to refresh the page using javascript" href="//m.sbmmt.com/faq/473330.html">How to refresh the page using javascript</a>
</div></li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots wzrolr"></span>
<a style="height: auto;" title="How to delete an item in js array" href="//m.sbmmt.com/faq/475790.html">How to delete an item in js array</a>
</div></li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots wzrolr"></span>
<a style="height: auto;" title="How to use sqrt function" href="//m.sbmmt.com/faq/415276.html">How to use sqrt function</a>
</div></li>
</ul>
</div>
</div>
<div class="wzrThree">
<div class="wzrthree-title">
<div>
Popular Tutorials
</div>
<a target="_blank" href="//m.sbmmt.com/course.html">More></a>
</div>
<div class="wzrthreelist swiper2">
<div class="wzrthreeTab swiper-wrapper">
<div class="check tabdiv swiper-slide" data-id="one">
Related Tutorials
<div></div>
</div>
<div class="tabdiv swiper-slide" data-id="two">
Popular Recommendations
<div></div>
</div>
<div class="tabdiv swiper-slide" data-id="three">
Latest courses
<div></div>
</div>
</div>
<ul class="one">
<li><a target="_blank" href="//m.sbmmt.com/course/1165.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/068/62611669264af860.jpg" alt="JavaScript classic cases"></a>
<div class="wzrthree-right">
<a target="_blank" title="JavaScript classic cases" href="//m.sbmmt.com/course/1165.html">JavaScript classic cases</a>
<div class="wzrthreerb">
<div>
15136
<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/course/812.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)"></a>
<div class="wzrthree-right">
<a target="_blank" title="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)" href="//m.sbmmt.com/course/812.html">The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)</a>
<div class="wzrthreerb">
<div>
1394785 times of learning
</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/course/286.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA Beginner's Video Tutorial"></a>
<div class="wzrthree-right">
<a target="_blank" title="JAVA Beginner's Video Tutorial" href="//m.sbmmt.com/course/286.html">JAVA Beginner's Video Tutorial</a>
<div class="wzrthreerb">
<div>
2347772 times of learning
</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/course/504.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Little Turtle's zero-based introduction to learning Python video tutorial"></a>
<div class="wzrthree-right">
<a target="_blank" title="Little Turtle's zero-based introduction to learning Python video tutorial" href="//m.sbmmt.com/course/504.html">Little Turtle's zero-based introduction to learning Python video tutorial</a>
<div class="wzrthreerb">
<div>
493088 times of learning
</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/course/901.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/067/64be28a53a4f6310.png" alt="Quick introduction to web front-end development"></a>
<div class="wzrthree-right">
<a target="_blank" title="Quick introduction to web front-end development" href="//m.sbmmt.com/course/901.html">Quick introduction to web front-end development</a>
<div class="wzrthreerb">
<div>
213403 times of learning
</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/course/234.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/068/62611f57ed0d4840.jpg" alt="Master PS video tutorials from scratch"></a>
<div class="wzrthree-right">
<a target="_blank" title="Master PS video tutorials from scratch" href="//m.sbmmt.com/course/234.html">Master PS video tutorials from scratch</a>
<div class="wzrthreerb">
<div>
842581 times of learning
</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/course/1648.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png" alt="[Web front-end] Node.js quick start"></a>
<div class="wzrthree-right">
<a target="_blank" title="[Web front-end] Node.js quick start" href="//m.sbmmt.com/course/1648.html">[Web front-end] Node.js quick start</a>
<div class="wzrthreerb">
<div>
3103 times of learning
</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/course/1647.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/067/6628cc96e310c937.png" alt="Complete collection of foreign web development full-stack courses"></a>
<div class="wzrthree-right">
<a target="_blank" title="Complete collection of foreign web development full-stack courses" href="//m.sbmmt.com/course/1647.html">Complete collection of foreign web development full-stack courses</a>
<div class="wzrthreerb">
<div>
2481 times of learning
</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/course/1646.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/067/662221173504a436.png" alt="Go language practical GraphQL"></a>
<div class="wzrthree-right">
<a target="_blank" title="Go language practical GraphQL" href="//m.sbmmt.com/course/1646.html">Go language practical GraphQL</a>
<div class="wzrthreerb">
<div>
1973 times of learning
</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/course/1645.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/067/662077e163124646.png" alt="550W fan master learns JavaScript from scratch step by step"></a>
<div class="wzrthree-right">
<a target="_blank" title="550W fan master learns JavaScript from scratch step by step" href="//m.sbmmt.com/course/1645.html">550W fan master learns JavaScript from scratch step by step</a>
<div class="wzrthreerb">
<div>
464 times of learning
</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/course/1644.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/067/6616418ca80b8916.png" alt="Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours"></a>
<div class="wzrthree-right">
<a target="_blank" title="Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours" href="//m.sbmmt.com/course/1644.html">Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours</a>
<div class="wzrthreerb">
<div>
10760 times of learning
</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>
Latest Downloads
</div>
<a href="//m.sbmmt.com/xiazai">More></a>
</div>
<div class="wzrfourList swiper3">
<div class="wzrfourlTab swiper-wrapper">
<div class="check swiper-slide" data-id="onef">
Web Effects
<div></div>
</div>
<div class="swiper-slide" data-id="twof">
Website Source Code
<div></div>
</div>
<div class="swiper-slide" data-id="threef">
Website Materials
<div></div>
</div>
<div class="swiper-slide" data-id="fourf">
Front End Template
<div></div>
</div>
</div>
<ul class="onef">
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a target="_blank" title="[form button] jQuery enterprise message form contact code" href="//m.sbmmt.com/xiazai/js/8071">[form button] jQuery enterprise message form contact code</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a target="_blank" title="[Player special effects] HTML5 MP3 music box playback effects" href="//m.sbmmt.com/xiazai/js/8070">[Player special effects] HTML5 MP3 music box playback effects</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a target="_blank" title="[Menu navigation] HTML5 cool particle animation navigation menu special effects" href="//m.sbmmt.com/xiazai/js/8069">[Menu navigation] HTML5 cool particle animation navigation menu special effects</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a target="_blank" title="[form button] jQuery visual form drag and drop editing code" href="//m.sbmmt.com/xiazai/js/8068">[form button] jQuery visual form drag and drop editing code</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a target="_blank" title="[Player special effects] VUE.JS imitation Kugou music player code" href="//m.sbmmt.com/xiazai/js/8067">[Player special effects] VUE.JS imitation Kugou music player code</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a target="_blank" title="[html5 special effects] Classic html5 pushing box game" href="//m.sbmmt.com/xiazai/js/8066">[html5 special effects] Classic html5 pushing box game</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a target="_blank" title="[Picture special effects] jQuery scrolling to add or reduce image effects" href="//m.sbmmt.com/xiazai/js/8065">[Picture special effects] jQuery scrolling to add or reduce image effects</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a target="_blank" title="[Photo album effects] CSS3 personal album cover hover zoom effect" href="//m.sbmmt.com/xiazai/js/8064">[Photo album effects] CSS3 personal album cover hover zoom effect</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/xiazai/code/8328" title="[Front-end template] Home Decor Cleaning and Repair Service Company Website Template" target="_blank">[Front-end template] Home Decor Cleaning and Repair Service Company Website Template</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/xiazai/code/8327" title="[Front-end template] Fresh color personal resume guide page template" target="_blank">[Front-end template] Fresh color personal resume guide page template</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/xiazai/code/8326" title="[Front-end template] Designer Creative Job Resume Web Template" target="_blank">[Front-end template] Designer Creative Job Resume Web Template</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/xiazai/code/8325" title="[Front-end template] Modern engineering construction company website template" target="_blank">[Front-end template] Modern engineering construction company website template</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/xiazai/code/8324" title="[Front-end template] Responsive HTML5 template for educational service institutions" target="_blank">[Front-end template] Responsive HTML5 template for educational service institutions</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/xiazai/code/8323" title="[Front-end template] Online e-book store mall website template" target="_blank">[Front-end template] Online e-book store mall website template</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/xiazai/code/8322" title="[Front-end template] IT technology solves Internet company website template" target="_blank">[Front-end template] IT technology solves Internet company website template</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/xiazai/code/8321" title="[Front-end template] Purple style foreign exchange trading service website template" target="_blank">[Front-end template] Purple style foreign exchange trading service website template</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/xiazai/sucai/3078" target="_blank" title="[PNG material] Cute summer elements vector material (EPS PNG)">[PNG material] Cute summer elements vector material (EPS PNG)</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/xiazai/sucai/3077" target="_blank" title="[PNG material] Four red 2023 graduation badges vector material (AI EPS PNG)">[PNG material] Four red 2023 graduation badges vector material (AI EPS PNG)</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/xiazai/sucai/3076" target="_blank" title="[banner picture] Singing bird and cart filled with flowers design spring banner vector material (AI EPS)">[banner picture] Singing bird and cart filled with flowers design spring banner vector material (AI EPS)</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/xiazai/sucai/3075" target="_blank" title="[PNG material] Golden graduation cap vector material (EPS PNG)">[PNG material] Golden graduation cap vector material (EPS PNG)</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/xiazai/sucai/3074" target="_blank" title="[PNG material] Black and white style mountain icon vector material (EPS PNG)">[PNG material] Black and white style mountain icon vector material (EPS PNG)</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/xiazai/sucai/3073" target="_blank" title="[PNG material] Superhero silhouette vector material (EPS PNG) with different color cloaks and different poses">[PNG material] Superhero silhouette vector material (EPS PNG) with different color cloaks and different poses</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/xiazai/sucai/3072" target="_blank" title="[banner picture] Flat style Arbor Day banner vector material (AI+EPS)">[banner picture] Flat style Arbor Day banner vector material (AI+EPS)</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/xiazai/sucai/3071" target="_blank" title="[PNG material] Nine comic-style exploding chat bubbles vector material (EPS+PNG)">[PNG material] Nine comic-style exploding chat bubbles vector material (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/xiazai/code/8328" target="_blank" title="[Front-end template] Home Decor Cleaning and Repair Service Company Website Template">[Front-end template] Home Decor Cleaning and Repair Service Company Website Template</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/xiazai/code/8327" target="_blank" title="[Front-end template] Fresh color personal resume guide page template">[Front-end template] Fresh color personal resume guide page template</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/xiazai/code/8326" target="_blank" title="[Front-end template] Designer Creative Job Resume Web Template">[Front-end template] Designer Creative Job Resume Web Template</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/xiazai/code/8325" target="_blank" title="[Front-end template] Modern engineering construction company website template">[Front-end template] Modern engineering construction company website template</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/xiazai/code/8324" target="_blank" title="[Front-end template] Responsive HTML5 template for educational service institutions">[Front-end template] Responsive HTML5 template for educational service institutions</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/xiazai/code/8323" target="_blank" title="[Front-end template] Online e-book store mall website template">[Front-end template] Online e-book store mall website template</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/xiazai/code/8322" target="_blank" title="[Front-end template] IT technology solves Internet company website template">[Front-end template] IT technology solves Internet company website template</a>
</div></li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/xiazai/code/8321" target="_blank" title="[Front-end template] Purple style foreign exchange trading service website template">[Front-end template] Purple style foreign exchange trading service website template</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/about/us.html" rel="nofollow" target="_blank" title="About us" class="cBlack">About us</a>
<a href="//m.sbmmt.com/about/disclaimer.html" rel="nofollow" target="_blank" title="Disclaimer" class="cBlack">Disclaimer</a>
<a href="//m.sbmmt.com/update/article_0_1.html" target="_blank" title="Sitemap" class="cBlack">Sitemap</a>
<div class="clear"></div>
</dt>
<dd class="cont1">
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！
</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>
