[Resolvido] Camada ou DIV Rotativos com Tempo de 24h

Edu Villaça · Dezembro 15, 2008

Bom, estou a montar uma page no Dreamwaver, e terei um locau especifico dentro da page

que forneceram dados de uns Djs, mais essas informações deveram ser trocadas diariamente as 12h00 (meio dia), de cada dia da semana, as informações são basicas, 1 foto + texto.

Bom, pensei que posso montar um DIV ou Camada com as informações e programar para serem trocadas essas divs a cada tempo pre definidos, como faço isso. sei que deve ter um script especificos.

então sera assim, a 1 div segunda entra e a 7 div domingo sai as 12h00 de cada dia, e assim por diante... entenderam?.

hantaro · Dezembro 15, 2008

Veja o exemplo:

function dj(){
// armazena os dados em um array
	var djs = ['dj-domingo','dj-segunda','dj-terca','dj-quarta','dj-quinta','dj-sexta','dj-sabado'];
// cria um objeto DATE e armazena em uma variavel
	var data = new Date();
// pega o dia atual, inicia do 0 (domingo) e termina no 6 (sabado)
	var dia = parseInt(data.getDay());
// se a hora for maior ou igual a 12 soma 1 a variavel dia, se nao fica o valor normal da variavel
	(data.getHours()>=12)?dia=dia+1:dia=dia;
// mostra os dados do DJ
	document.getElementById('id').innerHTML=djs[dia];
}

Se nao entender algo é so postar ai

Edu Villaça · Dezembro 15, 2008

Veja esse exemplo
function dj(){
	var djs = ['dj-domingo','dj-segunda','dj-terca','dj-quarta','dj-quinta','dj-sexta','dj-sabado'];
	var data = new Date();
	var dia = data.getDay();
	document.getElementById('id').innerHTML = djs[dia];
}
Explicando:

Armazena os dados que serao mostrados em um array, se usar iframe, armazena a url

Cria uma variavel com um novo objeto data

E entao captura o dia atual usando getDay()

A função getDay() retorna um numero de 0 a 6, sendo 0 domingo e 6 sabado

Se nao entender posta ai

cara sou totalmente leigo nissi ai..

me diz ai.. vou no dreamwaver e monto as DIV (aqui no meu DW esta em portugues - então as camada) ok.

configuro cada camada, colocando dentro delas com tabelas os textos e imegem. ok.

e ai agora nomeio cada camada dessa forma. ok - 'dj-domingo','dj-segunda'......

e ai vou no codigo e coloco o seu codigo. é isso aiii...

desde já grato pela ajuda.

Edu Villaça · Dezembro 15, 2008

ha sim e ele altera todos os dias as 12h00.. meio dia? ou tenho que implementar mais algo?

Edu Villaça · Dezembro 15, 2008

Ola Hantoro.. bom cara desde já grato pela ajuda.. mais como

falei sou totalmente leigo no assunto.. não sei para onde ir... somente tive a ideia...

bom se puder fazer esse codigo ai para mim.. acho que consigo funfionar..

estou com os DIvs e colocarei as informações em cada um deles.

cada dive deve ter as iniciais dos nosmes semanas.. tipo: seg, ter, quart, quint, ---, sab, dom.

e ai o que faço agora.. estou a fazer isso em um documento novo no DW, para ver se funciona blzc.

se puder dar essa ajuda ai agradeço, pois sei muito pouco de programação.

hantaro · Dezembro 15, 2008

Bom ja reparei que voce nao tem muito costume ai com o Dreamweaver no modo de codigo, já eu nao sei o modo Design, entao vo explicar mais ou menos.

Bom vai lá e cria ai as div e define os id igual voce fez, sempre com as tres primeiras letras.

beleza, coloca no modo de codigo e acha cada div que ficou criada, e entao vai na frente do id de cada uma e da um espaço e coloca esse codigo

style="display:none;"

O codigo acima indica que as <div> nao devem aparecer na pagina, vai no modo de Design que voce vai entender

No modo de Codigo, no começo da pagina tem assim

<title>Untitled Document</title>
</head>

entao o codigo abaixo voce colocara entre o </title> e o </head>, vo explicar o codigo javascript tambem, pra voce nao ficar usando um codigo sem entender o que ele faz, segue o codigo e abaixo a explicaçao

function dj(){
	var semana = ['dom','seg','ter','qua','qui','---','sab'];
	var data = new Date();
	var dia = data.getDay();
	if(data.getHours()>=12){
		dia=parseInt(dia)+1;
	}else{
		dia=dia;
	}
	document.getElementById(semana[dia]).style.display = 'block';
}

