Classificação
0 %
Popularidade
Opine
Descrição:
Vamos fazer alguns exercícios de JavaScript? Chegou a hora de provar a si mesmo que todo o seu esforço está valendo a pena…
Caso queira colocar hora e minutos
var data = new Date()
var hora = data.getHours()
var minutos = data.getMinutes()
Eu passei horas tentando encontrar o erro do meu código até que li um comentário e resolvi o meu problema.
Eu estava digitando "img.scr" invés de "img.src"
É primeiro o "R" e depois o "C"
so precisar tomar cuidado com for ecrever src e n trocar por scr se trocar as imgens nao vao aprecer certas
Gente, quando não utilizei o "onload" no body a função para alterar a imagem não funcionava, mesmo quando chamava ela, sabem me explicar por quê? Obrigado!
Faaala Guanabara, segui os exercicios e fiz algumas melhorias para ele Dizer Bom dia, boa tarde e boa noite em seus respectivos Horarios eu fiz isso adicionando a linha de codigo document.querySelector('div#foto').innerHTML += 'Bom Dia!' / 'Boa Tarde!' / 'Boa Noite!', mas não só isso! como a texto fica do lado da foto por conta da estilização eu usei flexbox na div com seu id correspondente pra estilizar, então o css ficou assim
#foto{
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
gap: 10px;
}
#msg {
text-align: center;
padding: 5px 0 5px 0;
}
Para quem ta tendo problemas, não faça igual o professor no if e else if. Coloque assim que dará certo
if (hora >= 0 && hora < 12), fiquei trezentos anos quebrando a cabeça até tentar isso.
comecei de manhã , parei para assistir o jogo do Brasil ! finalizei , resultado ficou top d mais .
Eu fiquei literalmente 1 hora e meia tentando achar o erro do meu código porque não estava trocando as imagens quando se mudava as horas, procurei aqui nos comentários, testei tudo e nada funcionada, quando fui ver eu tinha escrito desde o inici errado a parte do img.src, eu estava escrevendo img.scr, e claro, que não estava indo, por isso pessoal, presta atenção, confere pra ver se tu digitou certo o código, pra não ficar que nem eu, mais de 1 hora tentando ver o que tava errado e na realidade era "só" um erro de 1 inversão de letra
4:28 Boa tarde, não seria mais fácil aplicar um border-radius: 50% na imagem ao invés de ter todo esse trabalho ?
Ah que triste :(, tô programando pelo celular, não tenho Pc, a imagem. Não abre no celular. Estou usando o app Replit 🙁
Não consigo centralizar a imagem! Quando centralizo a <div> só centraliza a hora
Quem nao tem Photoshop experimenta o Gimp, tem quase as mesmas funções e é grátis.
Caso vocês queiram substituir a cor de fundo por uma imagem. vocês podem usar o document.body.style.backgroundImage = "url('nome-da-imagem.jpg')";
e podem trabalhar ela nas css com body { background-size: xx; background-position: xx; background-size: xx; background-repeat: xx: }
Vão testando e vejam se gostam
show! Só tenho que melhorar tamanho da imagem!!!
Galera, não consigo mudar a imagem.
function carregar(){
var msg = window.document.getElementById('msg')
var img = window.document.getElementById('imagem')
var data = new Date()
var minuto = data.getMinutes()
var segundos = data.getSeconds()
var hora = data.getHours()
msg.innerHTML = `Agora são ${hora}:${minuto}:${segundos} horas`
if(hora >= 0 && hora < 12){
// Bom dia
img.src = 'manhã.png'
} else if(hora >= 12 && hora < 18){
// Boa tarde
img.src = 'tarde.png'
}else{
// Boa noite
img.src = 'noite.png'
}
}
se alguem quiser testar ai meu codigo ta a disposição
Eae pessoal, nao usei nenhum editor de imagem, fiz tudo por codigo. Meu script ficou assim:
function carregar () {
var msg = window.document.getElementById('msg')
var img = window.document.getElementById('imagem')
var data = new Date()
//var hora = data.getHours()
var minuto = data.getMinutes()
var hora = 14
msg.innerHTML = `Agora são ${hora}:${minuto} horas..`
if (hora >= 0 && hora < 12) {
// BOM DIA!
img.src = 'manha.png.jpg'
document.body.style.background = '#feebce'
} else if (hora >= 12 && hora < 18) {
// BOA TARDE!
img.src = 'tarde.png.jpg'
document.body.style.background = '#915528e0'
} else {
// BOA NOITE!
img.src = 'noite.png.jpg'
document.body.style.background = '#12172d'
}
}
quem quiser saber como deixar a imagem redonde pequena sem photoshop é só descer os coments ou pedir nesse aqui.
Alguém me ajuda ?, na hora de declarar a variável IMG, dá erro e diz que a variável foi declarada mas não funciona
Edit: deu certo, eu tive que refazer a aula
Alguem sabe como eu faço para usar varias imagens? em cada dia usar uma imagem para tarde diferente
Para quem não esta conseguindo fazer a troca das IMG, eu apenas retirei o endereço da imagem no <img> do html deixando o src sem nada. Toda alteração das img foram no JS.
ACHEI O ERRO DO ELSE IF. Era o comando img.innerHTML = img.src =" caminho da imagem.png". Segue o code abaixo.
Pow faço tudo certinho e não consigo fazer a hora aparecer no lugar do "aqui vai aparecer a hora" triste
👏👏👏👏👏👏👏👏👏👏👏👏
Pow na hora de chamar o var img tá dando um tipo de sublinhado e não tá dando certo pra aparecer a hora na Tela.
Pessoal já tentei de tudo mas não consigo mudar as imagens, alguém pode me dar um help ???
function carregar(){
const msg = window.document.getElementById('msg')
let img = window.document.getElementById('imagem')
const data = new Date()
//var hora data = new Date()
const hora = 11
msg.innerHTML = ` Agora são ${hora} horas.`
if (hora >= 0 && hora < 12) {
img.src='manha.png'
body.style.background=' #0000CD'
}else if (hora >= 12 && hora < 18) {
img.src='tarde.png'
body.style.background=' #DAA520'
}else{
img.src='noite.png'
body.style.background='#1C1C1C'
}
}
Se alguém estiver com dificuldade em centralizar o titulo ai vai uma dica, altera no código HTML a palavra HEAD por HEADER que vai centralizar normalmente. O professor Guanabara usou HEAD no HTML e HEADER no JAVA SCRIPT por isso não estava funcionando.
Alguém aqui com problemas para alterar a cor de fundo no JS? Não sei por que, mas tudo funciona perfeitamente, somente a cor de fundo que não muda…
Ps: acabei de resolver o problema! Por alguma razão o Background não estava funcionando, então ao invés de eu utilizar o Background comum, usei o backgroundColor! Só queria entender o por quê de não funcionar o outro…
Eu sofri pra fazer Isso, passei dias Tentando e sempre Dava alguma coisa errada, Porem não desitam, Simplesmente Corram atraz do erro porque pode ser minimo, mais isso ja faz com que o código pare de Funcionar
Como eu fiz, botei nos comentários desse comentário…
Minhas imagens não mudavam de acordo com o horário. Depois de muito tempo tentando descobrir, comecei a fazer o código todo de novo acompanhando o vídeo, para descobrir que tinha feito todo o 'if' fora da 'function'. 🤦
Nós, iniciantes, que começamos tudo completamente do zero, vamos passar muita raiva com erros pequenos….kkkk…paciência e persistência…
Alguém pode me ajudar?
Meu código não está rodando
Ao inspecionar aparece erro no "$" do JS e no "onload" do html
A linha do placeholder percebi que o $ não mudou de cor e continua laranja.
msg.innerHTML = ' agora são ${hora}: horas.'
A outra:
<Body onload = "carregar ()">
muito obrigado por tudo professor e equipe!
Para os que não estão conseguindo fazer a imagem aparecer, é simples
Crie uma pasta que vai está contendo as imagens dentro da pasta da aula(não meu caso é "Aula012")
É muito simples mesmo, perdi muito tempo nisso 👌🏼
Pra quem não tem photoshop, pode usar o krita, só q nele funciona um pouco diferente.
Para o pessoal que está tendo erro no img.src
certifique-se se escreveu scr ao invés de src
conseguir fazer o código todo sozinho é bem satisfatório. NÃO DESISTAM!
Faz a edição no canvas é gratuito, só coloca as medidas que o professor está falando no video no caso 250px por 250px que dá certo
Pra pegar as cores tem o colopicker muito bom
bro where chalk up u been, it is so cool
o meu não estava funcionando então chamei a função fora dela com carregar(). Ai funcionou!
se tudo ia ficar no meio text-align poderia ser colocando uma única vez no body
eu coloquei tudo certinho, mas a hora nao aparece..por que sera?
Dentro do HTML, o meu: onload="carregar" deu is not defined. (Fica no body)
Isso significa que devo criar uma function no JS para dar função a esse sujeito ou nada haver?
kkk
Thanks from 2022!
Quando eu coloco msg.innerHTML = ‘agora são $(hora) horas’ ele não funciona, diz q o $ está errado
Para quem não tem photoshop ou nao sabe usar, da pra fazer as imagens tratando elas como background no css
CSS
div#img {
display: block;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height:300px;
width: 300px;
border-radius: 50%;
margin: auto;
margin-top: 15px;
box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.322);
}
JS
img.style.backgroundImage="url('ENDEREÇO DA IMAGEM ')"
MEU JS PARA ESSE EXERCICIO
var body = document.getElementsByTagName('body')[0];
var img = document.getElementById('img')
function horas(){
var date = new Date()
var hr = date.getHours()
var min = date.getMinutes()
var seg = date.getSeconds()
if (hr<10){
hr="0"+hr
}
if (min<10){
min="0"+min
}
if (seg<10){
seg="0"+seg
}
var horas = hr+':'+min+':'+seg
data.innerHTML=`<h2> Agora são exatamente ${horas} </h2>`
if(hr >= 0 && hr < 12){
img.style.backgroundImage="url('image/pexels-torsten-kellermann-955656.jpg')"
msg.innerHTML= `<h2>Tenha um bom dia</h2>`
} else if(hr >= 12 && hr < 18){
body.style.backgroundColor = '#D39444'
img.style.backgroundImage = "url('image/pexels-george-desipris-858241.jpg')"
msg.innerHTML = "<h2>Tenha uma boa tarde</h2>"
} else {
body.style.backgroundColor = '#0E2132'
img.style.backgroundImage = "url('image/pexels-hristo-fidanov-1252869.jpg')"
msg.innerHTML = "<h2>Tenha uma boa noite</h2>"}
}
var tempo = setInterval(horas,1000)