2

Criei uma função que cria um certo relógio. O objetivo é utilizar a função para reutilizar várias vezes, alterando os parâmetros da posição x e y. Utilizo a função setInterval para atualizar todos os segundos. O problema é que a função só está a ser utilizada uma vez.

Código completo: https://jsfiddle.net/p53xcwcj/

    var cont = 0;
	
	function horloge_dynamique(x,y,diametre,decalage){
		
		var svg = document.getElementById('svg');
		cont++;
		
		//cree circle
		var newCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
		newCircle.setAttributeNS(null, 'id', 'circle' + cont);
		newCircle.setAttributeNS(null,'stroke-width',2);
		newCircle.setAttributeNS(null,'stroke','black');
		newCircle.setAttributeNS(null,'fill','Aqua');
		svg.appendChild(newCircle);
		
		//cree aiguille heure
		var newLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
		newLine.setAttributeNS(null, 'id', 'heure' + cont);
		newLine.setAttributeNS(null, "stroke","red");
		newLine.setAttributeNS(null, "stroke-width","4");
		svg.appendChild(newLine);
		
		//cree aiguille minute
		var newLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
		newLine.setAttributeNS(null, 'id', 'min' + cont);
		newLine.setAttributeNS(null, "stroke","orange");
		newLine.setAttributeNS(null, "stroke-width","2");
		svg.appendChild(newLine);
		
		//cree aiguille seconde
		var newLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
		newLine.setAttributeNS(null, 'id', 'sec' + cont);
		newLine.setAttributeNS(null, "stroke","black");
		newLine.setAttributeNS(null, "stroke-width","1");
		svg.appendChild(newLine);
		
		//var circle = document.getElementById("circle_horloge");
		var circle = document.getElementById("circle" + cont);
		circle.setAttribute("cx",x);
		circle.setAttribute("cy",y);
		circle.setAttribute("r",diametre);
		
		//heure
		//var aiguille_heure = document.getElementById("heure");
		var aiguille_heure = document.getElementById("heure"+ cont);
		aiguille_heure.setAttribute("x1",x);
		aiguille_heure.setAttribute("y1",y);
		aiguille_heure.setAttribute("x2",x);
		aiguille_heure.setAttribute("y2",(y-diametre)+diametre/3);
													
		//minutes
		var aiguille_min = document.getElementById("min"+ cont);
		aiguille_min.setAttribute("x1",x);
		aiguille_min.setAttribute("y1",y);
		aiguille_min.setAttribute("x2",x);
		aiguille_min.setAttribute("y2",(y-diametre)+diametre/5);
		
		//secondes
		var aiguille_sec = document.getElementById("sec"+cont);
		aiguille_sec.setAttribute("x1",x);
		aiguille_sec.setAttribute("y1",y);
		aiguille_sec.setAttribute("x2",x);
		aiguille_sec.setAttribute("y2",y-diametre);
		
		
		setInterval(function(){ 
			var d = new Date(); //date
		
			var heure_decalage = d.getHours()+decalage;
			var minute = d.getMinutes();
			var seconds = d.getSeconds();
			
			var heure_calc = (30*((heure_decalage)%12) + (d.getMinutes()/2));
			var minute_calc = 6*minute;
			var seconde_calc = 6*seconds;
			
			var heure = document.getElementById("heure"+ cont);
			var min = document.getElementById("min"+ cont);
			var sec = document.getElementById("sec"+ cont);
			
			//title horloge
			document.getElementById("circle"+cont).setAttribute("title", heure_decalage + ":" + minute);
			
			heure.setAttribute('transform', 'rotate('+ heure_calc +" "+ x +" "+ y +')');
			
			min.setAttribute('transform', 'rotate('+ minute_calc +" "+ x +" "+ y +')');
			sec.setAttribute('transform', 'rotate('+ seconde_calc +" "+ x +" "+ y +')');
			//setTimeout("r(x,y,diametre,decalage,cont)", 1000); 
	
		}, 1000)
	
	}
	
	var x = 500;
	var y = 250;
	
	var x1 = 200;
	var y1 = 100;
	
	var diametre = 100;

	var decalage = 0; 
	
	horloge_dynamique(200,200,diametre,decalage);
	
	horloge_dynamique(100,100,diametre,decalage);
<svg id="svg" width="100%" height="800">
</svg>

