Cronómetro HTML

admin
Site Admin
Mensajes: 10
Registrado: Sab Nov 30, 2019 10:50 am

Cronómetro HTML

Mensaje por admin » Dom Dic 01, 2019 1:23 pm

Cronómetro

PODEIS VER LA DEMO AQUÍ: https://www.ciberterror.com/demos/cronometro.html

CODIGO HTML COMPLETO

Código: Seleccionar todo

<html>
<head>
    <head> <html lang="es" dir="ltr" xmlns:fb="http://ogp.me/ns/fb#" xmlns:og="http://ogp.me/ns#" xmlns:article="http://ogp.me/ns/article#" xmlns:book="http://ogp.me/ns/book#" xmlns:profile="http://ogp.me/ns/profile#" xmlns:video="http://ogp.me/ns/video#" xmlns:product="http://ogp.me/ns/product#" class="js"><head profile="http://www.w3.org/1999/xhtml/vocab"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="MobileOptimized" content="width" />
<meta name="HandheldFriendly" content="true" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  

  <title>CIBERTERROR CRONÓMETRO</title>
 

</head>
<style>
* {margin: 0; padding: 0;}

.container {
	padding: 10px;
	text-align: center;
}

.timer {
	padding: 10px;
	background: linear-gradient(top, #222, #444);
	overflow: hidden;
	display: inline-block;
	border: 7px solid #efefef;
	border-radius: 5px;
	position: relative;
	
	box-shadow: 
		inset 0 -2px 10px 1px rgba(0, 0, 0, 0.75), 
		0 5px 20px -10px rgba(0, 0, 0, 1);
}

.cell {
	/*Should only display 1 digit. Hence height = line height of .numbers
	and width = width of .numbers*/
	width: 0.60em;
	height: 40px;
	font-size: 50px;
	overflow: hidden;
	position: relative;
	float: left;
}

.numbers {
	width: 0.6em;
	line-height: 40px;
	font-family: digital, arial, verdana;
	text-align: center;
	color: #fff;
	
	position: absolute;
	top: 0;
	left: 0;
	
	/*Glow to the text*/
	text-shadow: 0 0 5px rgba(255, 255, 255, 1);
}

/*Styles for the controls*/
#timer_controls {
	margin-top: -5px;
}
#timer_controls label {
	cursor: pointer;
	padding: 5px 10px;
	background: #efefef;
	font-family: arial, verdana, tahoma;
	font-size: 11px;
	border-radius: 0 0 3px 3px;
}
input[name="controls"] {display: none;}

/*Control code*/
#stop:checked~.timer .numbers {animation-play-state: paused;}
#start:checked~.timer .numbers {animation-play-state: running;}
#reset:checked~.timer .numbers {animation: none;}

.moveten {
	/*The digits move but dont look good. We will use steps now
	10 digits = 10 steps. You can now see the digits swapping instead of 
	moving pixel-by-pixel*/
	animation: moveten 1s steps(10, end) infinite;
	/*By default animation should be paused*/
	animation-play-state: paused;
}
.movesix {
	animation: movesix 1s steps(6, end) infinite;
	animation-play-state: paused;
}

/*Now we need to sync the animation speed with time speed*/
/*One second per digit. 10 digits. Hence 10s*/
.second {animation-duration: 10s;}
.tensecond {animation-duration: 60s;} /*60 times .second*/

.milisecond {animation-duration: 1s;} /*1/10th of .second*/
.tenmilisecond {animation-duration: 0.1s;}
.hundredmilisecond {animation-duration: 0.01s;}

.minute {animation-duration: 600s;} /*60 times .second*/
.tenminute {animation-duration: 3600s;} /*60 times .minute*/

.hour {animation-duration: 36000s;} /*60 times .minute*/
.tenhour {animation-duration: 360000s;} /*10 times .hour*/

@keyframes moveten {
	0% {top: 0;}
	100% {top: -400px;} 
	/*height = 40. digits = 10. hence -400 to move it completely to the top*/
}

