Skip to content

Commit

Permalink
Merge pull request #1 from eracom-gr461/animation-svg
Browse files Browse the repository at this point in the history 
Propositions de modification de code
  • Loading branch information
@StephGr461
StephGr461 authored Sep 22, 2017
2 parents 4f47d83 + 0155813 commit 3267a89
Show file tree
Hide file tree
Showing 4 changed files with 304 additions and 11 deletions.
153 changes: 153 additions & 0 deletions index-cercle-mult.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
<!doctype html>
<html class="no-js" lang="fr">
<head>
<meta charset="utf-8">
<title>The JS Clocks</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<style>

body {
display: flex;
height: 100%;
width: 100%;
position: absolute;
}

svg {
border: 1px solid #ddd;
margin: auto;
height: 100%;
width: auto;
}

/*
* Rules for Vertical Screens
*/
@media screen and ( max-aspect-ratio: 1/1 ) {
svg {
width: 100%;
height: auto;
}
}

.scnd {
display: none;
}

</style>
</head>
<body>

<svg id="vector" width="600" height="600" viewbox="0 0 600 600">

<circle id="seconde" class="scnd" style="fill:#000000;stroke:#000000;stroke-width:0;stroke-miterlimit:10;" cx="100" cy="100" r="3"/>

<circle id="minutes" style="fill:#FFFFFF;stroke:#000000;stroke-width:1.5;stroke-miterlimit:10;" cx="300" cy="112" r="20"/>

<g id="heures">
<circle style="fill:#FFFFFF;stroke:#000000;stroke-width:2;stroke-miterlimit:10;" cx="300" cy="50" r="40"/>

<line style="fill:none;stroke:#000000;stroke-width:1.5;stroke-miterlimit:10;" x1="55.454" y1="300" x2="13.158" y2="300"/>

<line style="fill:none;stroke:#000000;stroke-width:1.5;stroke-miterlimit:10;" x1="533.466" y1="300" x2="575.762" y2="300"/>
</g>
</svg>

<script>

// Cloner un élément 60 fois:
// On va créer 60 items, et on va les masquer

// On sélectionner notre modèle:
var itm = document.getElementById("seconde");

var i; // i = convention, pour "integer" (nombre entier)
for (i = 0; i < 61; i++) {

var angle = i*6;

var angle = angle - 135; // Correction du "translate(50%,50%)"

// Copy the element
var cln = itm.cloneNode(true);

// Change the elment
cln.id = 'seconde'+i;
cln.style.transform = 'translate(50%,50%) rotate('+angle+'deg)';

// Append the cloned element to something
document.getElementById("vector").appendChild(cln);

}

// Colorisation de quelques éléments pour visualiser leur position:

var sec0 = document.getElementById("seconde0");
sec0.style.fill = "red";

var sec15 = document.getElementById("seconde15");
sec15.style.fill = "red";

var sec45 = document.getElementById("seconde45");
sec45.style.fill = "red";

var sec30 = document.getElementById("seconde30");
sec30.style.fill = "red";



function metronome() {

var date = new Date();

var seconde = date.getSeconds();

if ( seconde == 0 ) {

// masquer tous les .scnd

var hideAll = document.getElementsByClassName("scnd") ;

var i;
for (i = 0; i < hideAll.length; i++) {
hideAll[i].style.display = "none";
}

// afficher l'élément zéro:

var showSec = document.getElementById("seconde0");
showSec.style.display = "block";


} else {

// afficher l'élément

var sec = 'seconde' + date.getSeconds();

// console.log(sec);

var showSec = document.getElementById(sec);

showSec.style.display = "block";

}

} // fin de metronome()


// On lance metronome() une fois dès le chargement de la page:

metronome();


// Répéter la fonction metronone une fois par seconde

var forever = setInterval(function() {
metronome();
}, 1000);

</script>
</body>
</html>
111 changes: 111 additions & 0 deletions index-cercle.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
<!doctype html>
<html class="no-js" lang="fr">
<head>
<meta charset="utf-8">
<title>The JS Clocks</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<style>

body {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
height: 100%;
width: 100%;
position: absolute;
top: 0;
}

svg {
border: 1px solid #ddd;
background: #fff;
margin: auto;
height: 100%;
width: auto;
}

