JS - postupne nahradzanie stringu

Zdravim, riesim nasledujuci problem: Chcem, aby mi string po prejdeni hlodavcom, postupne po znakoch prebehol od ASCII dec 33 znaku az po jeho povodny a to pre vsetky znaky v retazci. Povodne som vytvoril jednoduchy counter, na ktorom mi to funguje v poriadku aj s 10ms intervalom, avsak ked som podobny pristup pouzil aj pre tento problem, tak to vyzera, ze iteracie urobi aj tak "instantne", takze bud som to urobil zle alebo na to treba ist inak. Mate nejake navrhy?

Kód: Vybrať všetko

<!doctype html>
<html>
	<head>
		<style type="text/css">
			#container {width: 960px; height: 500px; margin:80px auto;}
			p {text-align: center; font-family: Verdana;}
		</style>

		<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

		<script type="text/javascript">

			$(function(){


				var elem = $('.counter');
				var count = parseInt(elem.text());

				myCounter = setInterval(function () {
						    count += 1;
						    elem.html(count);
				}, 1000);
				

				function setCharAt(str,index,chr) {
				    if(index > str.length-1) return str;
				    return str.substr(0,index) + chr + str.substr(index+1);
				}


				$("p").mouseover(function(){

					var selected = $(this);
					var content = selected.text();
					
					var tempcontent = content;

						for ( var i = 0; i < content.length; i++ ){
							var letterCode = content.charCodeAt(i);

							for ( var j = 33; j <= letterCode; j++){
								tempcontent = setCharAt(tempcontent, i, String.fromCharCode(j))
								selected.text(tempcontent);
							}
						}

					console.log('done');
				});
			});

		</script>

	</head>
	<body>
		<div id="container">
			<p><span class="counter">0</span> seconds elapsed.</p>
			<p>Troll is an Awesome Guy</p>
			<p>Curriculum Vitae</p>
			<p>Lorem Ipsum</p>
		</div>
	</body>
</html>

// upravil som nazvy premennych

ešte raz, o čo sa to pokúšaš? Je to dosť bordel na interpretovanie v hlave (premenná letter čo si si tam vytvoril sa nikde nepoužíva, inú premennú pomenuješ string ale zároveň používaš objekt String čo ešte viac zťažuje orientáciu v hlave..) tak som si to zkopíroval a nejak som nespozoroval že by to niečo robilo

Pisal som to dnes nad ranom, tak to vyzera divoko...

Majme text Hello World ako obsah p elementu. Po prejdeni mysou by sa mal zacat menit na:

!ello World
"ello World
#ello World
...
Hello World
H!llo World
H"llo World
H#llo World
...
Hcllo World
Hdllo World
Hello World
...
Hello Worlb
Hello Worlc
Hello World

Potrebujem tam vsak pichnut nejake oneskorenie medzi tieto kroky, prave preto, aby bolo vidno, ze to nieco robi

// pracovat by to malo spravne, kedze po odstraneni = z druheho iteratora, sa vsetky znaky v retazci zastavia na o 1 mensom, ako bol povodny, avsak vidno len ten finalny retazec

je to narýchlo, lebo mi končí šichta v práci tak sa ponáhlam domov, takže možno tam bude bug

Kód: Vybrať všetko

<!doctype html>
<html>
    <head>
        <style type="text/css">
            #container {width: 960px; height: 500px; margin:80px auto;}
            p {text-align: center; font-family: Verdana;}
        </style>

        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

        <script type="text/javascript">

            $(function(){


                var elem = $('.counter');
                var count = parseInt(elem.text());

                myCounter = setInterval(function () {
                    count += 1;
                    elem.html(count);
                }, 1000);
            

                function setCharAt(str,index,chr) {
                    if(index > str.length-1) return str;
                    return str.substr(0,index) + chr + str.substr(index+1);
                }
            
                $("p").mouseover(function(){
                
                    var selected = $(this);
                    var content = selected.text();
               
                    function zamen(tmp,start,znak){
                        if(start > content.length) return;
                        if(znak == content.charCodeAt(start)){
                            znak = 33;
                            start += 1;
                        }
                        znak++;
                        tmp = setCharAt(tmp, start, String.fromCharCode(znak));
                        selected.text(tmp);
                        setTimeout(function(){zamen(tmp,start,znak)},50);
                    }
               
                    setTimeout(function(){zamen(content,0,33)},50);
                
                });
            });

        </script>

    </head>
    <body>
        <div id="container">
            <p><span class="counter">0</span> seconds elapsed.</p>
            <p>Troll is an Awesome Guy</p>
            <p>Curriculum Vitae</p>
            <p>Lorem Ipsum</p>
        </div>
    </body>
</html>

//opravené

Príspevok od používateľa **Aiden** » 12 jan 2013, 0:51

Dakujem audio, velmi si mi pomohol

Funguje to skvele, len tento riadok je potrebne upravit, ak by to niekto chcel niekedy pouzit:

Kód: Vybrať všetko

tmp = setCharAt(start, String.fromCharCode(znak));

v

Kód: Vybrať všetko

tmp = setCharAt(tmp, start, String.fromCharCode(znak));

jo, ja som do funkcie zamen daval aj ten string ako parameter, a potom som to mazal lebo to mas ako globalnu a zmazal som aj tam kde som nemal

JS - postupne nahradzanie stringu

JS - postupne nahradzanie stringu

Re: JS - postupne nahradzanie stringu

Re: JS - postupne nahradzanie stringu

Re: JS - postupne nahradzanie stringu

Re: JS - postupne nahradzanie stringu

Re: JS - postupne nahradzanie stringu