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

**cavaliere123** · 19-08-2012, 17:52

Ehm..... spero di non aver questo effetto....

)

allora ho questo script :

Codice 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>

    </HEAD>
    <BODY>
    </BODY>
</HTML>

che tu già conosci ..... vorrei dividerlo come quello di prima cioè una parte nell'head e una nel body sempre per lo stesso problema del template del blog.... e poi ultima cosa , se ho vari di questi script e vorrei farli partire e poi interrompere uno dietro l'altro c'è qualche procedura che può aiutarmi ?? Grazie...

**cavaliere123** · 19-08-2012, 17:54

Preciso far partire il primo, poi si interrompe dopo un tot tempo e parte il secondo e cosi via.... spero di essere stato più chiaro

**criric** · 19-08-2012, 18:12

vorrei dividerlo come quello di prima

credo che ti basta creare nel body questa parte e poi toglierla da javascript

Codice:

    
                    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>');
                    }

il resto è uguale a prima : tutto cio che sta tra <script> e </script> lo metti in un file esterno

far partire il primo, poi si interrompe dopo un tot tempo e parte il secondo

qui diventa piu complicato Potresti provare a racchiudere gli script dentro delle funzioni

Codice:

function pipistrlli() {
//tutto il codice
}
function fantasmi() {
// tutto il codice
}

per poi richiamarli con setTimeout o setInterval naturalmente dopo averli terminati con clearInterval
penso che ti procurerai un bel mal di testa

**cavaliere123** · 19-08-2012, 18:19

Ho fatto cosi :

Codice HTML:

    </HEAD>
    <BODY>
<script language="JavaScript">
   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>');
                    } 
   </script>
   </BODY>
</HTML>

ma non va, se non metto <script.... chiaramente esce il codice scritto....

(

**cavaliere123** · 19-08-2012, 18:21

Ma non ho usato stavolta un file esterno.... ho lasciato tutto cosi nell'head, spostato solo quella parte del codice nel body... preciso

**criric** · 19-08-2012, 18:22

io intendevo riscriverla in html

Codice HTML:

<div id='ghosts30'></div>
<div id='ghosts31'></div>
<div id='ghosts32'></div>

ovviamente conglistili per la posizione

**cavaliere123** · 19-08-2012, 18:43

Ok ok, ho compreso ciò che volevi dire.... quindi ad esempio se fossero 100 immagini dovrei scriverli uno dietro l'altro ??? non è previsto un for... a quanto vedo....

**cavaliere123** · 19-08-2012, 18:44

e poi il document write che fine fa ???

**cavaliere123** · 19-08-2012, 18:51

Forse ho capito.... non rispondermi... voglio provarci da solo... altrimenti ti chiederò aiuto... grazie

**cavaliere123** · 19-08-2012, 19:00

Allora ho fatto cosi , nell'head ho lasciato il for per la scrittura e che è diventato cosi :

Codice HTML:

                    for (i = 0; i < numberOfGhosts; i++){
                        
                        document.write('<div id="ghosts'+(idx+i)+'"'');
                    }

e nel body messo cosi :

Codice HTML:

 <BODY>


<div id="ghosts0" 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="ghosts1" 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="ghosts2" 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>


   </BODY>

qualcosa non va ( e ti pareva... ) , puoi correggermi per favore... Grazie .

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

Strumenti Discussione

Visualizzazione

Tag per Questa Discussione

Permessi di Scrittura