Reloj utilizando gráficos SVG
JavaScript
Publicado el 9 de Julio del 2019 por Joan (121 códigos)
2.242 visualizaciones desde el 9 de Julio del 2019
Código que muestra un reloj utilizando gráficos SVG
Iniciar sesiónCrear cuenta
Crear cuentaCrear cuenta<!DOCTYPE html>
<html>
<head>
<title>Reloj SVG</title>
<meta charset="UTF-8">
<style>
body, html {
margin: 0px; padding: 0px;height: 100%;
width: 100%;
background-color: #eee;
} #text {
background-color: #fff;
color: #db4e36;
font-family: sans-serif;
font-size: 3em;
font-weight: bold;
text-align: center;
border:0.2em solid #db4e36;
} #vector {
height: 100%;
width: 100%;
}</style>
<script>
/** Funcion para calcular las coordenadas de la posición horizontal */function x2(n,i,x1,r) {
return x1 + r*Math.sin(2*Math.PI*n/i);
} /** Funcion para calcular las coordenadas de la posición vertical */function y2(n,i,y1,r) {
return y1 - r*Math.cos(2*Math.PI*n/i);
} /** Funcion para mover las agujas del reloj */function mostrar_hora() {
const d = new Date();
const h = d.getHours();
const m = d.getMinutes();
const s = d.getSeconds();
document.getElementById('text').innerHTML=h + ":" + m + ":" + s;
const seg=document.getElementById('seg');
seg.setAttribute('x2', x2(s, 60, 100, 50))
seg.setAttribute('y2', y2(s, 60, 70, 50));
const min=document.getElementById('min');
min.setAttribute('x2', x2(m, 60, 100, 40))
min.setAttribute('y2', y2(m, 60, 70, 40));
const hor=document.getElementById('hor');
hor.setAttribute('x2', x2(h, 12, 100, 30))
hor.setAttribute('y2', y2(h, 12, 70, 30));
}window.onload=function() {
mostrar_hora();
setInterval(function(){
mostrar_hora();
}, 1000);
}</script>
</head>
<body>
<div id="text"></div>
<svg id="vector" viewBox="0 0 200 200">
<circle id="myCircle" cx="100" cy="70" r="50" fill="white" stroke="#db4e36" stroke-width="3"/>
<line id="hor" x1="100" y1="70" x2="110" y2="80" style="stroke:#db4e36;stroke-width:5"/>
<line id="min" x1="100" y1="70" x2="80" y2="40" style="stroke:#db4e36;stroke-width:3"/>
<line id="seg" x1="100" y1="70" x2="115" y2="45" style="stroke:black;stroke-width:1"/>
</svg>
</body>
</html>
Comentarios sobre la versión: Versión 1.0 (0)
No hay comentarios