java script html text verändern jede sekunde?

2 Antworten

Vom Fragesteller als hilfreich ausgezeichnet
TechPech1984
Nutzer, der sehr aktiv auf gutefrage ist
im Thema Computer
22.12.2020, 13:41

setInterval oder setTimeout je nach anwendungsfall .

https://javascript.info/settimeout-setinterval
uefuw 
Fragesteller
 22.12.2020, 13:49

beckomme das irgentwie nicht hin

hab

<button type="button" onclick=' setTimeout( document.getElementById("changeText").innerHTML = "Info : Ps3 System 4.82 Nand Compatible!",1000)'>Detect</button>

und

<button type="button" onclick=' setTimeout,1000( document.getElementById("changeText").innerHTML = "Info : Ps3 System 4.82 Nand Compatible!")'>Detect</button>

versucht

0
TechPech1984  22.12.2020, 14:03
@uefuw

https://jsfiddle.net/8fz2749a/1/
du must eine function einfügen , was du machst ist code , das führt zum fehler , den setTimeout(function,zeit);

<p id="changeText"> Pinkel</p>
<button type="button" onclick='setTimeout(function(){document.getElementById("changeText").innerHTML="Info:Ps3!"},3000)'>Detect</button>
1
TechPech1984  22.12.2020, 14:09
@TechPech1984

hier das Beispiel wo sich jede Sekunde was ändert

https://jsfiddle.net/8fz2749a/2/

<p id="changeText"> Pinkel</p>
<button type="button" onclick='setInterval(function(){document.getElementById("changeText").innerHTML="Info:Ps "+Math.random()*100},1000)'>Detect</button>
0
uefuw 
Fragesteller
 22.12.2020, 14:27
@TechPech1984

ich hab mal noch eine frage hab es jetzt so gemacht aber er überspringt 30 bis 75%

<button type="button" 

onclick=' document.getElementById("changeText").innerHTML = "Info : Detect... 5%";

setTimeout(() => {  document.getElementById("changeText").innerHTML = "Info : 25%" }, 1000);

setTimeout(() => {  document.getElementById("changeText").innerHTML = "Info : 30%" }, 2000);

setTimeout(() => {  document.getElementById("changeText").innerHTML = "Info : 50%" }, 1000);

setTimeout(() => {  document.getElementById("changeText").innerHTML = "Info : 75%" }, 1000);

setTimeout(() => {  document.getElementById("changeText").innerHTML = "Info : 99%" }, 2000);

setTimeout(() => {  document.getElementById("changeText").innerHTML = "Info : Ps3 System 4.82 Nand Compatible!" }, 1000);

'

>test</button>

0
uefuw 
Fragesteller
 22.12.2020, 14:30
@uefuw

ok danke hab das jetzt auch

0
TechPech1984  22.12.2020, 14:57
@uefuw

schon mal durchdacht wie JavaScript das abarbeitet .

Es wird nicht nacheinander gemacht , sondern quasi wird am anfang der ganze code einmal durchgegangen , jeweils ein timer auf die jeweilige function gesetzt.

du hast also danach 6 functionen mit 6 timern

also

springt es dann nach 1s auf 25% und 50% und 75% und zur letzten (ja was den nun ) nach 2s springst du zu 30% und 99% (ja was den nun)

das ist keine kette , ketten müsstest du quasi das setTimeout in der function machen , und in dieser function wieder setTimeout und so weiter und sofort . also geschachtelte functionen im setTimeout was wiederum in der vorherigen function im setTimeout ist ....

oder du machst die timer so das sie nacheinader laufen 1s,2s,3s,4s,5s,6s

0
uefuw 
Fragesteller
 22.12.2020, 14:58
@TechPech1984

ich weiß es jetzt, tuht mir leid ist erst jetzt das erste mal das ich mit javascript arbeite

0
TechPech1984  22.12.2020, 15:04
@uefuw

sowas innerhalb vom HTML ist eh schon grenzwertig , schlauer wäre es mal mit einer Javascript datei und die dann einbinden und im onclick nur auf die "aufrufende" function zu verweisen in dieser dann die Befehle packen .

irgendwann wirste sonst nicht mehr dein code warten können und änderungen werden dann auch noch problematischer . gewöhne dir so ein hardcodet zeug im HTML möglichst nicht erst an .

viel spass weiterhin .

p.s. leid tun muss es dir nicht .

p.p.s und hier kannst du das FORMAT </> hinter dem Tt nehmen um CODE in CODEblocks zu formatieren .

1
Iatros70
22.12.2020, 14:21

Hier fülle ich eine ProgressBar mit setInterval

$(document).ready(function() {

  var progression = 0,

  progress = setInterval(function()

  {

    $('#progress .progress-text').text(progression + '%');

    $('#progress .progress-bar').css({'width':progression+'%'});

    if(progression == 100) {

      clearInterval(progress);

    } else

      progression += 1;

  }, 300);

});

Hier ein Beispiel aus dem Netz:

<!DOCTYPE html>

<html>

<body>

<p>A script on this page starts this clock:</p>

<p id="demo"></p>

<script>

var myVar = setInterval(myTimer, 1000);

function myTimer() {

 var d = new Date();

 document.getElementById("demo").innerHTML = d.toLocaleTimeString();

}

</script>

</body>

</html>

Du kannst nen Zähler mitlaufen lassen und mit modulo 2 prüfen. Ist es ne gerade Zahl shrebst den Text rein, bei ner ungeraden nix