Cronometro / contador regressivo em HTML e CSS

Cronometro / contador regressivo

Começa a pisca trocar de cor quando faltar 10min
Copia e cola o codigo html no Bloco de Notas e salva da seguinte forma:

nomedoarquivo.html

Copiar e cola o Código CSS los hum Documento Fazer Bloco de Notas e salva da seguinte forma:

estilo.css

Os Dois TEM Que Estar Salvo na MESMA pasta

Parte HTML

<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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="estilo.css" type="text/css" rel="stylesheet" />
<title> Documento sem título </ title>
<script>
SEGUNDOS var = ;/ 70/1800; / / Inicio fazer cronometro
função formatatempo (segs) {

min = 0;
hr = 0;
/ *
se hr <10 então hr = "0" & hr
se min <10 min, em seguida = "0" & min
se segs <10 então segs = "0" e segs
* /
while (segs> = 60) {
if (segs> = 60) {
segs = segs-60;
min = min +1;
}
}

while (min> = 60) {
if (min> = 60) {
min = min-60;
hr = 1 hr;
}
}
if (FC <10) {hr = "0" + h}
if (min <10) {min = "0" + min}
if (segs <10) {segs = "0" + segs}
fin = h + ":" + min + ":" + segs
voltar fin;
}

<- Função Conta () {
<- SEGUNDOS -;
!.. <- Documento getElementById ("contador") innerHTML = formatatempo (SEGUNDOS);
<-!}

Conta função () {
SEGUNDOS -;

var ritmo = formatatempo (SEGUNDOS);
if (0 min ==) {

. document.getElementById ("contador") style.color = "vermelho";

document.getElementById ("contador") innerHTML =''.;

setTimeout (function () {
document.getElementById ("contador") innerHTML = ritmo.;
}, 500
);

if (SEGUNDOS == 0) {
alert ("Tempo de Apresentação esgotado!");
n ();
stop ();
}
} Else {
document.getElementById ("contador") innerHTML = ritmo.;
}
}

Inicia a função () {
if (SEGUNDOS == 0) {
alert ("Tempo de Apresentação esgotado!");
clearInterval (intervalo);
stop ();
} Else {
intervalo = setInterval ("Conta ();", 1000);}
}

função para () {
clearInterval (intervalo);}

função zera () {
clearInterval (intervalo);
SEGUNDOS = 1800;
. document.getElementById ("contador") style.color = "branco";
. document.getElementById ("contador") innerHTML = formatatempo (SEGUNDOS);
}
</ Script>

<- <script>
SEGUNDOS var = 1800
var VELOCIDADE = 1000;
var valor = 1;
função pisca () {
SEGUNDOS -;
if (valor == 1) {
counter.innerHTML = formatatempo (SEGUNDOS);
valor = 0;
} Else {
counter.innerHTML = "";
valor = 1;
}
setTimeout ("pisca ();", VELOCIDADE);
}
</ Script> ->

<script>
local var = "cronometro"
/ * VALORES = liga UO Desliga * /

var Alerta = "Desliga"

if (screen.width == 1280 && == Screen.Height 1024)
{This.location = local + '1280x1024. Html '}

if (screen.width == 1280 && == Screen.Height 960)
{This.location = local + '1280x960. Html '}

if (screen.width == 1280 && == Screen.Height 768)
{This.location = local + '1280x768. Html '}

if (screen.width == 1280 && == Screen.Height 720)
{This.location = local + '1280x720. Html '}

if (screen.width == 1152 && == Screen.Height 864)
{This.location = local + '1152x864. Html '}

if (screen.width == 1024 && == Screen.Height 768)
{Top.location = local + '1024x768. Html '}

if (screen.width == 848 && Screen.Height == 480)
{This.location = local + '848x480. Html '}

if (screen.width == 800 && Screen.Height == 600)
{This.location = local + '800x600. Html '}

if (screen.width == 640 && Screen.Height == 480)
{This.location = local + '640x480. Html '}

if (Alerta == 'liga') {
alert ('SUAS configurações de video FORAM detectadas com Êxito:' + screen.width + '×' + Screen.Height + 'pixels \ n \ nRedirecionando ...')}
else {}

</ Script>

</ Head>

<Onload corpo = "pisca ();" >
<div id="imagem" align="center">
<div id="a"> </ div>
<div id="b"> <img src="imagens/3 Oficina Engenharia.png" width="800" height="450" /> </ div>
<div id="a"> </ div>
</ Div>
<div id="dir">
<div id="logo">
</ Div>
<div id="cronometro" align="center">
 00:30:00 
<div> <input type="button" value="Parar" onclick="para();">
<input type="button" value="Iniciar" onclick="inicia();">
<input type="button" value="Recomeçar" onclick="zera();"> </ div>

</ Div>

</ Div>

</ Body>
</ Html>

Parte CSS

