堆棧內存溢出
  簡體   English   中英

每3秒鍾更改一次div上的課程

[英]change class on div every 3 seconds

 原文  2016-07-14 16:45:12  0   2    javascript/ html/ css

問題描述

我希望你一切都好。 我想知道您的集體才華是否可以幫助我？ 我有一個圓圈的div。 我也有三個CSS類。 我想每3秒更改div的類和標簽的文本。 任何可以指出我要去哪里的人都會非常有幫助。

這是我所擁有的，目前似乎什么也沒做： 

 function loadTraffLight() { var traffLight = document.getElementById("traffLight"); var status = document.getElementById("status"); var timer; var go = function traffGo() { timer = setInterval(function() { if (traffLight.class == "red") { traffLight.className = "yellow"; status.innerText = "OK"; } else if (traffLight.class == "yellow") { traffLight.className = "green"; status.innerText = "Authorised"; } else { traffLight.className = "red"; status.innerText = "Stop Working"; } }, 3000); }; } 
 #traffLight { border-radius: 100px; width: 200px; height: 200px; border: 1px solid #000000; margin: 0 auto; color: #808080; } #status { text-align: center; vertical-align: bottom; } .red { background: #ff0000; } .yellow { background: #ffd800; } .green { background: #00ff21; } 
 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>Traffic light</title> </head> <body onload="loadTraffLight()"> <h1>Traffic light effect demo</h1> <div id="traffLight"> <label id="status"></label> </div> </body> </html>

2 個解決方案

解決方案1
 1 已采納  2016-07-14 16:49:44

請一致地使用className 。 除此之外，我對您的函數結構進行了一些更改： 

 function loadTraffLight() { var traffLight = document.getElementById("traffLight"); var status = document.getElementById("status"); var timer; timer = setInterval(function () { if (traffLight.className == "red") { traffLight.className = "yellow"; status.innerText = "OK"; } else if (traffLight.className == "yellow") { traffLight.className = "green"; status.innerText = "Authorised"; } else { traffLight.className = "red"; status.innerText = "Stop Working"; } }, 1000); } 
 #traffLight{ border-radius:100px; width:200px; height:200px; border:1px solid #000000; margin:0 auto; color:#808080; } #status{ text-align:center; vertical-align:bottom; } .red{ background:#ff0000; } .yellow{ background:#ffd800; } .green{ background:#00ff21; } 
 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>Traffic light</title> </head> <body onload="loadTraffLight()"> <h1>Traffic light effect demo</h1> <div id="traffLight"> <label id="status"></label> </div> </body> </html>

解決方案2
 1  2016-07-14 16:50:52

兩件事情：

  • 你永遠不會調用traffGo()在loadTraffLight()
  • 您應該將其與traffLight.className而不是traffLight.class進行比較

請參閱下面的修改后的代碼： 

 function loadTraffLight() { var traffLight = document.getElementById("traffLight"); var status = document.getElementById("status"); var timer; function traffGo() { timer = setInterval(function () { if (traffLight.className == "red") { traffLight.className = "yellow"; status.innerText = "OK"; } else if (traffLight.className == "yellow") { traffLight.className = "green"; status.innerText = "Authorised"; } else { traffLight.className = "red"; status.innerText = "Stop Working"; } }, 3000); }; traffGo(); } 
 #traffLight{ border-radius:100px; width:200px; height:200px; border:1px solid #000000; margin:0 auto; color:#808080; } #status{ text-align:center; vertical-align:bottom; } .red{ background:#ff0000; } .yellow{ background:#ffd800; } .green{ background:#00ff21; } 
 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>Traffic light</title> </head> <body onload="loadTraffLight()"> <h1>Traffic light effect demo</h1> <div id="traffLight"> <label id="status"></label> </div> </body> </html>