Na primeira linha iniciamos uma função, que nada mais é que um bloco de codigo que sera executado para mostrar a div referente ao dj que queremos.

Na segunda linha armazenamos o id das <div>, sendo que isso ai chama se array e cada nome ali é chamado de indice, esses indices podem ser acessado atraves de seu numero. por exemplo 'dom' é acessado pelo numero zero e 'seg' pelo numero um.

Na terceira linha capturamos a data atual, isso nao tem nada que explicar

Na quarta linha pegamos o dia em que estamos, porem o javascript nao diz assim: hoje é segunda, amanha e terça. ele se expressa em numero, da seguinte maneira, domingo equivale a 0, segunda a 1 e sabado a 6, ou seja aqui armazenamos o NUMERO do dia da semana

Na quinta linha entra o que voce especificou, que no caso de ser 12:01 de segunda, mostra o DJ de terça, o que essa linha faz?

Aqui é a parte mais importante, e é onde voce deve prestar mais atenção, para voce entender melhor, vamos traduzir esse codigo para o nosso portugues, ficaria assim

Se minha hora atual for maior ou igual que 12 (meio dia) soma 1 no valor, mostrando assim a div do dia seguinte

Agora voltemos a realidade do codigo

Na penultima linha repare o seguinte semana[dia], semana é aqueles valores que colocamos lá em cima na linha 2 e dia é o numero que esta vindo, lembra que o javascript mostra o dia atual em numero.

Na ultima linha fechamos a função. aqui acaba nosso codigo, agora basta apenas no seu codigo onde tem assim <body> voce deixar assim <body onload="dj();">

Edu Villaça · Dezembro 16, 2008

caro Rantaro.. puts cara sou leigo mesmo nesse negocio ai.. rsrrs...

olha o meu codigo que aparece para mim... fiz tudo o que solicitou.. e entendir tudinho o que você explicou tb...

mais tem algo dando errado.

------------------------------------------------------

<?xml version="1.0" encoding="iso-8859-1"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Documento sem título</title>

function dj(){

var semana = ['dom','seg','ter','qua','qui','---','sab'];

var data = new Date();

var dia = data.getDay();

if(data.getHours()>=12){

dia=parseInt(dia)+1;

}else{

dia=dia;

}

document.getElementById(semana[dia]).style.display = 'block';

}

<!--

function MM_reloadPage(init) { //reloads the window if Nav4 resized

if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {

document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}

else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();

}

MM_reloadPage(true);

//-->

</script>

</head>

</html>

O que ta dando errado, deve ser coisa besta...

O DW me informa em codigo que tem um ATRIBUTO duplicado.

eu fiz em um documento novo, para testar..

se puder me da uma ajuda ai.. grato mais uma vez.

hantaro · Dezembro 16, 2008

Uhh, tinha esquecido que o Dreamweaver já coloca o style na div, entao sua div está assim, os erros estao de negrito

Deixa elas assim

e tambem o programa já tinha criado um script no seu <head>, entao o codigo que te passei fica dentro do <script> existente, seu codigo final fica assim:

<!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>
<title>Documento sem título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
function dj(){
var semana = ['dom','seg','ter','qua','qui','---','sab'];
var data = new Date();
var dia = data.getDay();
if(data.getHours()>=12){
dia=parseInt(dia)+1;
}else{
dia=dia;
}
document.getElementById(semana[dia]).style.display = 'block';
}
//-->
</script>
</head>
<body onload="dj();">
<div id="seg" style="display:none;position:absolute; left:31px; top:22px; width:226px; height:204px; z-index:1; background-color: #666666; layer-background-color: #666666; border: 1px none #000000;"></div>

<div id="ter" style="display:none;position:absolute; left:171px; top:70px; width:180px; height:192px; z-index:2; background-color: #FF0000; layer-background-color: #FF0000; border: 1px none #000000;"></div>

<div id="qua" style="display:none;position:absolute; left:14px; top:102px; width:229px; height:186px; z-index:3; background-color: #00FF00; layer-background-color: #00FF00; border: 1px none #000000;"></div>

<div id="qui" style="display:none;position:absolute; left:33px; top:69px; width:192px; height:164px; z-index:4; background-color: #00FFFF; layer-background-color: #00FFFF; border: 1px none #000000;"></div>