/*
* Rules for Vertical Screens
*/
@media screen and ( max-aspect-ratio: 1/1 ) {
body {
background: #ccc;
}
svg {
width: 100%;
height: auto;
}
}


@keyframes sarabande {
0% {
transform: translate(50%,50%) rotate(0deg);
}
100% {
transform: translate(50%,50%) rotate(360deg);
}
}

#seconde {
animation: sarabande 2s infinite;
animation-timing-function: linear;
stroke: #00ff00;
fill: none;
stroke-miterlimit: 10;
transform: translate(50%,50%) rotate(0deg);
}

</style>
</head>
<body>

<svg id="vector" width="600" height="600" viewbox="0 0 600 600">

<circle id="seconde" cx="100" cy="100" r="16"/>

<g id="markers">
<line style="fill:none;stroke:#000000;stroke-width:1.5;stroke-miterlimit:10;" x1="55.454" y1="300" x2="13.158" y2="300"/>

<line style="fill:none;stroke:#000000;stroke-width:1.5;stroke-miterlimit:10;" x1="533.466" y1="300" x2="575.762" y2="300"/>
</g>
</svg>

<script>


// coloriser un élément SVG

// paramètres SVG:
// stroke-width
// stroke

// document.getElementById("seconde").style.stroke = '#00ff00';

document.querySelector("#seconde").style.stroke = '#00ffff';
document.querySelector("#seconde").style.strokeWidth = 3;
// document.querySelector("#seconde").style.transform = 'translate(0,-20%) rotate(-3deg)';
// document.getElementById("seconde").style.display = 'none';
// Changer la position:

// Cloner un élément:

// Get the last <li> element ("Milk") of <ul> with id="myList2"
var itm = document.getElementById("seconde");

// Copy the element
var cln = itm.cloneNode(true);

// Change the elment
cln.id = 'seconde1';
cln.style.stroke = '#ff0000';
cln.style.transform = 'translate(50%,50%) rotate(-0deg)';

// Append the cloned element to something
document.getElementById("vector").appendChild(cln);

</script>
</body>
</html>
12 changes: 6 additions & 6 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,15 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/clocks.js"></script>
<script defer src="js/clocks.js"></script>
<style>
#seconde circle {
stroke: #00ff00;
}
</style>
</head>
<body>

<h1>Salut, je suis un titre</h1>
<p>Ciao, je suis un paragraphe</p>

<time class="temps" id="horloge">00:00:00</time>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 595.28 841.89" style="enable-background:new 0 0 595.28 841.89;" xml:space="preserve">
<g id="spirale">
Expand Down
39 changes: 34 additions & 5 deletions js/clocks.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,42 @@
* Auteur: Mikael Elmblad, tcip.se
*/

//afficher une alerte hello world
alert("hello world");
//afficher un message dans le console
console.log("bonjour");
// répéter la fonction metronone une fois par seconde

var myVar = setInterval(function() {
metronome();
}, 1000);

// coloriser un élément SVG

// paramètres SVG:
// stroke-width
// stroke

// document.getElementById("seconde").style.stroke = '#00ff00';

document.querySelector("#seconde").style.stroke = '#00ffff';
document.querySelector("#seconde").style.strokeWidth = 3;
// document.querySelector("#seconde").style.transform = 'translate(0,-20%) rotate(-3deg)';
// document.getElementById("seconde").style.display = 'none';
// Changer la position:

// Cloner un élément:

// Get the last <li> element ("Milk") of <ul> with id="myList2"
var itm = document.getElementById("seconde");

// Copy the element
var cln = itm.cloneNode(true);

// Change the elment
cln.id = 'seconde1';
cln.style.stroke = '#ff0000';
cln.style.transform = 'translate(50%,50%) rotate(-0deg)';

// Append the cloned element to something
document.getElementById("vector").appendChild(cln);


function metronome() {

Expand All @@ -24,8 +50,11 @@ function metronome() {

var d = new Date(); // 2: ceci produit la date

// Sélectionner la seconde et la dupliquer:


// 2: on affiche l'heure dans notre objet "horloge"

document.getElementById("horloge").innerHTML = d.toLocaleTimeString();
// document.getElementById("horloge").innerHTML = d.toLocaleTimeString();

}

0 comments on commit 3267a89

Please sign in to comment.