Update images without the need to update the entire website

Asked

Viewed 203 times

0

I’m using a javascript code that updates the talker’s photo(a) according to the day of the week and the time it(a) is on the air. But this only happens when the page is updated (F5). I would like to know what I need to add to the code to update the images automatically, without the need to update the entire site? Follow the code below:

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

1 answer

2


On improvements to the code

I wouldn’t advise using document.write, because it will delete the site and keep only the photo, the best would be that each image had its own ID and you traded it for 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, not enough for the whole period? Thus:

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

How to turn the function in auto mode and fire alone

User setTimeout to repeat the call of the function every second and if change the time it changes the image: Modify the Tag BODY thus:

<body onload="rodarImagens()">

Inside the function rodarImagens() 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>

  • Solved! It’s working as I wanted. The voice over image automatically updates without the site needing to be updated. And now the site does not disappear after the time set in setTimeout. Thank you!

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.