Forum PHP.pl > skrypt JS piszący tekst

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: skrypt JS piszący tekst - problem :|

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

cybertix

6.01.2009, 20:18:39

Witam dopiero zacząłem sie uczyć Javascriptu
Napisałem na razie takie coś

Kod

<html>
<head>
    <title> Skrypt_01 </title>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
    <style type="text/css">
    body{
        background-color: black;
    }
    div{
        background-color: #4080A0;
        color: white;
        height: 20px;
        padding: 10px;
    }
    </style>

    <script type="text/javascript">
    //
        //-------------------------------------------------------------------------------------------

        var news = new Array();
            news[0] = 'BARDZO obciążam procka i przeglądarke :P';
            news[1] = 'Działam chyba tylko pod przeglądarką -> Opera :|';

        var ktore = 0;

        //-------------------------------------------------------------------------------------------

        function sleep(millis)
        {
                var date = new Date();
                var curDate = null;

                do { curDate = new Date(); }
                while(curDate-date < millis);
        }

        //-------------------------------------------------------------------------------------------

        function write(ile)
        {
            var div = document.getElementById('content');

            if(ktore == ile)
            {
                div.innerHTML = '';
                return;
            }

            div.innerHTML = '';

            for(var i=0; i<news.length; i++)
            {
                for(var j=0; j<news[i].length+1; j++)
                {
                    div.innerHTML = news[i].substr(0, j) + '<span style="color:red"> _ </span>';
                    if(j == news[i].length)
                    {
                        div.innerHTML = news[i];
                        sleep(1000);
                    }
                    else
                        sleep(100);
                }
                sleep(2000);
            }

            ktore++;

            return write(ile);
        }

        //-------------------------------------------------------------------------------------------

        function ustaw()
        {
            document.getElementById('content').innerHTML = ' | skrypt | : Zaraz zaczne pisać';
            sleep(1000);
            write(2);
        }

        //-------------------------------------------------------------------------------------------
    //
    </script>
</head>

<body onLoad="ustaw();">
    <div id="content">

    </div>
</body>
</html>

Skrypt działa pod przeglądarką Opera a pod IE i Firefoxem nie działa (innych nie testowałem) :|
Pisze on tekst (prawie jak na o2.pl ten na prawo od panelu logowania)

Skrypt 'zawiesza IE i Firefoxa', użycie procesora jest bardzo duże(od 85 do 95%)
myśle że jest to spowodowane funkcją sleep() - znalazłem ją w necie
na początku miałem pętle for i było to samo

Kod

for(var i=0; i<30000000; i++);

Co zrobić żeby ten skrypt działał pod IE i Firefoxem i najlepiej żeby nie brał tyle użycia CPU ?

Wiem że mogłem zerżnąć z o2.pl ale to nie to samo jak napisać prawie cały sam

Prosze was forumowiczów o pomoc

lord_t

6.01.2009, 21:08:19

Użyj setTimeout który wywoła zdarzenie za określoną ilość milisekund bez obciążania procka non-stop.

punkomuzykant

21.01.2009, 22:02:09

Nie wnikam w to co wyklepałeś bo zmęczony sem ja

ale robiłem do testów coś takiego.
index.html

Kod

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="new_file.js"></script>
<style type="text/css">

    </style>
  </head>
<body>
    <div class="kontener">
    <p id="p1">s</p>
    <p id="p2">s</p>
    </div>
    </body>
    </html>

new_file.js

Kod

/**
* @author Punkomuzykant
*/
var tab = new Array();
tab[0] = "Mam skrypt który wyświetla mi flash. Musisz zmienić id obu div.";
tab[1] = "W Państwa przeglądarce zablokowana. Mam skrypt który wyświetla mi flash.";
tab[2] = "Musisz zmienić id obu div. W Państwa przeglądarce zablokowana";
var i= 0;
var j = 0;
function dupa(){
    j++;
    var nowa_tresc = tab[i].substring(0,j);
    if(j >tab[i].length+100){
    i++;
    j=0;
    //clearInterval(l);
    if(i>tab.length-1){
        i=0;
    }
    }
    document.getElementById("p1").innerHTML = "Pozostało znaków " + (tab[i].length-j)+ " <b>I</b> " + i + " <b>J</b> " +j;
    document.getElementById("p2").innerHTML = nowa_tresc;
}
var l = setInterval(dupa, 25);
window.onload = dupa;

mam nadzieję że się przyda ;p

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.