Change image according to specific date

Question

Hello, I have a website where appears such an image according to changing time. Only now I need this template to display such a specified image on a given date until such date. For example.

In this case I’m using a script similar to this:

<script>
function rodarImagens(){
    var now = new Date();
    var agora = now.getDay();
    var hora = now.getHours();
    var data = now.getDate();
    switch (agora){
        case 0: //domingo
        break
        case 1: //segunda
            if(data >= 07 && data < 08){ document.write('<img src="images/amapolacalcados.png">');}
            if(data >= 09 && data < 10){ document.write('<img src="images/amorimcontabil.png">');}
        break
        case 2: //terça
            if(hora >= 10 && hora < 12){ document.write('<img src="imagem_terca_10_12.jpg">');}
            if(hora >= 12 && hora < 15){ document.write('<img src="imagem_terca_12_15.jpg">');}
        break
        case 3: //quarta
        break
        case 4: //quinta
        break
        case 5: //sexta
        break
        case 6: //sábado
        break   
    }
}
</script>```

Como eu alteraria esse código para ele aparecer as imagens somente no mês e datas especificadas?
Por ex. Janeiro aparece imagem1.png do dia 01/01/2021 ao dia 10/01/2021 e assim subsequente.

Quem puder me ajudar ficarei grato.

Answer 1

Good morning dear, I understand that your doubt is punctual so I will give a more objective answer, with some tips.

// -> Two bars means a comment in javascript code, I will use it to explain parts of the code

<script>
//exemplo de comentário, por isso aparece cinza

function pegaImagemBaseadoNaDataAtual() {
    var now = new Date();
    var mes = now.getMonth(); // esse método pega o mês de 0 (janeiro) a 11 (dezembro)
    var hora = now.getHours(); // pega a hora de 0 a 23
    //var data = now.getDate(); no seu código de exemplo essa variável não é usada
    var agora = now.getDay(); // pega o dia da semana de 0 (domingo) a 6 (sábado)
    //agora vai vir a magia, talvez possa ser complexo mas sem dúvida funcional
    var imagensComMesEDiaSemana =

        {
            0: //diz respeito a janeiro
            {
                0: // diz respeito a domingo
                {
                    10: '<img src="images/amapolacalcados.png">', // 10 da manhã de todos os domingos de janeiro
                    11: '<img src="images/amapolacalcados.png">' // 11 da manhã de todos os domingos de janeiro
                },
                2: // diz respeito a terça
                {
                    22: '<img src="images/amapolacalcados.png">', // 22 da noite de todas as terças de janeiro
                    23: '<img src="images/amapolacalcados.png">' // 23 da noite de todas as terças de janeiro
                }
            },
            11: //diz respeito a dezembro
            {
                6: // diz respeito a sábado
                {
                    10: '<img src="images/amapolacalcados.png">', // 10 da manhã de todos os sábados de dezembro
                    11: '<img src="images/amapolacalcados.png">' // 11 da manhã de todos os sábados de dezembro
                },
                3: // diz respeito a quarta
                {
                    18: '<img src="images/amapolacalcados.png">', // 18 da noite de todas as quarta de dezembro
                    19: '<img src="images/amapolacalcados.png">' // 19 da noite de todas as quarta de dezembro
                }
            }
        };
    if (undefined == imagensComMesEDiaSemana[mes] 
|| undefined == imagensComMesEDiaSemana[mes][agora]
|| undefined == imagensComMesEDiaSemana[mes][agora][hora]) {
        return '<img src="images/amapolacalcados.png">'; // imagem padrão caso não tenha imagem definida na variável "imagensComMesEDiaSemana" para aquela mes/diasemana/hora
    }
    return imagensComMesEDiaSemana[mes][agora][hora]; //se encontrou imagem retorna ela
}
</script>

To work on your site this should be at the top of the page and not where the image will appear, wherever the image appears:

<script>
document.write(pegaImagemBaseadoNaDataAtual())
</script>

to add new images for each hour, month and day of the week it is necessary to know this simple date scale, I repeat here:

var mes = now.getMonth(); // esse método pega o mês de 0 (janeiro) a 11 (dezembro)
var hora = now.getHours(); // pega a hora de 0 a 23
var agora = now.getDay(); // pega o dia da semana de 0 (domingo) a 6 (sábado)

Any doubt I’m available!

Now instead of using days of the week and time, consider only the day of the month

function pegaImagemBaseadoNaDataAtual() {
    var now = new Date();
    var mes = now.getMonth(); // esse método pega o mês de 0 (janeiro) a 11 (dezembro)
    var dia = now.getDate(); // pega o dia de hoje baseado na quantidades de dias que o mês possui

 var imagensComMesEDia =

        {
            0: //diz respeito a janeiro
            {
                1: // diz respeito ao dia 1 de janeiro
                '<img src="images/amapolacalcados.png">' //imagem de 1 de janeiro
                ,
                2: // diz respeito 2 de janeiro
                '<img src="images/amapolacalcados.png">' //imagem de 2 de janeiro
                
            },
            11: //diz respeito a dezembro
            {
                6: // diz respeito a 6 de dezembro
                '<img src="images/amapolacalcados.png">' //imagem de 6 de dezembro
                ,
                3: // diz respeito a 3 de dezembro
                '<img src="images/amapolacalcados.png">' //imagem de 3 de dezembro
                
            }
        };
        if (undefined == imagensComMesEDia[mes] 
|| undefined == imagensComMesEDia[mes][dia]) {
        return '<img src="images/amapolacalcados.png">'; // imagem padrão caso não tenha imagem definida na variável "imagensComMesEDia" para aquela mes/dia
    }
    return imagensComMesEDia[mes][dia]; //se encontrou imagem retorna ela
}