Creazione bacheca digitale

di il
2 risposte

Creazione bacheca digitale

Ciao a tutti,
avrei bisogno di un consiglio per la realizzazione di una bacheca digitale. Premettendo che ho iniziato da poco ad avvicinarmi al mondo della programmazione, la mia idea è quella di avere su un computer una singola pagina aperta in cui si aprono, ad intervalli di tempo, due pagine sharepoint o PowerBI.
Ho fatto dei test con i colori per vedere se concettualmente l'idea era fattibile ed ho utilizzato la funzione setInterval, ed effettivamente sono riuscita a fare in modo che si alternassero 7 colori ogni 3 secondi.
Poi ho provato a farlo con le pagine web utilizzando sia la funzione iframe che window.open ed è proprio qui che ho iniziato ad avere problemi, infatti non riesco a fare in modo che le pagine si alternino in modo continuo.
Purtroppo sono ancora alle prime armi e non riesco proprio a trovare una soluzione.
Vi pubblico entrambi i test che ho realizzato e mi scuso anticipatamente per gli errori che ci saranno .

Test colori
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Time Function Execution</title>
    <!-- <link rel="stylesheet" type="text/css" href="styles.css" /> -->
    <style>
#color{
    width: 150px;
    border:solid 1px black;
    text-align: center;
    padding: 150px;
    color: white;
    text-shadow: 2px 2px 4px black;
    font-size: 50px;
    font-weight: bold;
}
</style>
</head>

<body>
    <div id='color'></div>

<script>
var colors = ['red', 'blue', 'orange', 'pink', 'gray', 'green', 'purple'];
var counter = 0;
var div_color = document.getElementById('color')
setInterval(count, 3000);
function count() {
    if (counter  >= colors.length) {counter = 0}
    div_color.innerHTML = colors[counter];
    div_color.style.backgroundColor = colors[counter];
    ++counter;
}
</script>
</body>
</html>
Test pagine web
<!DOCTYPE html>
<html>



    <script>
        const myTimeout = setTimeout(cambiaPagina, 5000);
        
        function cambiaPagina() {
           
            <iframe src="https://app.powerbi.com"
            width="680" 
            height="480" 
            allowfullscreen>
            </iframe>
        }
        
        </script>
</html>
In questo test ho utilizzato setTimeout, però non funziona. Come posso fare in modo che si alternino due pagine? Potreste darmi dei consigli?

Grazie

2 Risposte

  • Re: Creazione bacheca digitale

    Millainthesky ha scritto:


    Poi ho provato a farlo con le pagine web utilizzando sia la funzione iframe che window.open ed è proprio qui che ho iniziato ad avere problemi, infatti non riesco a fare in modo che le pagine si alternino in modo continuo.
    [...]
    <!DOCTYPE html>
    <html>
        <script>
            const myTimeout = setTimeout(cambiaPagina, 5000);
            
            function cambiaPagina() {
               
                <iframe src="https://app.powerbi.com"
                width="680" 
                height="480" 
                allowfullscreen>
                </iframe>
            }
           
            </script>
    </html>
    Non puoi assolutamente intervallare codice JavaScript (mi riferisco alla funzione cambiaPagina) mettendo al suo interno codice HTML in quel modo (il tag IFRAME)?

    Come ti aspetteresti che venga mostrato quell'IFRAME, e in che punto?

    Il codice che hai scritto non ha proprio senso: l'elemento <iframe> deve essere inserito nella pagina, nel punto in cui lo si vuole visualizzare tenuto conto degli altri elementi che sono già presenti e come il frame deve collocarsi rispetto a essi.

    Nella funzione JavaScript invece, deve essere presente solo codice, che va a recuperare l'oggetto del DOM che rappresenta il frame (per ID o per nome del tag) e lo manipola alterando le sue proprietà (ad esempio, l'attributo src).

    Riguarda l'esempio che hai nel primo codice, e sfruttalo sostituendo al DIV il tuo IFRAME, e ai colori gli URL da scambiare; la proprietà da modificare sarà appunto "src" e non il colore di sfondo. Per il resto, il concetto si applica perfettamente.

    In caso di ulteriori difficoltà, approfondisci un minimo la struttura del DOM, la sintassi JavaScript di base, ed esamina altri esempi simili a quello che devi fare per comprendere i meccanismi corretti di funzionamento e codifica della procedura, senza andare a tentoni.

    Ciao!
  • Re: Creazione bacheca digitale

    Grazie mille per i preziosi consigli!
Devi accedere o registrarti per scrivere nel forum
2 risposte