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 87
| <!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta http-equiv="cache-control" content="public, max-age=60">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Daniel Hagnoul">
<title>Test</title>
<style>
label {
display: block;
}
</style>
<script>
'use strict';
document.addEventListener( 'DOMContentLoaded', ev => {
}, false );
window.addEventListener( 'load', ev => {
const
nbdisquesinput = document.querySelector( "#nbdisques" ),
angleinput = document.querySelector( "#angle" ),
zoneFig = document.querySelector( "#zoneFig" ),
svg = document.createElementNS( "http://www.w3.org/2000/svg", "svg" ),
Ax = 10,
Ay = 10,
Bx = 10,
By = 40,
rayon = 20,
centrex = 10 + Math.sqrt( 175 ),
centrey = 25;
svg.setAttribute( "width", 800 +'px' );
svg.setAttribute( "height", 300 +'px' );
svg.setAttribute( "viewBox", "0 0 800 300" );
zoneFig.appendChild( svg );
function disque( angle, nb ){
const
disques = document.getElementsByTagNameNS( "http://www.w3.org/2000/svg", "path" );
let disquetronque;
for( let disque of Array.from( disques ) ){
disque.parentNode.removeChild( disque );
}
for( let k = 0; k < nb; k++ ){
disquetronque = document.createElementNS( "http://www.w3.org/2000/svg", "path" );
disquetronque.setAttribute( "d", 'M' + Ax + ' ' + Ay + 'A' + rayon + ' ' + rayon + ' 0 1 1 ' + Bx + ' ' + By + ' ' +'Z' );
disquetronque.setAttribute( "style", "stroke:orange;fill:yellow;stroke-width:3px;" );
disquetronque.setAttribute( 'transform', "translate(" + ( k * 2.5 * rayon ) + "," + "0) rotate(" + ( k * angle ) + "," + centrex + "," + centrey +")" );
svg.appendChild( disquetronque );
}
}
nbdisquesinput.addEventListener( 'input', () => {
disque( angleinput.value, nbdisquesinput.value )
}, false );
angleinput.addEventListener( 'input', () => {
disque( angleinput.value, nbdisquesinput.value )
}, false );
}, false );
</script>
</head>
<body>
<main>
<label for="nbdisques">
Entrez le nombre de disques : <input type="number" value="4" step="1" min="1" max="15" id="nbdisques">
</label>
<label for="angle">
Entrez l'angle de rotation : <input type="number" value="15" step="5" min="5" max="355" id="angle">
</label>
<div id="zoneFig"></div>
</main>
</body>
</html> |
Partager