Ir para conteúdo
Fórum Script Brasil
  • 0

Input Com Data E Select

Guest henrick21

Perguntado por Guest henrick21,

 Share

Pergunta

Guest henrick21

Guest henrick21

Postado
Postado

Preciso de um script bem simples que faça o seguinte:

quando o cliente entrar na pagina, as 8h da manha.

Um campo Select mostrará BOM DIA, selecionado.

quando o cliente entrar na pagina, as 13h da tarde.

Um campo Select mostrará BOA TARDE, selecionado.

quando o cliente entrar na pagina, as 23h da noite.

Um campo Select mostrará BOA NOITE, selecionado.

Tipo assim:

<input type=text name=hora value="8">

<select name=comprimento>

<option></option>

<option value='1'>bom dia</option>

<option value='2'>boa tarde</option>

<option value='3'>boa noite</option>

</select>

alguém pode me dizer, como ficaria o script?

Link para o comentário
Compartilhar em outros sites

7 respostass a esta questão

Posts Recomendados

  • 0
jose.rob.jr

jose.rob.jr

Postado
Postado

Preciso de um script bem simples que faça o seguinte:

quando o cliente entrar na pagina, as 8h da manha.

Um campo Select mostrará BOM DIA, selecionado.

quando o cliente entrar na pagina, as 13h da tarde.

Um campo Select mostrará BOA TARDE, selecionado.

quando o cliente entrar na pagina, as 23h da noite.

Um campo Select mostrará BOA NOITE, selecionado.

Tipo assim:

<input type=text name=hora value="8">

<select name=comprimento>

<option></option>

<option value='1'>bom dia</option>

<option value='2'>boa tarde</option>

<option value='3'>boa noite</option>

</select>

alguém pode me dizer, como ficaria o script?

Você pode fazer assim:

<form name="exemplo">

<input type="text" name="hora" value="8">

<select name="cumprimento">

<optgroup label="Cumprimento">

<option value='1'>Bom dia</option>

<option value='2'>Boa tarde</option>

<option value='3'>Boa noite</option>

</optgroup>

</select>

</form>

<script type="text/javascript">

<!--

var data,hora; //Gera as variáveis

data=new Date(); //Cria um objeto Data()

hora=data.getHours(); //Pega as horas

if(hora>=8 && hora<13){

document.exemplo.cumprimento[0].selected=true;

}

else if(hora>=13 && hora<23){

document.exemplo.cumprimento[1].selected=true;

}

else{

document.exemplo.cumprimento[2].selected=true;

}

function gera_hora(){

data=new Date();

document.exemplo.hora.value=data.getDate()+"/"+(data.getMonth()+1)+"/"+data.getYear()+" "+data.getHours()+":"+data.getMinutes()+":"+data.getSeconds();

setTimeout("gera_hora()",1000);

}

gera_hora();

//-->

</script>

Link para o comentário
Compartilhar em outros sites
  • 0
Guest henrick21

Guest henrick21

Postado
Postado

Valeu Jr. era exatamente o que eu precisava, obrigado.

Só me responde uma coisa:

Não conhece esse codigo, pra que serve, posso excluir?

<optgroup label="Cumprimento">

Desde já, grato!

Link para o comentário
Compartilhar em outros sites
  • 0
Guest Visitante

Guest Visitante

Postado
Postado

Voce colocou:

Para mostrar boa noite:

document.exemplo.cumprimento[2].selected=true;

Tem como buscar pelo VALUE que esta no Select, algo tipo:

Para mostrar boa noite: buscar o ID 3

document.exemplo.cumprimento[getElementByID('3')].selected=true;

????

Link para o comentário
Compartilhar em outros sites
  • 0
henrick21

henrick21

Postado
Postado
<body onload="exemplo.cod.focus()">

<form name="exemplo" action='2.htm' method=post>

<pre>

Codigo: <input style="width:145px" type="text" name="cod" value="" onchange="completa(this.value)">

Cliente: <select style="width:145px" name="cumprimento">

<option selected value='00'>&nbsp;</option>

<option value='10'>And10</option>

<option value='15'>And15</option>

<option value='16'>And16</option>

<option value='18'>And18</option>

<option value='20'>And20</option>

<option value='25'>Henr25</option>

<option value='30'>Henr30</option>

<option value='35'>Henr35</option>

<option value='40'>Henr40</option>

<option value='45'>Henr45</option>

<option value='50'>Henr50</option>

<option value='55'>Henr55</option>

</select>

<?pre>

</form>

<script type="text/javascript">

function completa(pula){

var xxxxx=document.exemplo.cumprimento;

var tam=xxxxx.length;

var i;

for(i=0;i<tam;i++){

var novo=exemplo.cumprimento.value;

if(novo==pula){

document.exemplo.cumprimento[novo].selected=true;

}

}

}

</script>

Link para o comentário
Compartilhar em outros sites
  • 0
jose.rob.jr

jose.rob.jr

Postado
Postado

ter tem, mas não é com uma função do browser. Se tiver muitos valores para testar pode deixar a página pesada. Eu percebi que você usa o select "clientes" como um tipo de banco de dados para o javascript. Então botei uns efeitos no exemplo, e um e como fazer uma busca nele. :)