JQuery：更改內容<div>每 5 秒</div><div id="text_translate"><p>我已經使用 xml 和 xslt 設置了一個無線電廣播服務器。 我顯示當前正在播放的歌曲，但當然，每分鍾都會改變，所以我希望&lt;div&gt;每秒刷新一次，以確保顯示的數據是最新的。</p><p> 我寫了一個 JQuery function，但這不起作用。 另外，我寫了以下測試 function 來測試 jquery 是否有效，但它沒有。</p><p> 會不會是 jquery 在 XST 頁面中不起作用？</p><p> 測試 function：</p><pre> $(document).ready(function () { $("a").click(function () { alert("test"); }); });</pre><p> 單擊超鏈接時不顯示警報...</p><p> 這是我當前的代碼：</p><pre> &lt;xsl:stylesheet xmlns:xsl = "http://www.w3.org/1999/XSL/Transform" version = "1.0" &gt; &lt;xsl:output omit-xml-declaration="no" method="html" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" indent="yes" encoding="UTF-8" /&gt; &lt;xsl:template match = "/icestats" &gt; &lt;html&gt; &lt;head&gt; &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"&gt; $(document).ready(function () { setInterval(function () { $(".newscontent").load("status.xsl"); }, 1000); }); &lt;/script&gt; &lt;script type="text/JavaScript"&gt; window.onload = startTime; function startTime() { var date = new Date(); var uur = date.getHours(); var min = date.getMinutes(); var sec = date.getSeconds(); if(min == 0 || min == 1 || min == 2 || min == 3 || min ==4 || min == 5 || min == 6 || min == 7 || min == 8 || min == 9) { min = "0" + min; } if(sec == 0 || sec == 1 || sec == 2 || sec == 3 || sec ==4 || sec == 5 || sec == 6 || sec == 7 || sec == 8 || sec == 9) { sec = "0" + sec; } var movingtime = uur + ":" + min + ":" + sec; document.getElementById('clock').innerHTML = movingtime; setTimeout('startTime()',500); } &lt;/script&gt; &lt;title&gt;Muziekserver&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href="style.css" /&gt; &lt;/head&gt; &lt;body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0"&gt; &lt;h2&gt;Overzicht&lt;/h2&gt; &lt;br /&gt; &lt;.--index header menu --&gt; &lt;div class="roundcont"&gt; &lt;div class="roundtop"&gt; &lt;img src="/corner_topleft:jpg" class="corner" style="display. none" /&gt; &lt;/div&gt; &lt;table border="0" width="100%" id="table1" cellspacing="0" cellpadding="4"&gt; &lt;tr&gt; &lt;td bgcolor="#656565"&gt; &lt;a class="nav" href="admin/"&gt;Administratie&lt;/a&gt; &lt;a class="nav" href="status.xsl"&gt;Overzicht van muziek&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;div class="roundbottom"&gt; &lt;img src="/corner_bottomleft:jpg" class="corner" style="display: none" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;br /&gt; &lt;br /&gt; &lt;:--end index header menu --&gt; &lt;:--mount point stats--&gt; &lt;xsl.for-each select="source"&gt; &lt;xsl:choose&gt; &lt;xsl:when test="listeners"&gt; &lt;div class="roundcont"&gt; &lt;div class="roundtop"&gt; &lt;img src="/corner_topleft:jpg" class="corner" style="display: none" /&gt; &lt;/div&gt; &lt;div class="newscontent"&gt; &lt;div class="streamheader"&gt; &lt;table cellspacing="0" cellpadding="0"&gt; &lt;colgroup align="left" /&gt; &lt;colgroup align="right" width="300" /&gt; &lt;tr&gt; &lt;td&gt;&lt;h3&gt;Naam: &lt;xsl.value-of select="@mount" /&gt;&lt;/h3&gt;&lt;/td&gt; &lt;xsl:choose&gt; &lt;xsl:when test="authenticator"&gt; &lt;td align="right"&gt;&lt;a class="auth" href="/auth.xsl"&gt;Login&lt;/a&gt;&lt;/td&gt; &lt;/xsl.when&gt; &lt;xsl:otherwise&gt; &lt;td align="right"&gt; Speel af als &lt;a href="{@mount}:m3u"&gt;M3U&lt;/a&gt; of als &lt;a href="{@mount}:xspf"&gt;XSPF&lt;/a&gt;&lt;/td&gt; &lt;/xsl:otherwise&gt; &lt;/xsl:choose&gt; &lt;/tr&gt;&lt;/table&gt; &lt;/div&gt; &lt;table border="0" cellpadding="4" id="info"&gt; &lt;xsl:if test="server_name"&gt; &lt;tr&gt;&lt;td&gt;Naam&lt;/td&gt;&lt;td class="streamdata"&gt; &lt;xsl:value-of select="server_name" /&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/xsl:if&gt; &lt;xsl:if test="server_description"&gt; &lt;tr&gt;&lt;td&gt;Beschrijving&lt;/td&gt;&lt;td class="streamdata"&gt; &lt;xsl:value-of select="server_description" /&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/xsl:if&gt; &lt;xsl:if test="genre"&gt; &lt;tr&gt;&lt;td&gt;Genre&lt;/td&gt;&lt;td class="streamdata"&gt; &lt;xsl:value-of select="genre" /&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/xsl:if&gt; &lt;xsl:if test="bitrate"&gt; &lt;tr&gt;&lt;td&gt;Bitrate&lt;/td&gt;&lt;td class="streamdata"&gt; &lt;xsl:value-of select="bitrate" /&gt; kbps&lt;/td&gt;&lt;/tr&gt; &lt;/xsl:if&gt; &lt;xsl:if test="quality"&gt; &lt;tr&gt;&lt;td&gt;Quality:&lt;/td&gt;&lt;td class="streamdata"&gt; &lt;xsl:value-of select="quality" /&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/xsl:if&gt; &lt;xsl:if test="video_quality"&gt; &lt;tr&gt;&lt;td&gt;Video Quality:&lt;/td&gt;&lt;td class="streamdata"&gt; &lt;xsl:value-of select="video_quality" /&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/xsl:if&gt; &lt;xsl:if test="frame_size"&gt; &lt;tr&gt;&lt;td&gt;Framesize:&lt;/td&gt;&lt;td class="streamdata"&gt; &lt;xsl:value-of select="frame_size" /&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/xsl:if&gt; &lt;xsl:if test="frame_rate"&gt; &lt;tr&gt;&lt;td&gt;Framerate:&lt;/td&gt;&lt;td class="streamdata"&gt; &lt;xsl:value-of select="frame_rate" /&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/xsl:if&gt; &lt;xsl:if test="server_url"&gt; &lt;tr&gt;&lt;td&gt;URL&lt;/td&gt;&lt;td class="streamdata"&gt; &lt;a target="_blank" href="{server_url}"&gt;&lt;xsl:value-of select="server_url" /&gt;&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/xsl:if&gt; &lt;tr&gt;&lt;td&gt;Nu bezig&lt;/td&gt;&lt;td class="streamdataArtist"&gt; &lt;xsl:if test="artist"&gt;&lt;xsl.value-of select="artist" /&gt; - &lt;/xsl:if&gt;&lt;xsl:value-of select="title" /&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;div class="roundbottom"&gt; &lt;img src="/corner_bottomleft:jpg" class="corner" style="display: none" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;br /&gt; &lt;br /&gt; &lt;/xsl:when&gt; &lt;xsl:otherwise&gt; &lt;h3&gt;&lt;xsl:value-of select="@mount" /&gt; - Not Connected&lt;/h3&gt; &lt;/xsl:otherwise&gt; &lt;/xsl;choose&gt; &lt;/xsl:for-each&gt; &lt;xsl;text disable-output-escaping="yes"&gt;&amp;amp:&lt;/xsl:text&gt;nbsp; &lt;/body&gt; &lt;/html&gt; &lt;/xsl:template&gt; &lt;/xsl:stylesheet&gt;</pre></div>