2
  • 2
    Por favor, apresente uma versão mais resumida do seu problema e coloque todo o cõdigo na prõpria pergunta ao invés de linkar para um site externo (O stackoverflow também é capaz de rodar snippets de javascript se você quiser). Da forma atual está meio difícil de entender a sua pergunta e o seu código tem muitos detalhes desnecessários.
    – hugomg
    16/04/2015 às 16:52
  • só não entendi por que tomei -1 se a explicação foi pertinente, só não tinha colocado o código fonte. 16/04/2015 às 17:28

2 Respostas 2

4

O seu principal problema é a variável cont que é uma só, e não uma por relógio. Foi só eu introduzir uma variável myCont por relógio e usá-la ao invés da cont que funcionou.

Aqui está o jsfiddle: https://jsfiddle.net/p7L3jf5L/

Aqui vai o código:

var cont = 0;

function horloge_dynamique(x, y, diametre, decalage) {

    var myCont = cont;
    var svg = document.getElementById('svg');
    cont++;

    //cree circle
    var newCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
    newCircle.setAttributeNS(null, 'id', 'circle' + myCont);
    newCircle.setAttributeNS(null,'stroke-width', 2);
    newCircle.setAttributeNS(null,'stroke', 'black');
    newCircle.setAttributeNS(null,'fill', 'Aqua');
    svg.appendChild(newCircle);

    //cree aiguille heure
    var newLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    newLine.setAttributeNS(null, 'id', 'heure' + myCont);
    newLine.setAttributeNS(null, "stroke", "red");
    newLine.setAttributeNS(null, "stroke-width", "4");
    svg.appendChild(newLine);

    //cree aiguille minute
    var newLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    newLine.setAttributeNS(null, 'id', 'min' + myCont);
    newLine.setAttributeNS(null, "stroke", "orange");
    newLine.setAttributeNS(null, "stroke-width", "2");
    svg.appendChild(newLine);

    //cree aiguille seconde
    var newLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    newLine.setAttributeNS(null, 'id', 'sec' + myCont);
    newLine.setAttributeNS(null, "stroke", "black");
    newLine.setAttributeNS(null, "stroke-width", "1");
    svg.appendChild(newLine);

    //var circle = document.getElementById("circle_horloge");
    var circle = document.getElementById("circle" + myCont);
    circle.setAttribute("cx", x);
    circle.setAttribute("cy", y);
    circle.setAttribute("r", diametre);

    //heure
    //var aiguille_heure = document.getElementById("heure");
    var aiguille_heure = document.getElementById("heure" + myCont);
    aiguille_heure.setAttribute("x1", x);
    aiguille_heure.setAttribute("y1", y);
    aiguille_heure.setAttribute("x2", x);
    aiguille_heure.setAttribute("y2", (y - diametre) + diametre / 3);

    //minutes
    var aiguille_min = document.getElementById("min" + myCont);
    aiguille_min.setAttribute("x1", x);
    aiguille_min.setAttribute("y1", y);
    aiguille_min.setAttribute("x2", x);
    aiguille_min.setAttribute("y2", (y - diametre) + diametre / 5);

    //secondes
    var aiguille_sec = document.getElementById("sec" + myCont);
    aiguille_sec.setAttribute("x1", x);
    aiguille_sec.setAttribute("y1", y);
    aiguille_sec.setAttribute("x2", x);
    aiguille_sec.setAttribute("y2", y - diametre);


    setInterval(function(){ 
        var d = new Date(); //date

        var heure_decalage = d.getHours() + decalage;
        var minute = d.getMinutes();
        var seconds = d.getSeconds();

        var heure_calc = (30 * ((heure_decalage) % 12) + (d.getMinutes() / 2));
        var minute_calc = 6 * minute;
        var seconde_calc = 6 * seconds;

        var heure = document.getElementById("heure" + myCont);
        var min = document.getElementById("min" + myCont);
        var sec = document.getElementById("sec" + myCont);

        //title horloge
        document.getElementById("circle" + myCont).setAttribute("title", heure_decalage + ":" + minute);

        heure.setAttribute('transform', 'rotate(' + heure_calc + " " + x + " " + y + ')');

        min.setAttribute('transform', 'rotate(' + minute_calc + " " + x + " " + y + ')');
        sec.setAttribute('transform', 'rotate(' + seconde_calc + " " + x + " " + y + ')');
        //setTimeout("r(x, y, diametre, decalage, myCont)", 1000); 
    }, 1000);
}

var x = 500;
var y = 250;

var x1 = 200;
var y1 = 100;

var diametre = 100;

var decalage = 0; 

horloge_dynamique(200, 200, diametre, decalage);

horloge_dynamique(100, 100, diametre, decalage);
<svg id="svg" width="100%" height="800">
</svg>

