Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Daniel Mineo

Cronometro de Atendimento

Por , em Javascript

Recommended Posts

Daniel Mineo    0

Daniel Mineo
Postado

boa noite, gostaria se possível de um auxilio, estou querendo implementar um cronometro de atendimento básico para os atendentes da empresa, gostaria de um cronometro que muda de cor conforme o tempo for passando.... por exemplo, inicia a contagem em preto, após 10 min. fica em amarelo e após 15 min do inicio da contagem fica vermelho, não sou programador, mas achei consegui iniciar o plano, será que podem auxiliar a incrementar? segue abaixo o código:

 

<html>
<head>
<title>Cronometro</title>
<script language=JavaScript>
<!-- begin
var sHors = "0"+0;
var sMins = "0"+0;
var sSecs = 1;
function getSecs(){
sSecs++;
if(sSecs==60){sSecs=0;sMins++;
if(sMins<=9)sMins="0"+sMins;
}
if(sMins==60){sMins="0"+0;sHors++;
if(sHors<=9)sHors="0"+sHors;
}
if(sSecs<=9)sSecs="0"+sSecs;
clock1.innerHTML=sHors+"<font color=#000000>:</font>"+sMins+"<font color=#000000>:</font>"+sSecs;
setTimeout('getSecs()',1000);
}
//-->
</SCRIPT>
</head>
<body>
<h2 align="center"> <font color="#065ca5" face="tahoma">Tempo de Atendimento</font></h2>
<div align="center"> <FONT SIZE="5" COLOR="#065ca5" face="arial"> </font> <font color="#FF0000" size="7">
<font color="#FF0000" size="5" face="Arial Black"><span id="clock1"></span><script>setTimeout('getSecs()',1000);</script></font><br>
<br>
<br></FONT></div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcos_imasters    288

Marcos_imasters
Postado

fiz assim não testei.

 

JS:

$(document).ready(function(){var n={hora:0,minuto:0,segundo:0},t=null;$("#btn-iniciar").click(function(){"iniciar"==$(this).text()?($(this).text("Parar"),t=setInterval(function(){n.segundo++,n.segundo>=60&&(n.segundo=0,n.minuto++),n.minuto>=60&&(n.minuto=0,n.hora++),n.minuto>=10&&$(".container").css("background","green"),n.minuto>=15&&$(".container").css("background","red"),$("#horas").text(n.hora<10?"0"+n.hora:n.hora),$("#minutos").text(n.minuto<10?"0"+n.minuto:n.minuto),$("#segundos").text(n.segundo<10?"0"+n.segundo:n.segundo)},1e3)):($(this).text("Iniciar"),clearInterval(t))})});

HTML

<div id="tempo"><div class="container"><div id="horas">00</div><div class="divider">:</div><div id="minutos">00</div><div class="divider">:</div><div id="segundos">00</div></div><button id="btn-iniciar">iniciar</button></div>

CSS

#tempo{margin:30px auto 0;width:400px}#tempo .container{display:table;background:#777;color:#eee;font-weight:700;width:100%;text-align:center;text-shadow:1px 1px 4px #999}#tempo .container div{display:table-cell;font-size:60px;padding:10px;width:20px}#tempo .container .divider{width:10px;color:#ddd}#btn-iniciar{box-sizing:border-box;background:#eee;border:none;margin:0 auto;padding:20px;width:100%;font-size:30px;color:#777;cursor:pointer}#btn-iniciar:hover{background:#fff}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Daniel Mineo    0

Daniel Mineo
Postado

 

Obrigado por responder, mas cara.... essa parte de script não é minha praia, a muito custo consegui o código que passei, só não entendi onde realizar as modificações, como disse, programação não é meu forte, pode me orientar? desde já agradeço

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcos_imasters    288

Marcos_imasters
Postado

o codigo que te mandei ja esta funcionando já quer coloca no que você já tem simples so fiz uma verificacao dos minutos

 

no seu ficaria assim

 

var sHors = "0"+0;
var sMins = "0"+0;
var sSecs = 1;
function getSecs(){
sSecs++;
if(sSecs==60){sSecs=0;sMins++;
if(sMins<=9)sMins="0"+sMins;
}
if(sMins==60){sMins="0"+0;sHors++;
if(sHors<=9)sHors="0"+sHors;
}
if(sMins>10){
$("#clock1").css("color","green")
}
if(sMins>15){
$("#clock1").css("color","red")
}
if(sSecs<=9)sSecs="0"+sSecs;
clock1.innerHTML=sHors+"<font color=#000000>:</font>"+sMins+"<font color=#000000>:</font>"+sSecs;
setTimeout('getSecs()',1000);
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Daniel Mineo    0

Daniel Mineo
Postado

 

o codigo que te mandei ja esta funcionando já quer coloca no que você já tem simples so fiz uma verificacao dos minutos

 

no seu ficaria assim

 

var sHors = "0"+0;
var sMins = "0"+0;
var sSecs = 1;
function getSecs(){
sSecs++;
if(sSecs==60){sSecs=0;sMins++;
if(sMins<=9)sMins="0"+sMins;
}
if(sMins==60){sMins="0"+0;sHors++;
if(sHors<=9)sHors="0"+sHors;
}
if(sMins>10){
$("#clock1").css("color","green")
}
if(sMins>15){
$("#clock1").css("color","red")
}
if(sSecs<=9)sSecs="0"+sSecs;
clock1.innerHTML=sHors+"<font color=#000000>:</font>"+sMins+"<font color=#000000>:</font>"+sSecs;
setTimeout('getSecs()',1000);
}

 

Cara, não me xinga hein.... kkkkkkkk

aqui não rodou.... inseri o que vc sugeriu.... mas nada.... fiz outra implementação, que é o botão para iniciar e outro para resetar, mas sem função (sei fazer isso não) mas do botões é o de menos, só queria a mudança das cores automatizada, iniciando em verde, passando ao amarelo, e ficando em vermelho, segue como esta...

 

<html>
<head>
<title>
Cronometro
</title>
<script language=JavaScript>
var sHors = "0"+0;
var sMins = "0"+0;
var sSecs = 1;
function getSecs(){
sSecs++;
if(sSecs==60){sSecs=0;sMins++;
if(sMins<=9)sMins="0"+sMins;
}
if(sMins==60){sMins="0"+0;sHors++;
if(sHors<=9)sHors="0"+sHors;
}
if(sMins>10){
$("#clock1").css("color","yellow")
}
if(sMins>15){
$("#clock1").css("color","red")
}
if(sSecs<=9)sSecs="0"+sSecs;
clock1.innerHTML=sHors+":"+sMins+":"+sSecs;
setTimeout('getSecs()',1000);
}
<!-- verde font color="#01DF01" vermelho font color"#DF0101 amarelo #FFFF00>
</SCRIPT>
</head>
<body>
<h2 align="center"> <font size="6" font color="#065ca5" face="tahoma">TEMPO DE ATENDIMENTO</font></h2>
<hr noshade size="2">
<p align="center">
<font size="6" face="Arial Black"><span id="clock1"></span>
<script>setTimeout('getSecs()',1000);
</script>
</font>
<br>
<button> Iniciar</button>
<button> Zerar</button>
<br>
<font size="2" face="Arial Black"> Legenda de Cores </fonte>
<br>
<table border=0>
<tr>
<td width=60 bgcolor=#01df01 align="center"> Normal</td>
<td width=60 bgcolor=#ffff00 align="center">Atenção</td>
<td width=60 bgcolor=#df0101 align=="center">Estourado</td>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito