Update images without the need to update the entire site

Question

Update images without the need to update the entire site

Navigation

#1 by (2 votes)

0

I am using a javascript code that updates the speaker's picture according to the day of the week and the time it is on the air. However this only happens when the page is updated (F5). Would you like to know what I need to add in the code to update the images happen automatically, without the need to update the entire site? Here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>

    function rodarImagens(){
            var current = new Date();
            var agora = current.getDay();
            var hora = current.getHours();
            var minutos = current.getMinutes();

            switch (agora){
                    case 0: //domingo
                            if(hora >= 0 && hora < 6){ document.write('<img src="/site103fm/imagenshorario/operador.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                            if(hora >= 6 && hora < 9){ document.write('<img src="/site103fm/imagenshorario/operador.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                            if(hora >= 9 && hora < 12){ document.write('<img src="/site103fm/imagenshorario/operador.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                            if(hora >= 12 && hora < 13){ document.write('<img src="/site103fm/imagenshorario/operador.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                            if(hora >= 13 && hora < 17){ document.write('<img src="/site103fm/imagenshorario/operador.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                            if(hora >= 17 && hora < 18){ document.write('<img src="/site103fm/imagenshorario/operador.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                            if(hora >= 18 && hora < 24){ document.write('<img src="/site103fm/imagenshorario/operador.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                    break
                    case 1: //segunda
                            if(hora >= 0 && hora < 7){ document.write('<img src="/site103fm/imagenshorario/operador.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                            if(hora >= 7 && hora < 9){ document.write('<img src="/site103fm/imagenshorario/operador.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                            if(hora >= 9 && hora < 12){ document.write('<img src="/site103fm/imagenshorario/locutor1.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                            if(hora >= 12 && hora < 14){ document.write('<img src="/site103fm/imagenshorario/locutor2.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                            if(hora >= 14 && hora < 16){ document.write('<img src="/site103fm/imagenshorario/locutor3.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                            if (hora == 16 && minutos < 40){document.write('<img src="/site103fm/imagenshorario/locutor3.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                            if (hora == 16 && minutos >= 40){document.write('<img src="/site103fm/imagenshorario/locutor4.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                            if(hora >= 17 && hora < 19){ document.write('<img src="/site103fm/imagenshorario/locutor4.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');} 
                            if(hora >= 19 && hora < 24){ document.write('<img src="/site103fm/imagenshorario/operador.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                    break
                    case 2: //terça
                            if(hora >= 0 && hora < 7){ document.write('<img src="/site103fm/imagenshorario/operador.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                            if(hora >= 7 && hora < 9){ document.write('<img src="/site103fm/imagenshorario/operador.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                            if(hora >= 9 && hora < 12){ document.write('<img src="/site103fm/imagenshorario/locutor1.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                            if(hora >= 12 && hora < 14){ document.write('<img src="/site103fm/imagenshorario/locutor2.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                            if(hora >= 14 && hora < 16){ document.write('<img src="/site103fm/imagenshorario/locutor3.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                            if (hora == 16 && minutos < 40){document.write('<img src="/site103fm/imagenshorario/locutor3.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                            if (hora == 16 && minutos >= 40){document.write('<img src="/site103fm/imagenshorario/locutor4.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                            if(hora >= 17 && hora < 19){ document.write('<img src="/site103fm/imagenshorario/locutor4.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');} 
                            if(hora >= 19 && hora < 24){ document.write('<img src="/site103fm/imagenshorario/operador.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                    break
                    case 3: //quarta
                            if(hora >= 0 && hora < 7){ document.write('<img src="/site103fm/imagenshorario/operador.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                            if(hora >= 7 && hora < 9){ document.write('<img src="/site103fm/imagenshorario/operador.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                            if(hora >= 9 && hora < 12){ document.write('<img src="/site103fm/imagenshorario/locutor1.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                            if(hora >= 12 && hora < 14){ document.write('<img src="/site103fm/imagenshorario/locutor2.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                            if(hora >= 14 && hora < 16){ document.write('<img src="/site103fm/imagenshorario/locutor3.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                            if (hora == 16 && minutos < 40){document.write('<img src="/site103fm/imagenshorario/locutor3.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                            if (hora == 16 && minutos >= 40){document.write('<img src="/site103fm/imagenshorario/locutor4.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                            if(hora >= 17 && hora < 19){ document.write('<img src="/site103fm/imagenshorario/locutor4.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');} 
                            if(hora >= 19 && hora < 24){ document.write('<img src="/site103fm/imagenshorario/operador.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                    break
                    case 4: //quinta
                            if(hora >= 0 && hora < 7){ document.write('<img src="/site103fm/imagenshorario/operador.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                            if(hora >= 7 && hora < 9){ document.write('<img src="/site103fm/imagenshorario/operador.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                            if(hora >= 9 && hora < 12){ document.write('<img src="/site103fm/imagenshorario/locutor1.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                            if(hora >= 12 && hora < 14){ document.write('<img src="/site103fm/imagenshorario/locutor2.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                            if(hora >= 14 && hora < 16){ document.write('<img src="/site103fm/imagenshorario/locutor3.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                            if (hora == 16 && minutos < 40){document.write('<img src="/site103fm/imagenshorario/locutor3.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                            if (hora == 16 && minutos >= 40){document.write('<img src="/site103fm/imagenshorario/locutor4.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                            if(hora >= 17 && hora < 19){ document.write('<img src="/site103fm/imagenshorario/locutor4.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');} 
                            if(hora >= 19 && hora < 24){ document.write('<img src="/site103fm/imagenshorario/operador.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                    break
                    case 5: //sexta
                           if(hora >= 0 && hora < 7){ document.write('<img src="/site103fm/imagenshorario/operador.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                            if(hora >= 7 && hora < 9){ document.write('<img src="/site103fm/imagenshorario/operador.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                            if(hora >= 9 && hora < 12){ document.write('<img src="/site103fm/imagenshorario/locutor1.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                            if(hora >= 12 && hora < 14){ document.write('<img src="/site103fm/imagenshorario/locutor2.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                            if(hora >= 14 && hora < 16){ document.write('<img src="/site103fm/imagenshorario/locutor3.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                            if (hora == 16 && minutos < 40){document.write('<img src="/site103fm/imagenshorario/locutor3.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                            if (hora == 16 && minutos >= 40){document.write('<img src="/site103fm/imagenshorario/locutor4.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                            if(hora >= 17 && hora < 19){ document.write('<img src="/site103fm/imagenshorario/locutor4.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');} 
                            if(hora >= 19 && hora < 24){ document.write('<img src="/site103fm/imagenshorario/operador.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                    break                   
                    case 6: //sábado
                            if(hora >= 0 && hora < 8){ document.write('<img src="/site103fm/imagenshorario/operador.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                            if(hora >= 8 && hora < 10){ document.write('<img src="/site103fm/imagenshorario/operador .png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                            if(hora >= 10 && hora < 12){ document.write('<img src="/site103fm/imagenshorario/locutor1.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                            if(hora >= 12 && hora < 13){ document.write('<img src="/site103fm/imagenshorario/operador.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                            if(hora >= 13 && hora < 17){ document.write('<img src="/site103fm/imagenshorario/locutor5.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                            if(hora >= 17 && hora < 19){ document.write('<img src="/site103fm/imagenshorario/locutor3.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                            if(hora >= 19 && hora < 24){ document.write('<img src="/site103fm/imagenshorario/operador.png" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;"/>');}
                    break   
            }
    }
    </script>
</head>

<body>
<p><script>rodarImagens();</script></p>
</body>
</html>

javascript

asked by anonymous 10.02.2018 / 19:41

1 answer

Function that returns next character in ASCII table in PHP Tkinter function being executed even without clicking the button

score 2 · Accepted Answer

About code improvements

I do not advise you to use document.write , because it will erase the site and keep only the photo, it would be best if each image had its ID and you changed to a similar function. I also noticed that the whole Sunday is just the operator, I did not understand why you put the same for each time interval, was not enough for the whole period? So:

if(hora >= 0 && hora < 24){ locutor.src = "/site103fm/imagenshorario/operador.png"}

How to run the function in automatic mode and shoot alone

User setTimeout to repeat the function call every second and change the time it changes the image: Modify the tag BODY like this:

<body onload="rodarImagens()">

Within the function rotate Images () at the end, but inside, put this:

setTimeout(function(){ rodarImagens() }, 1000);

Complete code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script>

        function rodarImagens(){
                var current = new Date();
                var agora = current.getDay();
                var hora = current.getHours();
                var minutos = current.getMinutes();

                var locutor = document.getElementById('locutor');
switch (agora){
                        case 0: //domingo
                                if(hora >= 0 && hora < 6){ locutor.src = "/site103fm/imagenshorario/operador.png"}
                                if(hora >= 6 && hora < 9){ locutor.src = "/site103fm/imagenshorario/operador.png"}
                                if(hora >= 9 && hora < 12){ locutor.src = "/site103fm/imagenshorario/operador.png"}
                                if(hora >= 12 && hora < 13){ locutor.src = "/site103fm/imagenshorario/operador.png"}
                                if(hora >= 13 && hora < 17){ locutor.src = "/site103fm/imagenshorario/operador.png"}
                                if(hora >= 17 && hora < 18){ locutor.src = "/site103fm/imagenshorario/operador.png"}
                                if(hora >= 18 && hora < 24){ locutor.src = "/site103fm/imagenshorario/operador.png"}
                        break
                        case 1: //segunda
                                if(hora >= 0 && hora < 7){ locutor.src = "/site103fm/imagenshorario/operador.png"}
                                if(hora >= 7 && hora < 9){ locutor.src = "/site103fm/imagenshorario/operador.png"}
                                if(hora >= 9 && hora < 12){ locutor.src = "/site103fm/imagenshorario/locutor1.png"}
                                if(hora >= 12 && hora < 14){ locutor.src = "/site103fm/imagenshorario/locutor2.png"}
                                if(hora >= 14 && hora < 16){ locutor.src = "/site103fm/imagenshorario/locutor3.png"}
                                if (hora == 16 && minutos < 40){locutor.src = "/site103fm/imagenshorario/locutor3.png"}
                                if (hora == 16 && minutos >= 40){locutor.src = "/site103fm/imagenshorario/locutor4.png"}
                                if(hora >= 17 && hora < 19){ locutor.src = "/site103fm/imagenshorario/locutor4.png"} 
                                if(hora >= 19 && hora < 24){ locutor.src = "/site103fm/imagenshorario/operador.png"}
                        break
                        case 2: //terça
                                if(hora >= 0 && hora < 7){ locutor.src = "/site103fm/imagenshorario/operador.png"}
                                if(hora >= 7 && hora < 9){ locutor.src = "/site103fm/imagenshorario/operador.png"}
                                if(hora >= 9 && hora < 12){ locutor.src = "/site103fm/imagenshorario/locutor1.png"}
                                if(hora >= 12 && hora < 14){ locutor.src = "/site103fm/imagenshorario/locutor2.png"}
                                if(hora >= 14 && hora < 16){ locutor.src = "/site103fm/imagenshorario/locutor3.png"}
                                if (hora == 16 && minutos < 40){locutor.src = "/site103fm/imagenshorario/locutor3.png"}
                                if (hora == 16 && minutos >= 40){locutor.src = "/site103fm/imagenshorario/locutor4.png"}
                                if(hora >= 17 && hora < 19){ locutor.src = "/site103fm/imagenshorario/locutor4.png"} 
                                if(hora >= 19 && hora < 24){ locutor.src = "/site103fm/imagenshorario/operador.png"}
                        break
                        case 3: //quarta
                                if(hora >= 0 && hora < 7){ locutor.src = "/site103fm/imagenshorario/operador.png"}
                                if(hora >= 7 && hora < 9){ locutor.src = "/site103fm/imagenshorario/operador.png"}
                                if(hora >= 9 && hora < 12){ locutor.src = "/site103fm/imagenshorario/locutor1.png"}
                                if(hora >= 12 && hora < 14){ locutor.src = "/site103fm/imagenshorario/locutor2.png"}
                                if(hora >= 14 && hora < 16){ locutor.src = "/site103fm/imagenshorario/locutor3.png"}
                                if (hora == 16 && minutos < 40){locutor.src = "/site103fm/imagenshorario/locutor3.png"}
                                if (hora == 16 && minutos >= 40){locutor.src = "/site103fm/imagenshorario/locutor4.png"}
                                if(hora >= 17 && hora < 19){ locutor.src = "/site103fm/imagenshorario/locutor4.png"} 
                                if(hora >= 19 && hora < 24){ locutor.src = "/site103fm/imagenshorario/operador.png"}
                        break
                        case 4: //quinta
                                if(hora >= 0 && hora < 7){ locutor.src = "/site103fm/imagenshorario/operador.png"}
                                if(hora >= 7 && hora < 9){ locutor.src = "/site103fm/imagenshorario/operador.png"}
                                if(hora >= 9 && hora < 12){ locutor.src = "/site103fm/imagenshorario/locutor1.png"}
                                if(hora >= 12 && hora < 14){ locutor.src = "/site103fm/imagenshorario/locutor2.png"}
                                if(hora >= 14 && hora < 16){ locutor.src = "/site103fm/imagenshorario/locutor3.png"}
                                if (hora == 16 && minutos < 40){locutor.src = "/site103fm/imagenshorario/locutor3.png"}
                                if (hora == 16 && minutos >= 40){locutor.src = "/site103fm/imagenshorario/locutor4.png"}
                                if(hora >= 17 && hora < 19){ locutor.src = "/site103fm/imagenshorario/locutor4.png"} 
                                if(hora >= 19 && hora < 24){ locutor.src = "/site103fm/imagenshorario/operador.png"}
                        break
                        case 5: //sexta
                               if(hora >= 0 && hora < 7){ locutor.src = "/site103fm/imagenshorario/operador.png"}
                                if(hora >= 7 && hora < 9){ locutor.src = "/site103fm/imagenshorario/operador.png"}
                                if(hora >= 9 && hora < 12){ locutor.src = "/site103fm/imagenshorario/locutor1.png"}
                                if(hora >= 12 && hora < 14){ locutor.src = "/site103fm/imagenshorario/locutor2.png"}
                                if(hora >= 14 && hora < 16){ locutor.src = "/site103fm/imagenshorario/locutor3.png"}
                                if (hora == 16 && minutos < 40){locutor.src = "/site103fm/imagenshorario/locutor3.png"}
                                if (hora == 16 && minutos >= 40){locutor.src = "/site103fm/imagenshorario/locutor4.png"}
                                if(hora >= 17 && hora < 19){ locutor.src = "/site103fm/imagenshorario/locutor4.png"} 
                                if(hora >= 19 && hora < 24){ locutor.src = "/site103fm/imagenshorario/operador.png"}
                        break                   
                        case 6: //sábado
                                if(hora >= 0 && hora < 8){ locutor.src = "/site103fm/imagenshorario/operador.png"}
                                if(hora >= 8 && hora < 10){ locutor.src = "/site103fm/imagenshorario/operador .png"}
                                if(hora >= 10 && hora < 12){ locutor.src = "/site103fm/imagenshorario/locutor1.png"}
                                if(hora >= 12 && hora < 13){ locutor.src = "/site103fm/imagenshorario/operador.png"}
                                if(hora >= 13 && hora < 17){ locutor.src = "/site103fm/imagenshorario/locutor5.png"}
                                if(hora >= 17 && hora < 19){ locutor.src = "/site103fm/imagenshorario/locutor3.png"}
                                if(hora >= 19 && hora < 24){ locutor.src = "/site103fm/imagenshorario/operador.png"}
                        break   
                }
                setTimeout(function(){ rodarImagens() }, 1000);
        }
        </script>
    </head>

    <body onload="rodarImagens()">
<img src="" id="locutor" style="right:6px;margin-top:7px;position: absolute; z-index: 99999999;" />
    </body>
    </html>