Lösungen ,schreibmaschienentext

schreibmaschienentext.php

Quell Code

 <!DOCTYPE html> 
<html lang="de">
<head>
 
<meta charset="utf-8">
<title>Schreibmaschienen Txte</title>
<style>
h2{
  width:100%;
color:blue;
  font-size:50px;
  text-align:center;
}

</style>
</head>
<body>
<h2 class="subtitle typewriter" data-period="2000" data-color='[,red,green,blue,orange,black,yellow,grey,]' data-type='[ "Hallo!", "Hallo!", "Hier ist der Basti1012", "Ich bin heute mal nicht blau Hehe", "Aber Blödsinn in so ein Text schreiben kann ich immer", "Kurzer Text geht auch", "Komme aus Minden bei Hannover, Germany", "Das reicht", "Chau und Mfg   <br> Basti1012" ]'>&nbsp;</h2>
              
      <script>
      
      
        var Typewriter = function(el, toRotate, period) {
            this.toRotate = toRotate;
            this.el = el;
            this.loopNum = 0;
            this.period = parseInt(period, 10) || 2000;
            this.txt = '';
            this.tick();
            this.isDeleting = false;
        };
f=0;
        Typewriter.prototype.tick = function() {
            var i = this.loopNum % this.toRotate.length;
            var fullTxt = this.toRotate[i];

            if (this.isDeleting) {
                this.txt = fullTxt.substring(0, this.txt.length - 1);
            } else {
                this.txt = fullTxt.substring(0, this.txt.length + 1);
             
                    

                    
            }

            this.el.innerHTML = '<span class="visibility: hidden;">&nbsp;</span><span class="wrap">' + this.txt + '</span>';

            var that = this;
            var delta = 200 - Math.random() * 100;

            if (this.isDeleting) { delta /= 2; }

            if (!this.isDeleting && this.txt === fullTxt) {
                delta = this.period;
                this.isDeleting = true;
            } else if (this.isDeleting && this.txt === '') {
                this.isDeleting = false;
                this.loopNum++;
                delta = 500;
                      var elements1 = document.getElementsByClassName('typewriter');
        
               var color = elements1[0].getAttribute('data-color');    
              arra=color.split(',');
              var mengecolor=arra.length-2;
              console.log(mengecolor); 
              
              if(f<=mengecolor){
                f++;
     document.getElementsByClassName('typewriter')[0].style.color=arra=color.split(',')[f];        
              console.log(f+':'+mengecolor);
            }
              if(mengecolor==f){
              f=0;
            }
            }

            setTimeout(function () {
                that.tick();
            }, delta);
        };

        window.onload = function () {
            var elements = document.getElementsByClassName('typewriter');
            for (var i = 0; i < elements.length; i++) {
                var toRotate = elements[i].getAttribute('data-type');
     
                var period = elements[i].getAttribute('data-period');
                if (toRotate) {
                 //start
                    new Typewriter(elements[i], JSON.parse(toRotate), period);
                }
            }
        };


      
      </script>
              

</body>
</head>