Date time running line in using JavaScript</a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2023-04-08T15:29:37.957" class="fromnow">Apr 08 '23 at 15:29</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2023-04-09T04:48:54.410" datetime="2023-04-09T04:48:54.410">Apr 09 '23 at 04:48</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 58 times"> <span class="fc-light mr2">Viewed</span> 58 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="75966082" data-ownerid="19284661" data-score="1"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="75966082"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="1">1</div> <button class="js-bookmark-btn s-btn s-btnunset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value=""></div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>I have a JavaScript program that displays the current date and time in a page title (), then I tried to animate this header as a crawl line, but nothing works. Tried using the slice method, as well as the substring method, but nothing came out of it.</p> <p></p><div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>function updateDateTime() { let datetime = new Date(); let datetimeString = datetime.toLocaleString(); document.title = datetimeString; } setInterval(updateDateTime, 1000); // оновлюємо час кожну секунду updateDateTime(); let marquee = document.getElementById("marquee"); let datetime = document.getElementById("datetime"); function shiftDateTime() { const unit = "px"; let position = Number.parseInt(datetime.style.right) || 0; let width = datetime.offsetWidth; position = position > marquee.offsetWidth ? -width : position + 1; datetime.style.right = position + unit; requestAnimationFrame(shiftDateTime); } shiftDateTime();</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><!DOCTYPE html> <html> <head> <title>Date&Time marquee</title> </head> <body> <div id="marquee"> <span id="datetime"></span> </div> </body> </html></code></pre> </div> </div> <p>Here's my code, all I was able to do was display the current date and time in the title. In the end, our program should display the current date and time in the page title and animate them as a running line right-to-left. How can I do that?</p></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/javascript" class="post-tag js-gps-track" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/html" class="post-tag js-gps-track" title="show questions tagged 'html'" rel="tag">html</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited Apr 08 '23 at 15:32">edited Apr 08 '23 at 15:32</time> <a href="../../users/13376511/michael-m" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/13376511.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Michael M." /> </a> <div class="s-user-card--info"> <a href="../../users/13376511/michael-m" class="s-user-card--link">Michael M.</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">10,486</li> <li class="s-award-bling s-award-blinggold" title="9 gold badges">9</li> <li class="s-award-bling s-award-blingsilver" title="18 silver badges">18</li> <li class="s-award-bling s-award-blingbronze" title="34 bronze badges">34</li> </ul> </div> </div> </div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Apr 08 '23 at 15:29">asked Apr 08 '23 at 15:29</time> <a href="../../users/19284661/mykola" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/19284661.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Mykola" /> </a> <div class="s-user-card--info"> <a href="../../users/19284661/mykola" class="s-user-card--link">Mykola</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">25</li> <li class="s-award-bling s-award-blingbronze" title="3 bronze badges">3</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-75966082" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="75966082" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-133985274" class="comment js-comment " data-comment-id="133985274" data-comment-owner-id="2692688" data-comment-score="1"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">1</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment133985274_75966082"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Does this answer your question? [How do I make text inside the title tag animate using JavaScript?](https://stackoverflow.com/questions/23731357/how-do-i-make-text-inside-the-title-tag-animate-using-javascript)</span> – <a href="../../users/2692688/tushar-gupta" title="15,504 reputation" class="comment-user ">Tushar Gupta</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/75966082/date-time-running-line-in-title-using-javascript#comment133985274_75966082"><span title="2023-04-08T15:33:50.840 License: CC BY-SA 4.0" class="relativetime-clean">Apr 08 '23 at 15:33</span></a></span> </div> </div> </li> <li id="comment-133985326" class="comment js-comment " data-comment-id="133985326" data-comment-owner-id="1850851" data-comment-score="1"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">1</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment133985326_75966082"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">You don't have the concept of `px` in webpage titles. They're just plain strings</span> – <a href="../../users/1850851/christian-vincenzo-traina" title="9,546 reputation" class="comment-user ">Christian Vincenzo Traina</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/75966082/date-time-running-line-in-title-using-javascript#comment133985326_75966082"><span title="2023-04-08T15:38:43.443 License: CC BY-SA 4.0" class="relativetime-clean">Apr 08 '23 at 15:38</span></a></span> </div> </div> </li> <li id="comment-133985336" class="comment js-comment " data-comment-id="133985336" data-comment-owner-id="1850851" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment133985336_75966082"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">By the way I really don't like the linked question. Your logic is correct and I'd keep your code, just add trailing spaces to move the title</span> – <a href="../../users/1850851/christian-vincenzo-traina" title="9,546 reputation" class="comment-user ">Christian Vincenzo Traina</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/75966082/date-time-running-line-in-title-using-javascript#comment133985336_75966082"><span title="2023-04-08T15:39:52.107 License: CC BY-SA 4.0" class="relativetime-clean">Apr 08 '23 at 15:39</span></a></span> </div> </div> </li> <li id="comment-133985340" class="comment js-comment " data-comment-id="133985340" data-comment-owner-id="19284661" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment133985340_75966082"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">I need a date (hh:mm:ss) that changes every second and moves, not just text.</span> – <a href="../../users/19284661/mykola" title="25 reputation" class="comment-user owner">Mykola</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/75966082/date-time-running-line-in-title-using-javascript#comment133985340_75966082"><span title="2023-04-08T15:40:15.230 License: CC BY-SA 4.0" class="relativetime-clean">Apr 08 '23 at 15:40</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">2 Answers<span style="display:none;" itemprop="answerCount">2</span></h2> </div> </div> </div> <a name="75966173"></a> <div id="answer-75966173" class="answer " data-answerid="75966173" data-ownerid="1850851" data-score="0" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="75966173"> <button class="js-vote-up-btn grid--cell s-btn s-btn__unset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>Just add a space at each iteration:</p> <p></p><div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>let i = 0; function updateDateTime() { const datetime = new Date(); const datetimeString = datetime.toLocaleString(); const trailingSpaces = Array(i).fill().map(_=>' ').join(''); document.title = trailingSpaces + datetimeString; i = (i + 1) % 10; } setInterval(updateDateTime, 100);</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><!DOCTYPE html> <html> <head> <title>Date&Time marquee</title> </head> <body> <div id="marquee"> <span id="datetime"></span> </div> </body> </html></code></pre> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Apr 08 '23 at 15:48">answered Apr 08 '23 at 15:48</time> <a href="../../users/1850851/christian-vincenzo-traina" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1850851.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Christian Vincenzo Traina" /> </a> <div class="s-user-card--info"> <a href="../../users/1850851/christian-vincenzo-traina" class="s-user-card--link">Christian Vincenzo Traina</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">9,546</li> <li class="s-award-bling s-award-blinggold" title="2 gold badges">2</li> <li class="s-award-bling s-award-blingsilver" title="40 silver badges">40</li> <li class="s-award-bling s-award-blingbronze" title="63 bronze badges">63</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-75966173" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="75966173" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-133985583" class="comment js-comment " data-comment-id="133985583" data-comment-owner-id="19284661" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment133985583_75966173"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">I don't understand why, but my line doesn't run. Only time changes.</span> – <a href="../../users/19284661/mykola" title="25 reputation" class="comment-user owner">Mykola</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/75966082/date-time-running-line-in-title-using-javascript#comment133985583_75966173"><span title="2023-04-08T16:05:21.900 License: CC BY-SA 4.0" class="relativetime-clean">Apr 08 '23 at 16:05</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="75966555"></a> <div id="answer-75966555" class="answer accepted-answer" data-answerid="75966555" data-ownerid="10669010" data-score="0" itemprop="acceptedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="75966555"> <button class="js-vote-up-btn grid--cell s-btn s-btn__unset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> <div class="js-accepted-answer-indicator grid--cell fc-green-500 py6 mtn8"><div class="ta-center"><svg aria-hidden="true" class="svg-icon iconCheckmarkLg" width="36" height="36" viewBox="0 0 36 36"><path d="m6 14 8 8L30 6v8L14 30l-8-8v-8z"></path></svg></div></div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>first space chraracters can't be used in a html title element.<br/> you may use a <code>_</code> instead.</p> <pre class="lang-js prettyprint-override"><code>let tittlemov = 0; setInterval(()=> { document.title = '_'.repeat(tittlemov++) + new Date().toLocaleString() + '_'.repeat(10 - tittlemov); tittlemov %= 10; }, 1000 ); </code></pre></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Apr 08 '23 at 16:58">answered Apr 08 '23 at 16:58</time> <a href="../../users/10669010/mister-jojo" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/10669010.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Mister Jojo" /> </a> <div class="s-user-card--info"> <a href="../../users/10669010/mister-jojo" class="s-user-card--link">Mister Jojo</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">20,093</li> <li class="s-award-bling s-award-blinggold" title="6 gold badges">6</li> <li class="s-award-bling s-award-blingsilver" title="21 silver badges">21</li> <li class="s-award-bling s-award-blingbronze" title="40 bronze badges">40</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>