1. Dator och IT
  2. Systemutveckling
  3. Webbutveckling och javascript

"randomiserad bakgrund"

Svara
2013-07-23, 19:25
  #1
HerbsandInk
Medlem
Sg att jag har tio olika helskrmsbilder som ska fungera som bakgrunder till en hemsida. Jag vill att bakgrunden ska bytas vid varje sidrefresh, vilken det blir ska vara randomiserat. Hur gr jag detta?
Citera
2013-07-23, 19:27
  #2
drole
Medlem
droles avatar
Lttast vore vl att lgga in filnamnen i en array och slumpa dem i PHP.
Annars borde du kunna gra liknade funktion i javascript.

Skriv ihop en funktion fr att f fram namn p bilden lite snabbt i javascript.
Kod: 
<script>

function returnPic()
	{
	var picArray = ['bild1.jpg', 'bild2.jpg', 'bild3.jpg']
	var nr = Math.floor((Math.random() * picArray.length));
	return picArray[nr]
	}
	
document.write(returnPic())
	

</script>
http://pastie.org/private/zxidq6sjgaf9k3ls4pa

Edit, full PoC, snygga till det sjlv.
Kod: 
<html>
<script>

function returnPic()
	{
	var picArray = ['http://www.flashback.se/img/fbo6.jpg', 'http://media.glamsham.com/download/wallpaper/movies/images/f/flashbacks_fool_01_10x7.jpg', 'http://4.bp.blogspot.com/-9yyQoi5DNYc/TscX6ITupgI/AAAAAAAAAx4/5hZNxS675nE/s1600/g-background-1-732051.jpg', 'http://farm5.static.flickr.com/4081/4905765442_821e26c212.jpg', 'http://thedomainfo.com/thumbs/nullfluid.com_small.jpg', 'http://www.andreas-maschke.com/wp-content/gallery/wallpapers/wallpaper_narrow.jpg', 'http://wallpapers.7savers.com/wet-green-leaves-wallpapers_10644_1680x1050.jpg']
	var nr = Math.floor((Math.random() * picArray.length));
	return picArray[nr]
	}
	
document.write('<style>body {background-image:url('+returnPic()+')}</style>')
	

</script>
<body>
</body>
</html>
Kod: http://pastie.org/private/vs0bugfo1zz8bdbbncf9fw
Demo: http://htmlpaste.com/e6b75067ebdf9cd...55ec31d00c3016
__________________
Senast redigerad av drole 2013-07-23 kl. 19:49.
Citera
2013-07-23, 19:28
  #3
svampdamp
Medlem
svampdamps avatar
Se till s att inte bilden som r aktuell randomiseras direkt igen.
Citera
2013-07-23, 20:04
  #4
HerbsandInk
Medlem
Citat:
Ursprungligen postat av drole
Lttast vore vl att lgga in filnamnen i en array och slumpa dem i PHP.
Annars borde du kunna gra liknade funktion i javascript.

Skriv ihop en funktion fr att f fram namn p bilden lite snabbt i javascript.
Kod: 
<script>

function returnPic()
	{
	var picArray = ['bild1.jpg', 'bild2.jpg', 'bild3.jpg']
	var nr = Math.floor((Math.random() * picArray.length));
	return picArray[nr]
	}
	
document.write(returnPic())
	

</script>
http://pastie.org/private/zxidq6sjgaf9k3ls4pa

Edit, full PoC, snygga till det sjlv.
Kod: 
<html>
<script>

function returnPic()
	{
	var picArray = ['http://www.flashback.se/img/fbo6.jpg', 'http://media.glamsham.com/download/wallpaper/movies/images/f/flashbacks_fool_01_10x7.jpg', 'http://4.bp.blogspot.com/-9yyQoi5DNYc/TscX6ITupgI/AAAAAAAAAx4/5hZNxS675nE/s1600/g-background-1-732051.jpg', 'http://farm5.static.flickr.com/4081/4905765442_821e26c212.jpg', 'http://thedomainfo.com/thumbs/nullfluid.com_small.jpg', 'http://www.andreas-maschke.com/wp-content/gallery/wallpapers/wallpaper_narrow.jpg', 'http://wallpapers.7savers.com/wet-green-leaves-wallpapers_10644_1680x1050.jpg']
	var nr = Math.floor((Math.random() * picArray.length));
	return picArray[nr]
	}
	
document.write('<style>body {background-image:url('+returnPic()+')}</style>')
	

</script>
<body>
</body>
</html>
Kod: http://pastie.org/private/vs0bugfo1zz8bdbbncf9fw
Demo: http://htmlpaste.com/e6b75067ebdf9cd...55ec31d00c3016

tackar!
Citera
Svara

Skapa ett konto eller logga in för att kommentera

Du måste vara medlem för att kunna kommentera

Skapa ett konto

Det är enkelt att registrera ett nytt konto

Bli medlem

Logga in

Har du redan ett konto? Logga in här

Logga in