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>