@keyframes movesix {
	0% {top: 0;}
	100% {top: -240px;} 
	/*height = 40. digits = 6. hence -240 to move it completely to the top*/
}

</style>
</head>
<body style="background-color:#000">
    <br><center>
    <script language="JavaScript" type="Text/JavaScript">
var fifteenth = 'CRONÓMETRO'; var sixteenth = 'green'; var seventeenth = 'yellow'; var eighteenth = '30'; var nineteenth = 150;var twentieth = 0;var first2;
document.write('<div id=second2></div>');
function sixth2()  {
fifth2 = '<font size=' + eighteenth + '><font color=' + sixteenth + '>';
for (var first2 = 0; first2 < fifteenth.length; first2++) {
if( first2 == twentieth) {fifth2 += '<font color=' + seventeenth + '>' + fifteenth.charAt(twentieth) + '</font>';}else {fifth2 += fifteenth.charAt(first2);   }}fifth2 += '</font></font>';document.getElementById("second2").innerHTML = fifth2;(twentieth == fifteenth.length) ? twentieth=0 : twentieth++; }setInterval('sixth2()', nineteenth);
</script>
</center></br>
    <br>
<div class="container">
	<!-- time to add the controls -->
	<input id="start" name="controls" type="radio" />
	<input id="stop" name="controls" type="radio" />
	<input id="reset" name="controls" type="radio" />
	<div class="timer">
		<div class="cell">
			<div class="numbers tenhour moveten">0 1 2 3 4 5 6 7 8 9</div>
		</div>
		<div class="cell">
			<div class="numbers hour moveten">0 1 2 3 4 5 6 7 8 9</div>
		</div>
		<div class="cell divider"><div class="numbers">:</div></div>
		<div class="cell">
			<div class="numbers tenminute movesix">0 1 2 3 4 5 6</div>
		</div>
		<div class="cell">
			<div class="numbers minute moveten">0 1 2 3 4 5 6 7 8 9</div>
		</div>
		<div class="cell divider"><div class="numbers">:</div></div>
		<div class="cell">
			<div class="numbers tensecond movesix">0 1 2 3 4 5 6</div>
		</div>
		<div class="cell">
			<div class="numbers second moveten">0 1 2 3 4 5 6 7 8 9</div>
		</div>
		<div class="cell divider"><div class="numbers">:</div></div>
		<div class="cell">
			<div class="numbers milisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
		</div>
		<div class="cell">
			<div class="numbers tenmilisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
		</div>
		<div class="cell">
			<div class="numbers hundredmilisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
		</div>
	</div>
	<!-- Lables for the controls -->
	<div id="timer_controls">
		<label for="start">Start</label>
		<label for="stop">Stop</label>
		<label for="reset">Reset</label>
	</div>
</div>
</br>
<section>
    <center>
    <script language="JavaScript" type="Text/JavaScript">
var fifteenth = 'CRONÓMETRO'; var sixteenth = 'green'; var seventeenth = 'yellow'; var eighteenth = '30'; var nineteenth = 150;var twentieth = 0;var first2;
document.write('<div id=second2></div>');
function sixth2()  {
fifth2 = '<font size=' + eighteenth + '><font color=' + sixteenth + '>';
for (var first2 = 0; first2 < fifteenth.length; first2++) {
if( first2 == twentieth) {fifth2 += '<font color=' + seventeenth + '>' + fifteenth.charAt(twentieth) + '</font>';}else {fifth2 += fifteenth.charAt(first2);   }}fifth2 += '</font></font>';document.getElementById("second2").innerHTML = fifth2;(twentieth == fifteenth.length) ? twentieth=0 : twentieth++; }setInterval('sixth2()', nineteenth);
</script>
</center>
<br><center><a title="Crono" href="http://www.ciberterror.com"><img src="https://www.ciberterror.com/demos/crono.png" alt="Crono" /></a></center></br>

<div id='twentieth' style='position: absolute; top: -65; color: red; font-family: "Courier New", Courier, mono; font-weight:bold; font-size:40px;'>CRONÓMETRO</div>
<style>

