✔ Schreibmaschinen Effekt 2-mal auf der selben Seite?

  • Themenstarter Themenstarter Dagobert8Duck
  • Beginndatum Beginndatum
D

Dagobert8Duck

Hi hab mal ne Frage ich hab hier aus dem Forum diesen Code gefunden
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
  <!--
var strHallo = "HALLO!";
var aktiv = null;
var i = 0, text = 1;

function Typing (){
  document.getElementById("outID").innerHTML += strHallo.substr(i, 1);

  if (i++ >= 6)
    window.clearInterval(aktiv);
}

window.onload = function(){
  aktiv = window.setInterval("Typing()", 500);
}
 //-->
</script>
</head>
<body>
  <div id="outID"></div>
</body>
</html>

Un jetzt hab ich die Frage:
Kann man den Code 2-mal auf der selben Seite machen (natürlich mit anderem Text^^) wenn ja wie

schon mal danke
 
Ja.
HTML: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
  <!--
var strHallo = "HALLO!";
var strNochwas = "Nochmal anderer Text!";
var aktiv1 = null, aktiv2 = null;
var i = 0,j = 0;

function Typing1 (){
  document.getElementById("outID").innerHTML += strHallo.substr(i, 1);

  if (i++ >= strHallo.length)
    window.clearInterval(aktiv1);
}

function Typing2 (){
  document.getElementById("outID2").innerHTML += strNochwas.substr(j, 1);

  if (j++ >= strNochwas.length)
    window.clearInterval(aktiv2);
}

window.onload = function(){
  aktiv1 = window.setInterval("Typing1()", 500);
  aktiv2 = window.setInterval("Typing2()", 500);
}
 //-->
</script>
</head>
<body>
  <div id="outID"></div>
  <div id="outID2"></div>
</body>
</html>

Hab ich jetzt einfach so runtergetippt. Es Funktioniert, ist aber nicht schön programmiert.
 
Entschuldigung wenn ich so dumm Frage aber da ich grad am Javascript üben bin hab ich mal versucht jetzt noch drei auf einmal zu machen hab überall das eingefügt und hoffentlich richtig geändert aber es geht net
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
  <!--
var strHallo = "HALLO!";
var strNochwas = "Nochmal anderer Text!";
var stranders = "Hallo nochmal ein ganz anderer Text";
var aktiv1 = null, aktiv2 = null, aktiv3 = null;
var i = 0,j = 0;

function Typing1 (){
  document.getElementById("outID").innerHTML += strHallo.substr(i, 1);

  if (i++ >= strHallo.length)
    window.clearInterval(aktiv1);
}

function Typing2 (){
  document.getElementById("outID2").innerHTML += strNochwas.substr(j, 1);

  if (j++ >= strNochwas.length)
    window.clearInterval(aktiv2);
}
function Typing3 (){
  document.getElementById("outID3").innerHTML += stranders.substr(j, 1);

  if (j++ >= stranders.length)
    window.clearInterval(aktiv3);
}


window.onload = function(){
  aktiv1 = window.setInterval("Typing1()", 500);
  aktiv2 = window.setInterval("Typing2()", 500);
  aktiv3 = window.setinterval("Typing3()", 500);
}
 //-->
</script>
</head>
<body>
  <div id="outID"></div>
  <div id="outID2"></div>
  <div id="outID3"></div>
</body>
</html>
Bloß es geht nicht

Und ich entschuldige mich nochmal für das dumme Fragen *verbeugung* wäre aber nett wenn mir einer mal erklären kann was man dann ändern muss allgemein


LG
Dagobert
 
Du hast bei setInterval das i klein geschrieben. Das hätte dir aber auch die Fehlerkonsole sagen können.

Und falls du dich wunderst, wieso die beiden unteren Texte nur Buchstabensalat sind, du brauchst eine dritte Zählvariable.
 
Und wie kann man die Zähl variante machen?





UNd dann noch eine allerletze Frage dann nerv ich nicht mehr:

Kann man es so machen?

