오늘 친구가 Weibo에서 JS와 CSS를 사용하여 페이지를 새로 고침 할 때마다 무작위로 배경 이미지를 생성 할 수 있는지 물었습니다. 이 작업을 구체적으로 수행 할 수 있습니다.
1.
코드 사본은 다음과 같습니다.
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"
];
여기에서 4 장의 사진을 찾아 보았습니다.
2.
코드 사본은 다음과 같습니다.
var index = parseint (math.random ()*(imgarr.length-1));
이런 식으로 우리는 현재 무작위로 생성 된 이미지를 얻습니다
코드 사본은 다음과 같습니다.
var currentImage = imgarr [index];
3. 배경 이미지가 무작위로 생성되었으므로 JS를 사용 하여이 이미지를 배경 이미지로 사용하십시오.
코드 사본은 다음과 같습니다.
document.getElementById ( "backgroundArea"). Style.backgroundImage = "url ("+currentImage+");
이것은 데모이기 때문에, 나는 페이지에 배경 구역의 ID와 함께 div를 정의 했으며이 div에 대한 임의의 배경을 설정했습니다.
코드 사본은 다음과 같습니다.
<div id = "backgroundArea">
</div>