jeudi 2 novembre 2017
Bibliothèque aléatoire
<script>
function myFunctionL() {
var randomString1 = new Array ();
randomString1[0] = "Le livre";
randomString1[1] = "L'ouvrage";
randomString1[2] = "Le volume";
randomString1[3] = "Le bouquin";
randomString1[4] = "La brochure";
randomString1[5] = "Le fasicule";
randomString1[6] = "L'opuscule";
randomString1[7] = "Le recueil";
randomString1[8] = "Le livret";
var i = Math.floor(9*Math.random());
var randomString2 = new Array ();
randomString2[0] = " de l'érudition";
randomString2[1] = " de la lumière";
randomString2[2] = " de la science";
randomString2[3] = " de la connaissance";
randomString2[4] = " de la culture";
randomString2[5] = " du génie";
randomString2[6] = " de la cognition";
randomString2[7] = " de la sagesse";
randomString2[8] = " de l'omniscience";
var j = Math.floor(9*Math.random());
var randomString3 = new Array ();
randomString3[0] = "http://s.ecrater.com/stores/3677/43a4e0f9e5919_3677f.jpg";
randomString3[1] = "https://i.pinimg.com/236x/d8/94/3f/d8943f076c99157e207d10ace8a680ee.jpg";
randomString3[2] = "http://365psd.com/images/istock/thumbs/9463/94631021-geometric-arabesque.jpg";
randomString3[3] = "https://i.pinimg.com/236x/d7/6f/47/d76f4701120155c0eb7befea5ab01f60.jpg";
randomString3[4] = "http://365psd.com/images/istock/thumbs/1061/106179045-colorful-arabesque.jpg";
randomString3[5] = "https://tm-interiors.co.uk/images/resized/135x135_70_productsdesigners-guild-fabricsmallarabesque-graphite-fdg2690-02-fabric-majolica-designers-guild.jpg";
randomString3[6] = "https://i.pinimg.com/236x/7b/01/0d/7b010d7d6b0aefcd140f2ae79c26fead.jpg";
randomString3[7] = "https://i.pinimg.com/236x/fd/6e/d8/fd6ed8d64f5733eb29bce0e5b01ce0ab.jpg";
randomString3[8] = "https://tm-interiors.co.uk/images/resized/135x135_70_productsdesigners-guild-fabricsmallarabesque-cobalt-fdg2690-01-fabric-majolica-designers-guild.jpg";
var k = Math.floor(9*Math.random());
var randomString4 = new Array ();
randomString4[0] = "http://www.wasatchnow.com/assets/images/stload.gif";
randomString4[1] = "http://pokestrat.com/img/utilitaire/chargement.gif";
randomString4[2] = "https://media.giphy.com/media/R18MtDLhuIGUE/giphy.gif";
randomString4[3] = "http://www.hypno-success.com/images/hypnowheel.gif";
randomString4[4] = "https://www.bouchara.com/skin/frontend/eurodif/eu_fr/images/opc-ajax-loader.gif";
randomString4[5] = "https://easygoiran.com/wp-content/themes/traveler/img/ajax-login.gif";
randomString4[6] = "https://loading.io/assets/img/ellipsis.gif";
randomString4[7] = "http://www.emcoplastics.com/images/gears-load.gif";
randomString4[8] = "http://themusic.com/img/logo-animation.gif";
var l = Math.floor(9*Math.random());
var couleurbordure = '#'+Math.round(0xFFFFFF * Math.random()).toString(16);
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('xlink','http://www.w3.org/1999/xlink');
svg.setAttribute('width','250');
svg.setAttribute('height','300');
var rect1 = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect1.setAttribute('width','250');
rect1.setAttribute('height','300');
rect1.setAttribute('fill', '#'+Math.round(0xFFFFFF * Math.random()).toString(16));
var rect2 = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect2.setAttribute('y','60');
rect2.setAttribute('width','250');
rect2.setAttribute('height','40');
rect2.setAttribute('fill', '#fff');
rect2.setAttribute('opacity', '0.5');
var rect3 = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect3.setAttribute('x','60');
rect3.setAttribute('y','135');
rect3.setAttribute('width','130');
rect3.setAttribute('height','130');
rect3.setAttribute('fill', 'none');
rect3.setAttribute('stroke', couleurbordure);
rect3.setAttribute('stroke-width', '2');
var rect4 = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect4.setAttribute('x','5');
rect4.setAttribute('y','5');
rect4.setAttribute('width','240');
rect4.setAttribute('height','290');
rect4.setAttribute('fill', 'none');
rect4.setAttribute('stroke', couleurbordure);
rect4.setAttribute('stroke-width', '2');
var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.setAttribute('x', '125');
text.setAttribute('y', '85');
text.setAttribute('fill', '#000');
text.setAttribute('font-family', 'Verdana');
text.setAttribute('text-anchor', 'middle');
text.textContent = randomString1[i]+randomString2[j];
var image1 = document.createElementNS('http://www.w3.org/2000/svg', 'image');
image1.setAttribute('x', '65');
image1.setAttribute('y', '140');
image1.setAttribute('width', '120');
image1.setAttribute('height', '120');
image1.setAttributeNS("http://www.w3.org/1999/xlink", "href", randomString3[k]);
var image2 = document.createElementNS('http://www.w3.org/2000/svg', 'image');
image2.setAttribute('x', '65');
image2.setAttribute('y', '140');
image2.setAttribute('width', '120');
image2.setAttribute('height', '120');
image2.setAttributeNS("http://www.w3.org/1999/xlink", "href", randomString4[l]);
svg.appendChild(rect1);
svg.appendChild(rect2);
svg.appendChild(rect3);
svg.appendChild(rect4);
svg.appendChild(image1);
svg.appendChild(image2);
svg.appendChild(text);
var wp = document.getElementById('wrapper');
wp.appendChild(svg);
}
</script>
<button onclick="myFunctionL()">Livre aléatoire</button><br/><br/>
<div id="wrapper"></div>
-
Animation attribute (width, opacity, etc.) <animate attributeName="?" begin="0s" dur="6s" repeatCount...
-
Generate