使用js操作css實現(xiàn)js改變背景圖片示例
1、用JS定義一個圖片數(shù)組,里面存放你想要隨機(jī)展示的圖片
ar imgArr=["http://www.dbjr.com.cn/logo_cn.png",
"http://www.dbjr.com.cn/baidu_sylogo1.gif",
"http://www.dbjr.com.cn/news/uploadImg/20120111/20120111081906_79.jpg",
"http://www.dbjr.com.cn/news/uploadImg/20120111/20120111081906_76.jpg"];
上面的圖片請大家換成自己的。
2、用JS產(chǎn)生一個隨機(jī)數(shù),當(dāng)然這個隨機(jī)數(shù)從0開始到imgArr.length-1結(jié)束
var index =parseInt(Math.random()*(imgArr.length-1));
這樣我們就得到當(dāng)前隨機(jī)產(chǎn)生的圖片
var currentImage=imgArr[index];
3、既然隨機(jī)產(chǎn)生了一張背景圖,那就用JS把這個圖片作為背景圖吧。
document.getElementById("BackgroundArea").style.backgroundImage="url("+currentImage+")";
由于這是一個demo,所以我在頁面上定義了一個id為BackgroundArea的div,同時也是為這個div設(shè)置隨機(jī)背景的。
<div id="BackgroundArea">
</div>
相關(guān)文章
javascript setTimeout()傳遞函數(shù)參數(shù)(包括傳遞對象參數(shù))
由于需要,我要用到setTimeout()并且在里邊的函數(shù)參數(shù)傳遞一個參數(shù),就像這樣setTimeout("fun(參數(shù))", 1000)。但是以我這種寫法,js會報錯,說‘參數(shù)’未定義。2010-04-04基于小程序請求接口wx.request封裝的類axios請求
這篇文章主要介紹了基于小程序請求接口wx.request封裝的類axios請求,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07JavaScript中函數(shù)表達(dá)式和函數(shù)聲明及函數(shù)聲明與函數(shù)表達(dá)式的不同
這篇文章主要介紹了JavaScript中函數(shù)表達(dá)式和函數(shù)聲明及函數(shù)聲明與函數(shù)表達(dá)式的不同的相關(guān)資料,需要的朋友可以參考下2015-11-11JavaScript實現(xiàn)獲取兩個排序數(shù)組的中位數(shù)算法示例
這篇文章主要介紹了JavaScript實現(xiàn)獲取兩個排序數(shù)組的中位數(shù)算法,涉及javascript數(shù)組遍歷及數(shù)值計算相關(guān)操作技巧,需要的朋友可以參考下2019-02-02JavaScript獲取ul中l(wèi)i個數(shù)的方法
這篇文章主要介紹了JavaScript獲取ul中l(wèi)i個數(shù)的方法,涉及javascript針對頁面HTML元素的獲取及屬性操作相關(guān)技巧,需要的朋友可以參考下2017-02-02js基于FileSaver.js 瀏覽器導(dǎo)出Excel文件的示例
本篇文章主要介紹了js基于FileSaver.js 瀏覽器導(dǎo)出Excel文件的示例,具有一定的參考價值,有興趣的可以了解一下2017-08-08