2
  • resolvido, o mycount gera outro ID fiz mudando a assinatura da função em vez de alterar todas as linhas dentro da função, mas, ta resolvido igual. 16/04/2015 às 17:26
  • @MaisonSakamoto Legal que você tenha chegado nisso também, mas saiba que não fui eu quem negativou a sua resposta. Pelo contrário, acabei de te dar +1 também. 16/04/2015 às 17:28
3

onde estiver escrito getElementById o javascript pegará somente o primeiro elemento que tiver este ID, para fazer 2 relógios, terá que mudar seu código para pegar ajustar essa parte.

https://jsfiddle.net/p53xcwcj/3/

HTML

<svg id="svg01" width="100%" height="800">    </svg>
<svg id="svg02" width="100%" height="800">    </svg>

JAVASCRIPT

    //var cont = 0;

function horloge_dynamique(id,cont,x,y,diametre,decalage){

    var svg = document.getElementById(id);
    //cont++;

    //cree circle
    var newCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
    newCircle.setAttributeNS(null, 'id', 'circle' + cont);
    newCircle.setAttributeNS(null,'stroke-width',2);
    newCircle.setAttributeNS(null,'stroke','black');
    newCircle.setAttributeNS(null,'fill','Aqua');
    svg.appendChild(newCircle);

    //cree aiguille heure
    var newLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    newLine.setAttributeNS(null, 'id', 'heure' + cont);
    newLine.setAttributeNS(null, "stroke","red");
    newLine.setAttributeNS(null, "stroke-width","4");
    svg.appendChild(newLine);

    //cree aiguille minute
    var newLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    newLine.setAttributeNS(null, 'id', 'min' + cont);
    newLine.setAttributeNS(null, "stroke","orange");
    newLine.setAttributeNS(null, "stroke-width","2");
    svg.appendChild(newLine);

    //cree aiguille seconde
    var newLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    newLine.setAttributeNS(null, 'id', 'sec' + cont);
    newLine.setAttributeNS(null, "stroke","black");
    newLine.setAttributeNS(null, "stroke-width","1");
    svg.appendChild(newLine);

    //var circle = document.getElementById("circle_horloge");
    var circle = document.getElementById("circle" + cont);
    circle.setAttribute("cx",x);
    circle.setAttribute("cy",y);
    circle.setAttribute("r",diametre);

    //heure
    //var aiguille_heure = document.getElementById("heure");
    var aiguille_heure = document.getElementById("heure"+ cont);
    aiguille_heure.setAttribute("x1",x);
    aiguille_heure.setAttribute("y1",y);
    aiguille_heure.setAttribute("x2",x);
    aiguille_heure.setAttribute("y2",(y-diametre)+diametre/3);

    //minutes
    var aiguille_min = document.getElementById("min"+ cont);
    aiguille_min.setAttribute("x1",x);
    aiguille_min.setAttribute("y1",y);
    aiguille_min.setAttribute("x2",x);
    aiguille_min.setAttribute("y2",(y-diametre)+diametre/5);

    //secondes
    var aiguille_sec = document.getElementById("sec"+cont);
    aiguille_sec.setAttribute("x1",x);
    aiguille_sec.setAttribute("y1",y);
    aiguille_sec.setAttribute("x2",x);
    aiguille_sec.setAttribute("y2",y-diametre);


    setInterval(function(){ 
        var d = new Date(); //date

        var heure_decalage = d.getHours()+decalage;
        var minute = d.getMinutes();
        var seconds = d.getSeconds();

        var heure_calc = (30*((heure_decalage)%12) + (d.getMinutes()/2));
        var minute_calc = 6*minute;
        var seconde_calc = 6*seconds;

        var heure = document.getElementById("heure"+ cont);
        var min = document.getElementById("min"+ cont);
        var sec = document.getElementById("sec"+ cont);

        //title horloge
        document.getElementById("circle"+cont).setAttribute("title", heure_decalage + ":" + minute);

        heure.setAttribute('transform', 'rotate('+ heure_calc +" "+ x +" "+ y +')');

        min.setAttribute('transform', 'rotate('+ minute_calc +" "+ x +" "+ y +')');
        sec.setAttribute('transform', 'rotate('+ seconde_calc +" "+ x +" "+ y +')');
        //setTimeout("r(x,y,diametre,decalage,cont)", 1000); 

    }, 1000)

}

var x = 500;
var y = 250;

var x1 = 200;
var y1 = 100;

var diametre = 100;

var decalage = 0; 

horloge_dynamique('svg01',1,x,y,diametre,decalage);

horloge_dynamique('svg02',2,x1,y1,diametre,decalage);

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .