Schreibmaschinen Effekt 2-mal auf der selben Seite? @ tutorials.de: Tutorials, Forum & Hilfe

Dagobert8Duck · 08.02.10 11:24

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

***CPoly*** · 08.02.10 11:47

Ja.

HTML-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 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.

Dagobert8Duck · 08.02.10 12:36

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

***CPoly*** · 08.02.10 12:42

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.

Browser-zocker · 08.02.10 14:30

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

***CPoly*** · 08.02.10 14:58

HTML-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 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.

Sven Mintel · 08.02.10 17:52

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 :

1 2	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

Browser-zocker · 09.02.10 15:57

Danke hilft mir sehr

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Sprünge auf der selben Seite

Premiere 6.0: Auf jeden Clip selben Effekt anwenden

Zur selben Seite weiterleiten...

Prüfung der eingabe auf der Selben seite !

[AfterEffects] Schreibmaschinen-Effekt

E-Mail:

Abonnieren Abbestellen