<div id="---" style="display:none;position:absolute; left:108px; top:197px; width:225px; height:123px; z-index:5; background-color: #FF0099; layer-background-color: #FF0099; border: 1px none #000000;"></div>

<div id="sab" style="display:none;position:absolute; left:28px; top:80px; width:222px; height:179px; z-index:6; background-color: #FFCCCC; layer-background-color: #FFCCCC; border: 1px none #000000;"></div>

<div id="dom" style="display:none;position:absolute; left:100px; top:71px; width:223px; height:161px; z-index:7; background-color: #009900; layer-background-color: #009900; border: 1px none #000000;"></div>
</body>
</html>

Qualquer coisa ai vai postando.

Eu te recomendo ler uns tutoriais pra se familiarizar com os codigos e começar a mexer no dreamweaver tanto no design como no codigo

Edu Villaça · Dezembro 16, 2008

Hantaro, perfeito o codigo cara... fufou blzc.

agradeço desde já emmm.. vou fazer o que me orientou, você por acaso conhece algum curso para

script, o que você me recomenda.. ou somente pesquisas mesmo.

sobre a parte de designer, eu trabalho com designer em Illustrator, Photoshop e Indsigner.

então essa parte é bem facio para mim, estou a fazer aqui no Fireworks os designers.. e pegando alguns

cursos de DW na net... é bem legau, mais não falam muito de script, somente da parte designer.

Muito Obrigado.

hantaro · Dezembro 16, 2008

Eu recomendo mesmo é pesquisa, pra aprender por exemplo é so voce nao se prender a um tutorial só, vai estudando de acordo com a necessidade, porque na minha opiniao, é igual photoshop, so se aprende realmente a mexer mesmo, depois de muita pratica.

Boa sorte ai com os estudos, e precisando, estamos aqui pra ajudar.

Edu Villaça · Dezembro 17, 2008

Opa Hantaro, cara aconteceu um erro aqui na logica da programação.

Olha só o que esta acontecendo:

quando faz 12:01 de seg ou qualquer dia, ta entrando o Dj do outro dia - terça, o que esta arreda, pois deveria entra o DJ de seg... entendeu? meu DJ de seg entra das 12:01 de seg até 12h00 da terça, meu DJ da ter entra das 12:01 de terça até 12:00 da quarta.. e ai por diante.

ja tentei diminuir aqui -1 mais da errado... o que devo fazer?

ha sim tb textei aqui direito e parece que tem mais um erro, não sei bem. olha hoje dia 17 quarta, se coloco as 00:00 ele me da o dj do dia quarta e se coloco as 12:00 ele me da o DJ do dia seguinte, ta meio estranho. pois ele deveria levar das 12h as 12h do outro dia sem alteração. o que deve ser?

Grato mais uma vez pela habitual gentileza..

hantaro · Dezembro 17, 2008

a entendi errado, eu programei achando que era o contrario, para resolver isso basta mudar a linha

if(data.getHours()>=12){
dia=parseInt(dia)+1;

para

if(data.getHours()<12){
dia=parseInt(dia)-1;

onde diz que se a hora for menor que 12 (meio-dia) ele subtrai um, ou seja, mesmo que terça exibe o de segunda

Agora sim o dj de segunda será exibido de 12:00 de domingo ate as 11:59 de segunda e assim por diante

Edu Villaça · Dezembro 17, 2008

Hantaro testei aqui com sua utima alteração e fufou legau... exelente..

me explica ai o porque que não tem mais o >=12... o erra tava ai. foi isso.

pois eu já tinha mudado para -1 dia mais com a programação antiga e ele me retornava um dia a menos.

grato desde já.. vou agora abri outro topico que eu acho que a programação é quase a mesma.

Grato meu velho.

hantaro · Dezembro 17, 2008

Eu troquei o >= por <, antes se fosse MAIOR ou igual a doze ele pularia para o dia seguinte, agora se for MENOR, ele exibe o do dia anterior

Arquivado

[Resolvido] Camada ou DIV Rotativos com Tempo de 24h

Recommended Posts

Edu Villaça 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

hantaro 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Edu Villaça 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Edu Villaça 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Edu Villaça 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

hantaro 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Edu Villaça 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

hantaro 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Edu Villaça 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

hantaro 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Edu Villaça 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

hantaro 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Edu Villaça 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

hantaro 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Javascript - Calcular Valores Monetário em Tempo Real

JavaScript - Exibir logo dentro da Tabela html

PHP+Codeigniter - Implementar o Input CÓDIGO ou ID do Produto

Fóruns

Tempo Real

Informação importante