Hoje, um amigo me perguntou no Weibo se eu posso usar o JS e o CSS para fazer a atualização da página aleatoriamente uma imagem de fundo toda vez que eu a refresco. Você pode fazer isso especificamente:
1. Use JS para definir uma matriz de imagem, que armazena as imagens que você deseja exibir aleatoriamente
A cópia do código é a seguinte:
var imgarr = ["http://www.google.com.hk/intl/zh-cn/images/logo_cn.png",
"http://www.baidu.com/img/baidu_sylogo1.gif",
"http://www.open-open.com/news/uploadimg/20120111/20120111081906_79.jpg",
"http://www.open-open.com/news/uploadimg/20120111/20120111081906_76.jpg"
];
Encontrei 4 fotos aqui e dei uma olhada.
2. Use JS para gerar um número aleatório, é claro, esse número aleatório começa a partir de 0 e termina no imgarr.length-1.
A cópia do código é a seguinte:
var index = parseint (math.random ()*(imgarr.length-1));
Dessa forma, temos a imagem atualmente gerada aleatoriamente
A cópia do código é a seguinte:
var currentImage = imgarr [index];
3. Como uma imagem de fundo foi gerada aleatoriamente, use o JS para usar essa imagem como imagem de fundo.
A cópia do código é a seguinte:
Document.getElementById ("BordalARea"). style.backgroundImage = "url ("+currentImage+")";
Como essa é uma demonstração, eu defini uma div com o ID do BackgroundAlea na página e também defina um plano de fundo aleatório para esta div.
A cópia do código é a seguinte:
<div id = "Antecedentesea">
</div>