Tilfældig position og skriftstørrelse

<ole>

Du kunne prøve noget à la:

<script type="text/JavaScript">
function populateContainer(numOfChars, minSize, maxSize) {
    var sp, txt, cont = document.getElementById("container");
    for (i=0; i<50; i++) {
        sp = document.createElement("span");
        txt = document.createTextNode("R");
        sp.style.position = "absolute";
        sp.style.fontSize = (Math.round(Math.random()*maxSize)+minSize)+"px";
        sp.appendChild(txt);
        cont.appendChild(sp);
        sp.style.left = (Math.round(Math.random()*(cont.offsetWidth-sp.offsetWidth)))+"px";
        sp.style.top = (Math.round(Math.random()*(cont.offsetHeight-sp.offsetHeight)))+"px";
    }
}

window.onload = function() {
    populateContainer(50, 10, 50);
}
</script>

<div id="container" style="width:400px;height:300px;font-family:verdana,sans-serif;border:1px solid red"></div>

/mvh
</bole>

Njaahhh ... sådan holder den nok bedre:

<script type="text/JavaScript">
function populateContainer(numOfChars, minSize, maxSize) {
    var sp, txt, cont = document.getElementById("container");
    for (i=0; i<50; i++) {
        sp = document.createElement("span");
        txt = document.createTextNode("R");
        sp.style.position = "absolute";
        sp.style.fontSize = (Math.round(Math.random()*(maxSize-minSize))+minSize)+"px";
        sp.appendChild(txt);
        cont.appendChild(sp);
        sp.style.left = (Math.round(Math.random()*(cont.offsetWidth-sp.offsetWidth)))+"px";
        sp.style.top = (Math.round(Math.random()*(cont.offsetHeight-sp.offsetHeight)))+"px";
    }
}

window.onload = function() {
    populateContainer(50, 10, 50);
}
</script>

<div id="container" style="width:400px;height:300px;font-family:verdana,sans-serif;border:1px solid red"></div>

TAK OLEBOLE! Men for at jeg skal forstå din kode, kan du så ikke lige forklare bare hvad de forskellige ting gør?

yups ... funktionen tager tre argumenter: antal bogstaver, min. skriftstørrelse og max. skriftstørrelse.

I linien:
  var sp, txt, cont = document.getElementById("container");
erklærer vi, at vi senere vil bruge tre forskellige, lokale variabler (variabler, kun funktionen kan 'se') - og i den sidste variabel lægger vi en reference til div'et.

I linien:
  for (i=0; i<50; i++) {
har jeg været lidt dum, for den burde have heddet:
  for (i=0; i<numOfChars; i++) {
hvilket betyder at det, der står mellem 'tuborgerne' skal udføres 'numOfChars' gange.

Linien:
  sp = document.createElement("span");
opretter et span (der er 'frit i luften svævende'. Det er endnu ikke indsat i dokumentet).

Linien:
  txt = document.createTextNode("R");
opretter tilsvarende en tekstnode med indholdet 'R'.

Linien:
  sp.style.position = "absolute";
sætter spannets position til 'absolute'

Linien:
  sp.style.fontSize = (Math.round(Math.random()*(maxSize-minSize))+minSize)+"px";
udregner en tilfældig skriftstørrelse mellem min- og max-størrelsen

Linien:
  sp.appendChild(txt);
klistrer tekstnoden ind i spannet

Linien:
  cont.appendChild(sp);
klistrer spannet ind i container-div'et

Linien:
  sp.style.left = (Math.round(Math.random()*(cont.offsetWidth-sp.offsetWidth)))+"px";
beregner en tilfældig venstre-placering udfra bredden af container-div'et og spannet

Linien:
  sp.style.top = (Math.round(Math.random()*(cont.offsetHeight-sp.offsetHeight)))+"px";
gør det samme - blot er det her top-placeringen, vi beregner

Funktionen kaldes med sine argumenter i det øjeblik, siden er færdig-loaded:
window.onload = function() {
    populateContainer(50, 10, 50);
}

PS: Husk lige at rette de 50 i for-løkken, som jeg viste  ;o)

du er fandme sej! tak tak!

Selvtak. Lige en ekstra bemærkning til udregningen af placeringen af spannet:
Hvis du opfatter div'et som et koordinatsystem, skal vi have anbragt spannets øverste, venstre hjørne i et tilfældigt koordinatsæt (left, top).

JavaScript har et matematik-objekt 'Math' med nogle metoder på. Math.round(3.74) vil således afrunde og returnere 3.
Math.random() returnerer et tilfældigt decimaltal mellem 0 og 1.

Øverste venstre hjørne af spannet skal altså (i vandret retning) ligge mellem 0 og rammens bredde minus spannets bredde. Så vil bogstavet holde sig indenfor rammen.
Et elements bredde kan findes med HTML_ELEMENT.offsetWidth
Derfor kommer regnestykket for X-koordinaten altså til at se sådan ud:
  Math.round( Math.random()*(cont.offsetWidth-sp.offsetWidth) )

Grunden til, vi først sætter left- og top-værdierne så sent i scriptet, er i øvrigt, at vi først skal have klistret teksten ind i spannet og spannet ind i rammen, før det giver mening at spørge om spannets fysiske dimensioner.
En god regel er at gøre elementet så færdigt som muligt, inden det klistres ind i dokumentet og dermed bliver synligt - og så foretage de sidste nødvendige justeringer.

Giver det mening, kan du nok selv gennemskue, hvordan vi kommer frem til top (Y) koordinaten  ;o)

*host-host*
  Math.round(3.74) vil således afrunde og returnere 4
  Math.round(3.34) vil også afrunde og returnere 3  ;D

En enkelt rettelse til div'et. Det skal være positioneret ... enten 'absolute' eller 'relative'. Normalt vil man nok positionere det 'relative', da men så kan lægge det i kodens normale flow - i en tabel-celle eller andet element:

<div id="container" style="position:relative;width:400px;height:300px;font-family:verdana,sans-serif;border:1px solid red"></div>

Gør du ikke det, vil span'ene placere sig i forhold til dokumentets koordinatsytems (0,0). Left og top udregnes nemlig udfra det første, positionerede, omkransende element ... i sidste ende <body>
Det ser du ikke, sålænge div'et ligger i øverste, venstre hjørne - men først når du flytter på det  ;o)