[英]JQuery: change content of <div> every 5 seconds

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 嘗試每5秒按類更改div jQuery 在 React 上每 3 秒更改/下移 div 上的 class 個名稱 每5秒鍾檢查一次div的高度，如果為true，則更改類別 是否需要每3秒更改div背景？ JQuery：更改內容<div>每 5 秒</div><div id="text_translate"><p>我已經使用 xml 和 xslt 設置了一個無線電廣播服務器。 我顯示當前正在播放的歌曲，但當然，每分鍾都會改變，所以我希望&lt;div&gt;每秒刷新一次，以確保顯示的數據是最新的。</p><p> 我寫了一個 JQuery function，但這不起作用。 另外，我寫了以下測試 function 來測試 jquery 是否有效，但它沒有。</p><p> 會不會是 jquery 在 XST 頁面中不起作用？</p><p> 測試 function：</p><pre> $(document).ready(function () { $("a").click(function () { alert("test"); }); });</pre><p> 單擊超鏈接時不顯示警報...</p><p> 這是我當前的代碼：</p><pre> &lt;xsl:stylesheet xmlns:xsl = "http://www.w3.org/1999/XSL/Transform" version = "1.0" &gt; &lt;xsl:output omit-xml-declaration="no" method="html" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" indent="yes" encoding="UTF-8" /&gt; &lt;xsl:template match = "/icestats" &gt; &lt;html&gt; &lt;head&gt; &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"&gt; $(document).ready(function () { setInterval(function () { $(".newscontent").load("status.xsl"); }, 1000); }); &lt;/script&gt; &lt;script type="text/JavaScript"&gt; window.onload = startTime; function startTime() { var date = new Date(); var uur = date.getHours(); var min = date.getMinutes(); var sec = date.getSeconds(); if(min == 0 || min == 1 || min == 2 || min == 3 || min ==4 || min == 5 || min == 6 || min == 7 || min == 8 || min == 9) { min = "0" + min; } if(sec == 0 || sec == 1 || sec == 2 || sec == 3 || sec ==4 || sec == 5 || sec == 6 || sec == 7 || sec == 8 || sec == 9) { sec = "0" + sec; } var movingtime = uur + ":" + min + ":" + sec; document.getElementById('clock').innerHTML = movingtime; setTimeout('startTime()',500); } &lt;/script&gt; &lt;title&gt;Muziekserver&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href="style.css" /&gt; &lt;/head&gt; &lt;body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0"&gt; &lt;h2&gt;Overzicht&lt;/h2&gt; &lt;br /&gt; &lt;.--index header menu --&gt; &lt;div class="roundcont"&gt; &lt;div class="roundtop"&gt; &lt;img src="/corner_topleft:jpg" class="corner" style="display. none" /&gt; &lt;/div&gt; &lt;table border="0" width="100%" id="table1" cellspacing="0" cellpadding="4"&gt; &lt;tr&gt; &lt;td bgcolor="#656565"&gt; &lt;a class="nav" href="admin/"&gt;Administratie&lt;/a&gt; &lt;a class="nav" href="status.xsl"&gt;Overzicht van muziek&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;div class="roundbottom"&gt; &lt;img src="/corner_bottomleft:jpg" class="corner" style="display: none" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;br /&gt; &lt;br /&gt; &lt;:--end index header menu --&gt; &lt;:--mount point stats--&gt; &lt;xsl.for-each select="source"&gt; &lt;xsl:choose&gt; &lt;xsl:when test="listeners"&gt; &lt;div class="roundcont"&gt; &lt;div class="roundtop"&gt; &lt;img src="/corner_topleft:jpg" class="corner" style="display: none" /&gt; &lt;/div&gt; &lt;div class="newscontent"&gt; &lt;div class="streamheader"&gt; &lt;table cellspacing="0" cellpadding="0"&gt; &lt;colgroup align="left" /&gt; &lt;colgroup align="right" width="300" /&gt; &lt;tr&gt; &lt;td&gt;&lt;h3&gt;Naam: &lt;xsl.value-of select="@mount" /&gt;&lt;/h3&gt;&lt;/td&gt; &lt;xsl:choose&gt; &lt;xsl:when test="authenticator"&gt; &lt;td align="right"&gt;&lt;a class="auth" href="/auth.xsl"&gt;Login&lt;/a&gt;&lt;/td&gt; &lt;/xsl.when&gt; &lt;xsl:otherwise&gt; &lt;td align="right"&gt; Speel af als &lt;a href="{@mount}:m3u"&gt;M3U&lt;/a&gt; of als &lt;a href="{@mount}:xspf"&gt;XSPF&lt;/a&gt;&lt;/td&gt; &lt;/xsl:otherwise&gt; &lt;/xsl:choose&gt; &lt;/tr&gt;&lt;/table&gt; &lt;/div&gt; &lt;table border="0" cellpadding="4" id="info"&gt; &lt;xsl:if test="server_name"&gt; &lt;tr&gt;&lt;td&gt;Naam&lt;/td&gt;&lt;td class="streamdata"&gt; &lt;xsl:value-of select="server_name" /&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/xsl:if&gt; &lt;xsl:if test="server_description"&gt; &lt;tr&gt;&lt;td&gt;Beschrijving&lt;/td&gt;&lt;td class="streamdata"&gt; &lt;xsl:value-of select="server_description" /&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/xsl:if&gt; &lt;xsl:if test="genre"&gt; &lt;tr&gt;&lt;td&gt;Genre&lt;/td&gt;&lt;td class="streamdata"&gt; &lt;xsl:value-of select="genre" /&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/xsl:if&gt; &lt;xsl:if test="bitrate"&gt; &lt;tr&gt;&lt;td&gt;Bitrate&lt;/td&gt;&lt;td class="streamdata"&gt; &lt;xsl:value-of select="bitrate" /&gt; kbps&lt;/td&gt;&lt;/tr&gt; &lt;/xsl:if&gt; &lt;xsl:if test="quality"&gt; &lt;tr&gt;&lt;td&gt;Quality:&lt;/td&gt;&lt;td class="streamdata"&gt; &lt;xsl:value-of select="quality" /&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/xsl:if&gt; &lt;xsl:if test="video_quality"&gt; &lt;tr&gt;&lt;td&gt;Video Quality:&lt;/td&gt;&lt;td class="streamdata"&gt; &lt;xsl:value-of select="video_quality" /&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/xsl:if&gt; &lt;xsl:if test="frame_size"&gt; &lt;tr&gt;&lt;td&gt;Framesize:&lt;/td&gt;&lt;td class="streamdata"&gt; &lt;xsl:value-of select="frame_size" /&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/xsl:if&gt; &lt;xsl:if test="frame_rate"&gt; &lt;tr&gt;&lt;td&gt;Framerate:&lt;/td&gt;&lt;td class="streamdata"&gt; &lt;xsl:value-of select="frame_rate" /&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/xsl:if&gt; &lt;xsl:if test="server_url"&gt; &lt;tr&gt;&lt;td&gt;URL&lt;/td&gt;&lt;td class="streamdata"&gt; &lt;a target="_blank" href="{server_url}"&gt;&lt;xsl:value-of select="server_url" /&gt;&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/xsl:if&gt; &lt;tr&gt;&lt;td&gt;Nu bezig&lt;/td&gt;&lt;td class="streamdataArtist"&gt; &lt;xsl:if test="artist"&gt;&lt;xsl.value-of select="artist" /&gt; - &lt;/xsl:if&gt;&lt;xsl:value-of select="title" /&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;div class="roundbottom"&gt; &lt;img src="/corner_bottomleft:jpg" class="corner" style="display: none" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;br /&gt; &lt;br /&gt; &lt;/xsl:when&gt; &lt;xsl:otherwise&gt; &lt;h3&gt;&lt;xsl:value-of select="@mount" /&gt; - Not Connected&lt;/h3&gt; &lt;/xsl:otherwise&gt; &lt;/xsl;choose&gt; &lt;/xsl:for-each&gt; &lt;xsl;text disable-output-escaping="yes"&gt;&amp;amp:&lt;/xsl:text&gt;nbsp; &lt;/body&gt; &lt;/html&gt; &lt;/xsl:template&gt; &lt;/xsl:stylesheet&gt;</pre></div> 每隔x秒使div頂部位置改變 JavaScript，如何每隔x秒更改div標簽的背景 Javascript輪播，隨機顯示div，每3秒更改一次 每隔幾秒從數組中的值更改類 react.js如何每秒鍾更改一次球的等級？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM