使用js操作css實現(xiàn)js改變背景圖片示例
更新時間：2014年03月10日 10:59:02 作者：
有個朋友在weibo上問我可不可以用JS和CSS讓頁面每次刷新隨機產(chǎn)生一張背景圖，當然是可以的。具體的方法看下面的實現(xiàn)代碼吧
1、用JS定義一個圖片數(shù)組，里面存放你想要隨機展示的圖片
復(fù)制代碼 代碼如下:
ar imgArr=["http://m.fzitv.net/logo_cn.png",
"http://m.fzitv.net/baidu_sylogo1.gif",
"http://m.fzitv.net/news/uploadImg/20120111/20120111081906_79.jpg",
"http://m.fzitv.net/news/uploadImg/20120111/20120111081906_76.jpg"];
上面的圖片請大家換成自己的。
2、用JS產(chǎn)生一個隨機數(shù)，當然這個隨機數(shù)從0開始到imgArr.length-1結(jié)束
復(fù)制代碼 代碼如下:
var index =parseInt(Math.random()*(imgArr.length-1));
這樣我們就得到當前隨機產(chǎn)生的圖片
復(fù)制代碼 代碼如下:
var currentImage=imgArr[index];
3、既然隨機產(chǎn)生了一張背景圖，那就用JS把這個圖片作為背景圖吧。
復(fù)制代碼 代碼如下:
document.getElementById("BackgroundArea").style.backgroundImage="url("+currentImage+")";
由于這是一個demo，所以我在頁面上定義了一個id為BackgroundArea的div，同時也是為這個div設(shè)置隨機背景的。
復(fù)制代碼 代碼如下:
<div id="BackgroundArea">
</div>
相關(guān)文章
JS基于MSClass和setInterval實現(xiàn)ajax定時采集信息并滾動顯示的方法
這篇文章主要介紹了JS基于MSClass和setInterval實現(xiàn)ajax定時采集信息并滾動顯示的方法,涉及JavaScript頁面元素定時滾動操作及ajax調(diào)用實現(xiàn)技巧,需要的朋友可以參考下2016-04-04
這篇文章主要為大家詳細介紹了php結(jié)合js實現(xiàn)多條件組合查詢，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
一個簡潔的網(wǎng)頁JS計算器，附詳細代碼釋義。通過下邊的效果演示就可以看到，這是一個挺小的js網(wǎng)頁計算器，界面美化的我想還是不錯的，畢竟在沒有使用任何圖片修飾的情況下，很好看，而且功能挺實用，可以完成基本的數(shù)學(xué)算數(shù)運算。2015-11-11
javascript 裝載iframe子頁面，自適應(yīng)高度
2009-03-03
這篇文章主要介紹了Javascript如何遞歸遍歷本地文件夾，文中代碼非常細致，幫助大家更好的理解和學(xué)習(xí)JavaScript遞歸，感興趣的朋友可以了解下2020-08-08
這篇文章主要幫助大家理解Javascript文件動態(tài)加載，解決了Javascript文件動態(tài)加載時出現(xiàn)的錯誤，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要介紹了JavaScript實現(xiàn)職責鏈模式概述，詳細的介紹了什么是職責鏈模式和實現(xiàn)方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
火狐下table中創(chuàng)建form導(dǎo)致兩個table之間出現(xiàn)空白
js加入form導(dǎo)致兩個table之間出現(xiàn)空白，還有另一種說法在table中創(chuàng)建form表單是不符合DOM標準的，會導(dǎo)致post失效，以及js數(shù)據(jù)傳輸失效2013-09-09
這篇文章主要介紹了原生js實現(xiàn)類似彈窗抖動效果的相關(guān)資料,推薦給大家，需要的朋友可以參考下2015-04-04
簡單實用的HTML到UBB轉(zhuǎn)換腳本工具實現(xiàn)說明
你也許是位樂于分享的技術(shù)人員，盡管你算不上什么技術(shù)高手，但是你都希望把自己所知道的通過博客與網(wǎng)友分享。為了讓更多人知道你的經(jīng)驗，你可能會努力把博文發(fā)布到專業(yè)論壇。2009-11-11