man hat 2 oder mehrere Knöüfe wenn man auf einen Klick tippt der PC einen Text
beim andren Knopf tippt er ein anderen text


wenn du mir dass noch beantworten könntest dan wäre ich seeeeeehr dankbar


LG
Browser-Zocker(Dagobert8Duck)

PS:
welche Fehlerconsole
 
Zuletzt bearbeitet:
HTML: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
  <!--
var strHallo = "Hallo!";
var strNochwas = "Nochmal Hallo!";
var aktiv1 = null, aktiv2 = null;
var i = 0,j = 0;

function Typing1 (){
  document.getElementById("outID").innerHTML += strHallo.substr(i, 1);

  if (i++ >= strHallo.length)
    window.clearInterval(aktiv1);
}

function Typing2 (){
  document.getElementById("outID2").innerHTML += strNochwas.substr(j, 1);

  if (j++ >= strNochwas.length)
    window.clearInterval(aktiv2);
}


window.onload = function(){
  document.getElementById("knopf1").onclick = function(){
  	this.style.display = "none";
  	aktiv1 = window.setInterval("Typing1()", 500);
  };
  
   document.getElementById("knopf2").onclick = function(){
   this.style.display = "none";
  	aktiv1 = window.setInterval("Typing2()", 500);
  };
}
 //-->
</script>
</head>
<body>	
	<a id="knopf1" href="#1">Mach was 1 !</a>
  <div id="outID"></div>
  <a id="knopf2" href="#2">Mach was 2 !</a>
  <div id="outID2"></div>
</body>
</html>

Das sind aber alles Javascript-Grundlagen. Normalerweise gibts dafür Bücher oder Webseiten. Ein Forum ist nicht dazu da sich etwas zusammenbauen zu lassen.

Jeder Browser hat eine Javascript-Fehlerkonsole. Wenn du z.B. Syntaxfehler machst steht dort eine Fehlermeldung.
 
Moin,

Vorschlag, der dir Tipparbeit abnimmt, weil du nicht jedes mal neue Funktionen schreiben musst:
Code: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 
                                charset=ISO-8859-1"   />
<meta name="author"             content="doktormolle" />
<meta name="date"               content="2010-02-08" />
<title>Test</title>
<script type="text/javascript">
<!--
TW=function(args)
{
  var _this=
  {
    'target':null,
    'interval':500,
    'txt':'Standardtext',
    'callback':function(){},
    'type':function()
          {
            var me=this;
            me.target.innerHTML+=me.txt.shift();
            if(me.txt.length)
            {
              window.setTimeout(function(){me.type()},this.interval);
            }
            else
            {
              this.callback();
            }
          }
   };
   
  try{
       _this.target=document.getElementById(args.target);
       var dummie=_this.target.tagName;
     }
  catch(e)
      {
        alert('Ungültiges Zielelement:#'+args.target);
        return;
      }
  
  for(var k in args)
  {
    if(k!='target'){_this[k]=args[k]}
  }
   _this.target.innerHTML='';
   _this.txt=_this.txt.split('');
   _this.type();   
}   



window.onload=function()
{
  TW({'target':'div1','txt':'kurzer Text','callback':function(){alert('#'+this.target.id+' sagt:Mann, das hat gedauert')}});
  TW({'target':'div2','interval':50,'txt':'längerer Text aber schneller getippt'});
  TW({'target':'div3','interval':20,'txt':'sehr schneller Tippser','callback':function(){this.target.style.color='red';}});
  TW({'target':'div4','callback':function(){this.target.style.textDecoration='line-through';}});
}
//-->
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</body>
</html>

Beispiel-Aufruf:
Code: 
TW({'target':'div3','interval':20,'txt':'sehr schneller Tippser','callback':function(){this.target.style.color='red';}});
Die Funktion TW erwartet ein Objekt als Argument.
Die Eigenschaft target ist darin Pflicht(die ID des Zieles)

Optional:
txt->der zu tippende Text
interval->die Tippgeschwindigkeit
callback->Funktion, die aufgerufen wird, wenn fertiggetippt wurde.

Viel Spass :-)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück