Código de JavaScript - Reloj utilizando gráficos SVG

sin imagen de perfil
Val: 131
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Reloj utilizando gráficos SVGgráfica de visualizaciones


JavaScript

Publicado el 9 de Julio del 2019 por Joan
691 visualizaciones desde el 9 de Julio del 2019
Código que muestra un reloj utilizando gráficos SVG

reloj-svg

Versión 1.0

Publicado el 9 de Julio del 2019gráfica de visualizaciones de la versión: Versión 1.0
692 visualizaciones desde el 9 de Julio del 2019
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!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
 

Comentar la versión: Versión 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s5407
Revisar política de publicidad