前端成长之路


2、跑马灯

<h4>代码片段:</h4> <pre><code class="language-html">&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&amp;quot;en&amp;quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&amp;quot;UTF-8&amp;quot;&amp;gt; &amp;lt;meta http-equiv=&amp;quot;X-UA-Compatible&amp;quot; content=&amp;quot;IE=edge&amp;quot;&amp;gt; &amp;lt;meta name=&amp;quot;viewport&amp;quot; content=&amp;quot;width=device-width, initial-scale=1.0&amp;quot;&amp;gt; &amp;lt;title&amp;gt;跑马灯&amp;lt;/title&amp;gt; &amp;lt;/head&amp;gt; &amp;lt;body&amp;gt; &amp;lt;h3 id=&amp;quot;deng&amp;quot;&amp;gt; 欢迎陈志伟大人莅临指导 &amp;lt;/h3&amp;gt; &amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt; function show() { //用document.getElementById获取id值为deng属性,并赋值给tag变量 var tag = document.getElementById(&amp;quot;deng&amp;quot;); //第1点获取到的是&amp;lt;h3 id=&amp;quot;deng&amp;quot;&amp;gt;欢迎陈志伟大人莅临指导&amp;lt;/h3&amp;gt;,通过var text = tag.innerText,将内容的文本赋值给text var text = tag.innerText; //将text文本的第一个值赋值给firststring var firststring = text[0]; //通过substing获取除了上面获取的第一个值以外的字符串 var endstring = text.substring(1, text.length); //将内容拼接,并通过函数不断的执行,可以完成跑马灯的效果 var datastring = endstring + firststring; //最后将获取到的内容添加到tag中 tag.innerText = datastring; } setInterval(show, 1000); &amp;lt;/script&amp;gt; &amp;lt;/body&amp;gt; &amp;lt;/html&amp;gt;</code></pre>

页面列表

ITEM_HTML