<head>
<script type="text/javascript">
<!--
function completa(origem, limpar){                    //Adicionei o "limpar" pra não lotar o "onclick" do campo
    var campo, i, ok, valor;                          //Variaveis
    
    valor=origem.value;                               //Deinindo...
    campo=document.exemplo.cumprimento;                  //...Atalhos :)
    
    if(!limpar){                                      //Se não tiver chamando a função pra limpar então...
        for(i = 0; i < campo.length - 1; i++){        //Vai repetir enquanto "i" for menor que o nº de dados, incrementando o "i" com 1
            if(campo[i].value == valor){              //Se o valor do campo 0 (por exemplo) for igual ao vaor, então encontrou não? :)
                origem.value=campo[i].innerHTML;      //O valor do campo que chamou vai ser o que o usuario veria no select se aquela opção estivesse selecionada
                origem.style.fontStyle="normal";      //Efeito, deixando o texto normal
                origem.style.color="black";           //Efeito, deixando o texto com a cor preta 
                i=campo.length;                       //Fazendo o "i" ser maior que o número de dados para não repetir a pesquisa sabendo que não vai achar mais nada :)
                ok=true;                              //Definindo "ok" como verdadeiro para saber se achou ou não
            }                                         
        }
        if(!ok){                                      //Se "ok" for falso, então não encontrou
            origem.style.fontStyle="italic";          //Efeito, o texto vai ficar itálico para não confundir
            origem.style.color="#888888";             //Efeito, o texto vai ficar cinza para não confundir
            origem.value="Não encontrado";            //O valor do campo que chamou a função vai ser "Não encontrado"
        }
    }
    else{                                             //Se "limpar" for verdadeiro, então, a função veio pra limpar o campo que chamou :)
        origem.value="";                              //O campo fica sem valor
        origem.style.color="black";                   //Limpa o efeito e deixa o padrão
        origem.style.fontStyle="normal";              //Idem
    }
}
//-->
</script>
</head>
<body onload="exemplo.cod.focus()">
<form name="exemplo" action='2.htm' method=post>
<pre><!-- Se clicar no campo abaixo vai limpa-lo -->
Codigo: <input style="width:145px" type="text" name="cod" value="" onclick="completa(this,true);" onchange="completa(this);">
<!-- Coloquei numa "span" para marca-lo e para ocultar com CSS. --><span style="display: none;" id="clientes">Cliente: <select style="width:145px" name="cumprimento">
<option selected value='00'>&nbsp;</option>
<option value='10'>And10</option>
<option value='15'>And15</option>
<option value='16'>And16</option>
<option value='18'>And18</option>
<option value='20'>And20</option>
<option value='25'>Henr25</option>
<option value='30'>Henr30</option>
<option value='35'>Henr35</option>
<option value='40'>Henr40</option>
<option value='45'>Henr45</option>
<option value='50'>Henr50</option>
<option value='55'>Henr55</option>
</select></span>
<!-- Coloquei esta span para marcar esta parte da página --><span id="mostrar"></span>
<script type="text/javascript">
<!-- Efeitos
var mostrar_var="<i style=\"color: blue; text-decoration: underline; cursor: hand;\">Clique aqui para exibir os nossos clientes.</i>";  //Define o que vai aparecer quando o select estiver oculto
var ocultar_var="<i style=\"color: blue; text-decoration: underline; cursor: hand;\">Clique aqui para ocultar os nossos clientes.</i>"; //Mesmo que o de cima, mas quando estiver sendo exibido
var mostrar_inf=false;                                                                                                                  //Variavel que vai "dizer" qual das duas variaveis acima vai aparecer
mostrar.onclick=new Function("if(mostrar_inf){mostrar.innerHTML='"+mostrar_var+"'; mostrar_inf=false; clientes.style.display='none';}else{mostrar.innerHTML='"+ocultar_var+"'; mostrar_inf=true; clientes.style.display='inline';}"); //Quando clicar no spam "mostrar" vai exibir uma das duas primeiras variaveis, baseando-se na terceira.
mostrar.innerHTML=mostrar_var; //Define o valor inicial
//Fim dos efeitos-->
</script>
</pre>
</form>
</body>
================== A tag <optgroup> agrupa todas as <options> dentro dela. Apenas para visual (um exemplo é aquela barra no final do forum com um select para mudar o skin, não clica nela que está com um bug, se mudar, um monte de coisa para de funcionar, não altera nada e não consegue voltar sem fazer uma coisa) ================== Eu usei no exemplo
document.exemplo.cumprimento[2].selected=true;
Pois, em um select, cada option é uma array do select. Asssim: 
<form name="exemplo">
<select name="select">
   <option>Esse é o array 0</option>
   <option>Esse é o array 1</option>
   <option>Esse é o array 2</option>
</select>
</form>
<script type="text/javascript">
<!--
alert(document.exemplo.select[0].innerHTML);
//-->
</script>

;)

Link para o comentário
Compartilhar em outros sites
  • 0
jose.rob.jr

jose.rob.jr

Postado
Postado

Não leva a mal JR, mas não aprendi nada ate hoje sobre 'innerHTML'.

Pode me dar outros exemplos, sobre ele?

alert(document.exemplo.select[0].innerHTML);

O innerHTML lê ou altera o código da página entre a tag.

Assim:

<a id="id1"><b>Valor 1</b></a>

<script type=

"text/javascript">

<!--

alert(document.getElementById("id1").innerHTML); //Aqui ele vai alertar tudo o que está dentro da tag com o id "id1"

document.getElementById("id1").innerHTML="<b><i>Valor 2</i></b>"; //Agora está mudando tudo o que está na tag com o id "id1"

alert(document.getElementById("id1").innerHTML);

-->

</script>

Entendeu?

;)

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,2k
    • Posts
      651,9k
×
×
  • Criar Novo...