{
  background-color: #000000;
  color: rgba(255, 255, 255, 0.7);
  font-family: 'Lato', sans-serif;
  margin: 20px;
}
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
.menu {
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  display: inline-block;
  cursor: pointer;
  pointer-events: none;
  position: absolute;
  bottom: 20px;
  left: 20px;
}
.menu:hover {
  pointer-events: all;
}
.label {
  display: inline-block;
  cursor: pointer;
  pointer-events: all;
}
.spacer {
  display: inline-block;
  width: 80px;
  margin-left: 15px;
  margin-right: 15px;
  vertical-align: middle;
  cursor: pointer;
  position: relative;
}
.spacer:before {
  content: "";
  position: absolute;
  border-bottom: 1px solid #ffffff;
  height: 1px;
  width: 0%;
  transition: width 0.25s ease;
  transition-delay: 0.7s;
}
.item {
  position: relative;
  display: inline-block;
  margin-right: 30px;
  top: 10px;
  opacity: 0;
  transition: opacity 0.5s ease, top 0.5s ease;
  transition-delay: 0;
}
span {
  transition: color 0.5s ease;
}
.item:hover span {
  color: #ff0000;
}
.menu:hover .spacer:before {
  width: 100%;
  transition-delay: 0s;
}
.menu:hover .item {
  opacity: 1;
  top: 0px;
}
.item:nth-child(1) {
  transition-delay: 0.45s;
}
.item:nth-child(2) {
  transition-delay: 0.4s;
}
.item:nth-child(3) {
  transition-delay: 0.35s;
}
.item:nth-child(4) {
  transition-delay: 0.3s;
}
.item:nth-child(5) {
  transition-delay: 0.25s;
}
.item:nth-child(6) {
  transition-delay: 0.2s;
}
.item:nth-child(7) {
  transition-delay: 0.15s;
}
.item:nth-child(8) {
  transition-delay: 0.1s;
}
.item:nth-child(9) {
  transition-delay: 0.05s;
}
.item:nth-child(10) {
  transition-delay: 0s;
}
.menu:hover .item:nth-child(1) {
  transition-delay: 0.25s;
}
.menu:hover .item:nth-child(2) {
  transition-delay: 0.3s;
}
.menu:hover .item:nth-child(3) {
  transition-delay: 0.35s;
}
.menu:hover .item:nth-child(4) {
  transition-delay: 0.4s;
}
.menu:hover .item:nth-child(5) {
  transition-delay: 0.45s;
}
.menu:hover .item:nth-child(6) {
  transition-delay: 0.5s;
}
.menu:hover .item:nth-child(7) {
  transition-delay: 0.55s;
}
.menu:hover .item:nth-child(8) {
  transition-delay: 0.6s;
}
.menu:hover .item:nth-child(9) {
  transition-delay: 0.65s;
}
.menu:hover .item:nth-child(10) {
  transition-delay: 0.7s;
}
.alink, .alink:visited{
	text-decoration:none;
	color:rgba(255, 255, 255, 0.8)
}
.alink:hover{
	text-decoration: underline;
}
</style>


Take your mouse over "Menu".
<div class="menu">
<div class="label">Menu</div>
<div class="spacer"></div>
<div class="item"><span><a href="https://www.ciberterror.com" class="alink" >Inicio</a></span></div>
<div class="item"><span><a href="https://www.ciberterror.com/hackers/" class="alink" >Hackers</a></span></div>
<div class="item"><span><a href="http://hackers.ciberterror.com/" class="alink" >Foro</a></span></div>
<div class="item"><span><a href="https://www.ciberterror.com/demos/servidor/chat.php" class="alink" >Chat</a></span></div>
<div class="item"><span><a href="https://www.ciberterror.com/contacto/" class="alink" >Contacto</a></span></div>
</div>


<footer><center>
<div><br><a target="_blank" href="http://www.ciberterror.com/"><span style="font-size: 8pt; text-decoration: none">Ciberterror.com | CRONOMETRO</span></a></br></div>
</center>
</footer></section>
</body>
</html>

Responder