Clock that changes color

Question

Clock that changes color

Asked 4 years, 6 months ago

Viewed 44 times

-2

i have the following code in Javascript

    function carregar() {
var msg = document.getElementById('msg')
var img = document.getElementById('imagem')
var data = new Date()
var hora = data.getHours()
var min = data.getMinutes()
var seg = data.getSeconds()
setTimeout('carregar()', 500)
msg.innerHTML = `Agora são ${hora}:${min}:${seg}.`
if (hora >= 0 && hora < 12) {
    //BOM DIA!
    img.src = 'amanhecer-redonda.png'
    document.body.style.background = '#FAF1FA'
} else if (hora >= 12 && hora < 18) {
    //BOA TARDE!
    img.src = 'entardecer-redonda.png'
    document.body.style.background = '#EFC529'
} else {
    //BOA NOITE!
    img.src = 'anoitecer-redonda.png'
     document.body.style.background = '#4428FF'
}}

However, I would like to convert it to Jquery, as a way of studies. I am since yesterday trying, I got here. They could give me a light?

$(function carregar () {
var msg = $('#msg')
var img = $('#imagem')
var data = new Date()
var hora = data.getHours()
var min = data.getMinutes()
var seg = data.getSeconds()
setTimeout('carregar ()', 500).html(`Agora são ${hora}:${min}:${seg}.`)
    if (hora >= 0 && hora < 12) {
        //BOM DIA!
        img.src = 'amanhecer-redonda.png'
        document.body.style.background = '#FAF1FA'
    } else if (hora >= 12 && hora < 18) {
        //BOA TARDE!
        img.src = 'entardecer-redonda.png'
        document.body.style.background = '#EFC529'
    } else {
        //BOA NOITE!
        img.src = 'anoitecer-redonda.png'
        document.body.style.background = '#4428FF'
    }

    }}

1

$(function carregar () { don’t need it, keep using function carregar () {. Put the points where there’s doubt, just put the code in the question is something like "look there and solve for me", you know? Comment on what you doubt, what you are not managing to change there yes we can help

– Ricardo Pontual

2020/05/19 at 11:31
Not directly related, but getHours returns a number between 0 and 23, then you don’t need to test if it’s greater than zero. It might just be if (hora < 12) { manhã } else if (hora < 18) { tarde } else { noite } - In the else if also do not need to test if it is bigger than 12, because if it was not, would have entered in the first if (if it arrived in this else is because it is definitely >= 12, so you only need to test if it is < 18).

– hkotsubo

2020/05/19 at 12:24
@hkotsubo I didn’t know that. Thank you so much for the teaching, it helps to make the code cleaner @Ricardopunctual the $ is because of that 
$(document ).ready() 
 this can be summarized with only one $.

– Pablo Stefanes

2020/05/19 at 17:10

1 answer

Browser other questions tagged javascript jquery

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

by GeekSilva • **736** points · Answer 1 · 2020-05-19T12:06:59+00:00

It would be something like

function carregar() {
    var $msg = $('#msg');
    var $img = $('#imagem');
    var data = new Date();
    var hora = data.getHours();
    var min = data.getMinutes();
    var seg = data.getSeconds();
    setTimeout('carregar()', 500)
    $msg.html(`Agora são ${hora}:${min}:${seg}.`);
    if (hora >= 0 && hora < 12) {
        //BOM DIA!
        $img.attr('src', 'amanhecer-redonda.png');
        $('body').css({background: '#FAF1FA'});
    } else if (hora >= 12 && hora < 18) {
        //BOA TARDE!
        $img.attr('src', 'entardecer-redonda.png');
        $('body').css({background: '#EFC529'});
    } else {
        //BOA NOITE!
        $img.attr('src', 'anoitecer-redonda.png');
        $('body').css({background: '#4428FF'});

    }
}

First we change the way to recover the elements using $(). So where had document.getElementById('msg') was placed $('#msg') which is how to retrieve elements in Jquery. The same goes for the element image.

After that it replaces innerHTML by the method .html() and also the way to change the attributes with attr() and the style of the body with css().

Note that in the variables in which we recovered the elements was placed the dollar sign. There’s nothing special about it but it tells us that that variable is a selected element.

Some improvements

Finally, it is possible to improve this code by making use of setInterval() instead of setTimeout() recursively.

The element body can also be created at the beginning of the function along with others. The idea is the same, just be aware that in this case there will be no fence, it would be something like:

var $body = $('body');

Then when it was time to change the background color just do

$body.css({background: '#FAF1FA'});