Collegare i dati inseriti in un body di un html ad un file .js

Discussione in 'Javascript' iniziata da cavaliere123, 19 Agosto 2012.

Tag (etichette):
  1. cavaliere123

    cavaliere123 Utente Attivo

    Registrato:
    31 Luglio 2012
    Messaggi:
    415
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    So dove ho sbagliato, il for si riferisce al numero di fantasmini che escono alla volta, il div in effetti è uno solo ghost, dovrei dirgli che c'è più di un div.... come faccio ???
     
  2. cavaliere123

    cavaliere123 Utente Attivo

    Registrato:
    31 Luglio 2012
    Messaggi:
    415
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    il for in effetti diciamo che fosse un testo e non un dvd fa questo con il document.write :

    "ghosts00" + "ghosts01" + "ghosts02" + "ghosts03" + "ghosts04" + "ghosts05" + "ghosts06" + "ghosts07" + "ghosts08" + "ghosts09"

    quindi forse e ripeto forse dovrei mettere nel body questi :

    HTML:
    <div id="ghosts00" style="position:absolute;top:0px;left:0px; width:40px;height:40px;background-color:transparent; font-size:0px;"><img src="'+urlofimage+'" class="ghost" width="70"/></div>
    <div id="ghosts01" style="position:absolute;top:0px;left:0px; width:40px;height:40px;background-color:transparent; font-size:0px;"><img src="'+urlofimage+'" class="ghost" width="70"/></div>
    <div id="ghosts02" style="position:absolute;top:0px;left:0px; width:40px;height:40px;background-color:transparent; font-size:0px;"><img src="'+urlofimage+'" class="ghost" width="70"/></div>
    ..................................
    
    e poi non so più cosa fare.... con la logica forse mi arraggio ma non riesco a scrivere bene la procedura... mi aiuti per favore :(
     
  3. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.607
    Mi Piace Ricevuti:
    54
    Punteggio:
    48
    Sesso:
    Maschio
    Località:
    TN
    il ciclo lo puoi togliere visto che li stai scrivendo a mano

    invece hai sbagliato a dare gli id

    se quardi il codice mette prima dell incremento un'altro valore che dovrebbe essere il numero di div che setti all'inizio, se non ricordo male
     
  4. cavaliere123

    cavaliere123 Utente Attivo

    Registrato:
    31 Luglio 2012
    Messaggi:
    415
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Il ciclo iniziale era questo :

    HTML:
    for (i = 0; i < numberOfGhosts; i++ ){ 
    document.write('<div id="ghosts'+(idx+i)+'"'
    +' style="position:absolute;top:0px;left:0px;'
    +'width:40px;height:40px;background-color:transparent;'
    +'font-size:0px;"><img src="'+urlofimage+'"   class="ghost" width="70"/></div>'); 
    }  
    
    e quindi dovrebbe essere :
    HTML:
    <div id="ghosts01">....
    <div id="ghosts02">....
    e poi a posto del for che scrivo direttamente cosi ? :

    HTML:
    document.write(ghost01)
    document.write(ghost02)
    
    , sinceramente non conosco la sintassi per fare il write di un dv :((
     
  5. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.607
    Mi Piace Ricevuti:
    54
    Punteggio:
    48
    Sesso:
    Maschio
    Località:
    TN
    Codice:
    id="ghosts'+(idx+i)+'"'
    idx dovrebbe essere come gia detto il numero di fantasmi ( prova a vedere )
    i è l'incremento ( 0 1 2 3) fino alla fine dei fantasmi

    quindi fa la somma e la concatena a ghosts
     
  6. cavaliere123

    cavaliere123 Utente Attivo

    Registrato:
    31 Luglio 2012
    Messaggi:
    415
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Lo so che forse ti scocciando porta pazienza per cortesia,

    allora ho fatto questa cosa per conoscere il valore di ivx :

    HTML:
    var numberOfGhosts = 10; /* Numero dei fantasmi */
    var idx = document.getElementsByTagName('div').length;
    
    
    for (i = 0; i < numberOfGhosts; i++ ){ 
    document.write('"ghosts'+(idx)+'"') }
    
    
    e mi esce : ghosts0""ghosts0""ghosts0""ghosts0""ghosts0""ghosts0""ghosts0""ghosts0""ghosts0""ghosts0"

    e poi ho fatto anche :
    HTML:
    for (i = 0; i < numberOfGhosts; i++ ){ 
    document.write('"ghosts'+(idx+i)+'"') }
    e mi esce , quindi idx = 0 ??
    ghosts1""ghosts2""ghosts3""ghosts4""ghosts5""ghosts6""ghosts7""ghosts8""ghosts9"

    e poi ripeto non so come impostare il document.write , mi sto impegnando giuro :(
     
  7. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.607
    Mi Piace Ricevuti:
    54
    Punteggio:
    48
    Sesso:
    Maschio
    Località:
    TN
    var idx = document.getElementsByTagName('div').length;
    vuoldire:

    prendi tutti gli elementi div
    -- document.getElementsByTagName('div')
    contali
    -- .length

    il valore di idx è uguale a quanti div ci sono nella pagina

    e devono essere uguali a quello che scrivi qui
    var numberOfGhosts = 10; /* Numero dei fantasmi */
     
  8. cavaliere123

    cavaliere123 Utente Attivo

    Registrato:
    31 Luglio 2012
    Messaggi:
    415
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    quindi devo scrivere 10 div perchè il loro numero è dieci e di conseguenza anche idx = 10 se ho compreso il tuo scritto

    e quindi :

    HTML:
    <div id="ghosts11" style="position:absolute;top:0px;left:0px; width:40px;height:40px;background-color:transparent; font-size:0px;"><img src="'+urlofimage+'" class="ghost" width="70"/></div>
    <div id="ghosts12" style="position:absolute;top:0px;left:0px; width:40px;height:40px;background-color:transparent; font-size:0px;"><img src="'+urlofimage+'" class="ghost" width="70"/></div>
    <div id="ghosts13" style="position:absolute;top:0px;left:0px; width:40px;height:40px;background-color:transparent; font-size:0px;"><img src="'+urlofimage+'" class="ghost" width="70"/></div>
    ......................................
    
    e a posto del for devo scrivere cosi :

    HTML:
    document.write (' id="ghost11" ' ) 
    document.write (' id="ghost12" ' ) 
    
    controllami anche la sintassi per favore :)
     
  9. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.607
    Mi Piace Ricevuti:
    54
    Punteggio:
    48
    Sesso:
    Maschio
    Località:
    TN
    lascia perdere il for, non devi scrivere niente li

    i div mi sebrano corretti anche se puoi semplificare con un classe css
    l'html poi non sa che valore ha la variabile urlofimage , non la puoi usare
    10 + 0 non fa 11 ma 10
    HTML:
    <html>
        <head>
            <style type='text/css'>
                .fantasma {
                    position:absolute;top:0px;left:0px; width:40px;height:40px;background-color:transparent; font-size:0px; 
                }
            </style>
        </head>
        <body>
            <div id="ghosts10" class="fantasma"><img src="fantasma.gif" class="ghost" width="70"/></div>
            <div id="ghosts11" class="fantasma"><img src="fantasma.gif" class="ghost" width="70"/></div>
            <div id="ghosts12" class="fantasma"><img src="fantasma.gif" class="ghost" width="70"/></div>
              ......
        </body>
    </html>
    
    stai facendo i passi piu lunghi della gamba, dovresti cominciare con qualcosa di piu semplice per imparare
     
  10. cavaliere123

    cavaliere123 Utente Attivo

    Registrato:
    31 Luglio 2012
    Messaggi:
    415
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Scusami adesso rientrato e a posto del for ????
    lo so che sto entrando in territori minati ma a parte imparare sto cercando anche di gestire il blog... :)
     
  11. cavaliere123

    cavaliere123 Utente Attivo

    Registrato:
    31 Luglio 2012
    Messaggi:
    415
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Scusa.... sostituito il tutto e va bene... solo una cosa strana, nell'angolo in alto a destra compare sempre il fantasmino da solo e non come getto di immagini e non cambia neanche con il refresh.... boh....
    Cmq grazie davvero.... me lo rivedo un attimo... :)
     
  12. cavaliere123

    cavaliere123 Utente Attivo

    Registrato:
    31 Luglio 2012
    Messaggi:
    415
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Ho visto il problema.... il fantasma fisso è dovuto ai div nel body.... lasciando il for come sta chiaramente le immagini vanno ben... in effetti non funziona :((

    per chiarezza ti posto il file ma me sa che qualcosa mi è sfuggita...
    HTML:
    <HTML>
        <HEAD>
            <script language="JavaScript">
                var img = new Array()
                var ran;            
                
    img[0] = 'fantasma.gif';
    img[1] = 'angelo.gif';
    img[2] = 'spade.gif'; 
    
                
                var urlofimage = img[0];
                function random() { 
                    ran = Math.floor(3 * Math.random());  
                    urlofimage = img[ran];
                }                    
                setInterval("random()",3000);
                
                if ((document.getElementById) &&
                    window.addEventListener || window.attachEvent){
                    (function(){
                        //Configurazione Effetto Fantasmi
                        var numberOfGhosts = 10; /* Numero dei fantasmi */
                        var ghostSpeed = 0.9; /* Velocità */
                        var inTheFace = 5;
                        var setTimeOutSpeed = 50; /* Tempo di permanenza */
                        //NON EDITARE SOTTO A QUESTA RIGA ESCLUSO URL IMMAGINE
                        var h,y,cy,cx,sy,sx,ref,field,oy1,oy2,ox1,ox2,iy1,iy2,ix1,ix2;
                        var d = document;
                        var domWw = (typeof window.innerWidth == "number");
                        var domSy = (typeof window.pageYOffset == "number");
                        var pi1 = 180/3.14;
                        var pi2 = 3.14/180;
                        var y = [];
                        var x = [];
                        var strs = [];
                        var gro = [];
                        var dim = [];
                        var dfc = [];
                        var vel = [];
                        var dir = [];
                        var acc = [];
                        var dtor = [];
                        var xy2 = [];
                        var idx = document.getElementsByTagName('div').length;
                        var zip = [];
                        var pix = "px";
    
       
                           
    for (i = 0; i < numberOfGhosts; i++ ){ 
    document.write('<div id="ghosts'+(idx+i)+'"'
    +' style="position:absolute;top:0px;left:0px;'
    +'width:40px;height:40px;background-color:transparent;'
    +'font-size:0px;"><img src="'+urlofimage+'"  class="ghost" width="70"/></div>'); 
    }  
    
    
                           
                        if (domWw) ref = window;
                        else{
                            if (d.documentElement &&
                                typeof d.documentElement.clientWidth == "number" &&
                                d.documentElement.clientWidth != 0)
                                ref = d.documentElement;
                            else{
                                if (d.body &&
                                    typeof d.body.clientWidth == "number")
                                    ref = d.body;
                            }
                        }
                        function win(){
                             
                            var mozBar = ((domWw) &&
                                ref.innerWidth != d.documentElement.offsetWidth)?20:0;
                            h = (domWw)?ref.innerHeight:ref.clientHeight;
                            w = (domWw)?ref.innerWidth - mozBar:ref.clientWidth;
                            cy = Math.floor(h/2);
                            cx = Math.floor(w/2);
                            oy1 = (75 * h / 100);
                            oy2 = (oy1 / 2);
                            ox1 = (75 * w / 100);
                            ox2 = (ox1 / 2);
                            iy1 = (18 * h / 100);
                            iy2 = (iy1 / 2);
                            ix1 = (18 * w / 100);
                            ix2 = (ix1 / 2);
                            field = (h > w)?h:w;
                        }
                        function rst(s){
                            var cyx;
                            sy = (domSy)?ref.pageYOffset:ref.scrollTop;
                            sx = (domSy)?ref.pageXOffset:ref.scrollLeft;
                            acc[s] = 0;
                            dim[s] = 1;
                            xy2[s] = 0;
                            cyx = Math.round(Math.random() * 2);
                            if (cyx == 0){
                                y[s] = (cy - iy2) + Math.floor(Math.random() * iy1);
                                x[s] = (cx - ix2) + Math.floor(Math.random() * ix1);
                            }
                            else{
                                y[s] = (cy - oy2) + Math.floor(Math.random() * oy1);
                                x[s] = (cx - ox2) + Math.floor(Math.random() * ox1);
                            }
                            dy = y[s] - cy;
                            dx = x[s] - cx;
                            dir[s] = Math.atan2(dy,dx) * pi1;
                            dfc[s] = Math.sqrt(dy*dy + dx*dx) ;
                            zip[s] = 10 * (dfc[s] + inTheFace) / 100;
                            vel[s] = ghostSpeed * dfc[s] / 100;
                            dtor[s] = (field - dfc[s]);
                            if (dtor[s] < 1) dtor[s] = 1;
                            gro[s] = 0.003 * dtor[s] / 100;
                        }
                        function animate(){
                            for (i = 0; i < numberOfGhosts; i++){
                                y[i] += vel[i] * Math.sin(dir[i] * pi2);
                                x[i] += vel[i] * Math.cos(dir[i] * pi2);
                                acc[i] = (vel[i] / (dfc[i] + (vel[i] * zip[i])) * vel[i]);
                                vel[i] += (acc[i]);
                                dim[i] += gro[i] + acc[i] / zip[i];
                                xy2[i] = dim[i] / 2;
                                if (y[i] < 0 + xy2[i] ||
                                    x[i] < 0 + xy2[i] ||
                                    y[i] > h - xy2[i] ||
                                    x[i] > w - xy2[i]){
                                    rst(i);
                                }
                                strs[i].top = (y[i] - xy2[i]) + sy + pix;
                                strs[i].left = (x[i] - xy2[i]) + sx + pix;
                                strs[i].width = (strs[i].height = (Math.round(dim[i])) + pix);
                                document.getElementById("ghosts"+(idx+i)).innerHTML = "<img src='"+urlofimage+"' class='ghost' width='70'/>";
                            }
                            
                            setTimeout(animate,setTimeOutSpeed);
                        }
                        function init(){
                            win();
                            for (i = 0; i < numberOfGhosts; i++){
                                
                                
                                strs[i] = document.getElementById("ghosts"+(idx+i)).style;
                                rst(i);
                            }
                            animate();
                        }
                        if (window.addEventListener){
                           
                            window.addEventListener("resize",win,false);
                            window.addEventListener("load",init,false);
                        }
                        else if (window.attachEvent){
                            
                            window.attachEvent("onresize",win);
                            window.attachEvent("onload",init);
                        }
                    })();
                }//End.
                
            </script>
            <style>
                .ghost {
                    filter:alpha(opacity=30);
                    -moz-opacity: 0.3;
                    opacity: 0.3;
                    -khtml-opacity: 0.3;
                }
                html {
                    overflow-x:hidden;
                }
            </style>
    
    
            <style type='text/css'>
    
                .fosco {
                    position:absolute;top:0px;left:0px; width:40px;height:40px;background-color:transparent; font-size:0px; 
                }
            </style>
        </head>
    
        <body>
            <div id="ghosts10" class="fosco"><img src="fantasma.gif" class="ghost" width="70"/></div>
            <div id="ghosts11" class="fosco"><img src="fantasma.gif" class="ghost" width="70"/></div>
            <div id="ghosts12" class="fosco"><img src="fantasma.gif" class="ghost" width="70"/></div>
              ......
        </body>
    </html>
    </HTML>
     
  13. cavaliere123

    cavaliere123 Utente Attivo

    Registrato:
    31 Luglio 2012
    Messaggi:
    415
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Però che peccato... tanto tempo vicino a questo lavoro e poi non completato.... :((
     
  14. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.607
    Mi Piace Ricevuti:
    54
    Punteggio:
    48
    Sesso:
    Maschio
    Località:
    TN
    Tra un po di tempo quando avrai piu esperienza lo riguardi e penserai ... "ma come ca. l'hanno scritto? io avrei fatto cosi .. " e butti giu un codice che potrai ridistribuire in rete :fonzie:
     
Sto caricando...

Condividi questa Pagina