Hola estoy siguiendo un curso de html5, css3 y javascript. Y la verdad que el html5 y el css3 es medianamente fácil pero me pierdo con javascript. Tiempo al tiempo.
Tengo un script de un reloj el cual me gustaría modificar. Me gustaría añadirle formas que yo diseñe.
En concreto necesito poner un circulo el extremo de la manecilla del segundero. E incluso poner una imagen en el mismo lugar que el circulo y que esta siempre se
mantenga vertial.
Puedo poner varios y diferentes setInterval?
Os dejo el script:
<!DOCTYPE html>
<html>
<head>
<title>Reloj SVG</title><meta charset="UTF-8">
<style type="text/css">
body, html {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
background-color: #eee;
}
.mitad {
background-color: #db4e36;
color: #db4e36;
font-family: sans-serif;
font-size: 3em;
font-weight: bold;
text-align: center;
padding: 0.5em;
}
#tex {
padding-top: 0.2em;
background-color: #FFF;
}
#vector {
height: 100%;
width: 100%;
}
</style>
<script type="text/javascript" src="http://zeptojs.com/zepto.min.js" ></script>
<script type="text/javascript">
function x2(n,i,x1,r) {return x1 + r*Math.sin(2*Math.PI*n/i);};
function y2(n,i,y1,r) {return y1 - r*Math.cos(2*Math.PI*n/i);};
$(function(){
function mostrar_hora( ) {
var d = new Date();
var h = d.getHours();
var m = d.getMinutes();
var s = d.getSeconds();
$('#tex').html(h + ":" + m + ":" + s);
$('#seg').attr('x2', x2(s,60,100,50)).attr('y2', y2(s,60,70,50));
$('#min').attr('x2', x2(m,60,100,40)).attr('y2', y2(m,60,70,40));
$('#hor').attr('x2', x2(h,12,100,30)).attr('y2', y2(h,12,70,30));
}
setInterval(function(){mostrar_hora();}, 1000);
mostrar_hora();
})
</script>
</head>
<body>
<div class="mitad">
<div id="tex">texto</div>
</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="80" y2="40"
style="stroke:#db4e36;stroke-width:3"/>
<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="80" y2="40"
style="stroke:#db4e36;stroke-width:3"/>
</svg>
</body>
</html>