body {
margin: 0px;
border: 0px;
altura: 100%;
background-size: 100%;
font-size: 110px;
fonte: Arial, Helvetica, sans-serif;
/ * Inicio se degradam do Corpo * /
background-color: # 2F2727;
background-image: url (images / radial_bg.png);
background-position: center;
background-repeat: no-repeat;

/ * Safari 4-5, 1-9 Chrome * / / * Não é possível especificar um tamanho de porcentagem? Laaaaaame. * /
background:-webkit-gradiente (radial, centro, 0, centro, 460, a partir de (# 1a82f7), para (# 2F2727));

/ * Safari 5.1 +, Chrome 10 + * /
background:-webkit-radial-gradiente (círculo, # 1a82f7, # 2F2727);

/ * Firefox 3.6 + * /
background:-moz-radial-gradiente (círculo, # 1a82f7, # 2F2727);

/ * IE 10 * /
fundo:-ms-radial-gradiente (círculo, # 1a82f7, # 2F2727);
/ * Fim se degradam do Corpo * /}

corpo, html {
altura: 100%;
width: 100%;
}

# Imagem {
width: 65%;
altura: 100%;
float: left;
vertical-align: central;
}

# Dir {width: 35%;
altura: 100%;
float: right;}

# {Cronometro
width: 100%;
altura: 20%;
font-size: 90px;
font-family: "Arial Black", Gadget, sans-serif;
color: # FFF;
line-height: 50px;
text-decoration: blink;
}

# {Logotipo

width: 100%;}

Contador regressivo / Cronômetro </ title> <script> SEGUNDOS var = 3600 ;/ / 1800; / / Inicio Fazer cronometro função formatatempo (segs) { min = 0; hr = 0; / * se FC <10 entao hr = "0" e hr Si min <10 min, em SEGUIDA = "0" & min segs si <10 Segs entao = "0" E Segs * / while (segs> = 60) { if (segs> = 60) { segs = segs-60; min = min +1; } } while (min> = 60) { if (min> = 60) { min = min-60; hr = 1 Hora; } } if (FC <10) {hr = "0" + h} if (min <10) {min = "0" + min} if (segs <10) {segs = "0" + segs} fin = h + ":" + min + ":" + Segs voltar fin; } <- Função Conta () { <- SEGUNDOS -; ! .. <- Documento getElementById ("contador") innerHTML = formatatempo (SEGUNDOS); <-!} Conta função () { SEGUNDOS -; var ritmo = formatatempo (SEGUNDOS); if (SEGUNDOS <= 600) { . document.getElementById ("contador") style.color = "# 2FFF2F"; document.getElementById ("contador") innerHTML =''.; setTimeout (function () { document.getElementById ("contador") innerHTML = ritmo.; }, 500 ); if (SEGUNDOS <= 300) { . document.getElementById ("contador") style.color = "# FFFA1A"; document.getElementById ("contador") innerHTML =''.; setTimeout (function () { document.getElementById ("contador") innerHTML = ritmo.; }, 500 ); if (SEGUNDOS <= 150) { . document.getElementById ("contador") style.color = "# FF0F09"; document.getElementById ("contador") innerHTML =''.; setTimeout (function () { document.getElementById ("contador") innerHTML = ritmo.; }, 500 ); if (SEGUNDOS == 0) { . document.getElementById ("contador") innerHTML = formatatempo (SEGUNDOS); n (); stop (); }}} } Else { document.getElementById ("contador") innerHTML = ritmo.; } } Inicia UMA função () { if (SEGUNDOS == 0) { alert ("Tempo de Apresentação esgotado!"); stop (); } Intervalo = setInterval ("Conta ();", 1000); } função para () { if (SEGUNDOS == 0) { clearInterval (Intervalo); alert ("Tempo de Apresentação esgotado!")} else { clearInterval (Intervalo);} } função zera () { clearInterval (Intervalo); SEGUNDOS = 3600; . document.getElementById ("contador") innerHTML = formatatempo (SEGUNDOS); . document.getElementById ("contador") style.color = "Branco"; } </ Script> </ Head> <onload Corpo = "pisca ();" > <div id="a"> </ div> <div align="center"> <img id="imagem" src="imagens/3 Oficina Engenharia.png" width="300" height="169" /> </ div> <div id="a"> </ div> <div id="botoes" align="center"> <table width="100%" border="0" align="center"> <tr> <td align="center" height="50px"> <input type="button" value="Parar" onclick="para();"> <input type="button" value="Iniciar" onclick="inicia();"> <input type="button" value="Recomeçar" onclick="zera();"> </ td> </ Tr> </ Table> </ Div> <div id="cronometro" align="center"> <table width="100%" border="0" align="center"> <tr> <td align="center" height="360px"> <- 00:30:00 -> </ td> </ Tr> </ Table> </ Div> </ Div> </ Body> </ Html> <h2> Parte CSS</h2> body { margin: 0px; border: 0px; Altura: 100%; background-size: 100%; font-size: 110px; fonte: Arial, Helvetica, sans-serif; / * Inicio se degradam do Corpo * / background-color: # 2F2727; background-image: url (images / radial_bg.png); background-position: center; background-repeat: no-repeat; / * Safari 4-5, 1-9 Chrome * / / * Localidade: Não E Possível Localidade: Não Especificado hum tamanho de porcentagem? Laaaaaame. * / background:-webkit-gradiente (radial, centro, 0, centro, 460, a Partir de (# 1a82f7), Pará (# 2F2727)); / * Safari 5.1 +, Chrome 10 + * / background:-webkit-radial-gradiente (Círculo, # 1a82f7, # 2F2727); / * Firefox 3.6 + * / background:-moz-radial-gradiente (Círculo, # 1a82f7, # 2F2727); / * IE 10 * / Fundo:-ms-radial-gradiente (Círculo, # 1a82f7, # 2F2727); / * Fim se degradam do Corpo * /} Corpo, html { Altura: 100%; width: 100%; } # Imagem { width: 100%; Altura: 30%; vertical-align: central; } # {Cronometro width: 100%; Altura: 50%; font-size: 250px; font-family: Arial Black, Gadget, sans-serif; color: # FFF; text-decoration: blink; } # {BOTOES width: 100%; font-size: 30px; font-family: "Arial Black", Gadget, sans-serif; color: # FFF; text-decoration: blink; } # {Logotipo width: 100%; height: 70%; } # A { width: 100%; height: 2%; } # Contador {text-decoration: blink;}

WMA Tech Informática - Manutenção em Informática

Translate

segunda-feira, 18 de novembro de 2013