快捷導(dǎo)航

js設(shè)置隨機(jī)切換背景圖片的簡單實(shí)例

更新時(shí)間：2017年11月12日 11:45:34 作者：zhaocundang

下面小編就為大家?guī)硪黄猨s設(shè)置隨機(jī)切換背景圖片的簡單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

實(shí)例如下：

<script>
 
var imgs =["http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_2.jpg",
       "http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_default.png",
       "http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_3.jpg",
       "http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_1.jpg",
       "http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_4.jpg",
       "http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_5.jpg",
       "http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_6.jpg",
       "http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_default-2.jpg",
       ];  
 
var index=Math.floor(Math.random()*8);
var img = imgs[index];
    function time(){
        
       document.body.style.backgroundImage="url("+img+")";
        
    }  
 
document.body.onload = function(){
 time();
}
</script>

以上這篇js設(shè)置隨機(jī)切換背景圖片的簡單實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Javascript驗(yàn)證上傳圖片大小[前臺(tái)處理]
在做上傳圖片的時(shí)候，如果不限制上傳圖片大小，后果非常的嚴(yán)重。解決這個(gè)問題有兩種方式：后臺(tái)處理、前臺(tái)處理
2014-07-07
原生js和jQuery隨意改變div屬性style的名稱和值
用原生js和jQuery實(shí)現(xiàn)改變隨意改變div屬性style的名稱和值的結(jié)果，這個(gè)實(shí)例比較實(shí)用，新手朋友們可以看看
2014-10-10
DatePickerDialog 自定義樣式及使用全解
這篇文章主要介紹了DatePickerDialog 自定義樣式及使用全解，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-07-07
java與javascript之間json格式數(shù)據(jù)互轉(zhuǎn)介紹
對(duì)象轉(zhuǎn)為字符串：通過JSON.encode方法，這個(gè)是json.js里面的方法，引入到當(dāng)前文件就可以了，下面整理的比較詳細(xì)一點(diǎn)，感興趣的朋友不要錯(cuò)過
2013-10-10
js判斷瀏覽器的環(huán)境（pc端，移動(dòng)端，還是微信瀏覽器）
這篇文章主要介紹了js判斷瀏覽器的環(huán)境（pc端，移動(dòng)端，還是微信瀏覽器），文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-01-01
詳解js如何優(yōu)雅處理后端返回的單元格數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了JavaScript如何優(yōu)雅處理后端返回的單元格數(shù)據(jù),文中的示例代碼講解詳細(xì),有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-10-10
JavaScript實(shí)現(xiàn)的浮動(dòng)層框架用法實(shí)例分析
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的浮動(dòng)層框架用法,以實(shí)例形式分析了JavaScript實(shí)現(xiàn)可關(guān)閉的半透明浮動(dòng)層相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-10-10
簡單了解Ajax表單序列化的實(shí)現(xiàn)方法
這篇文章主要介紹了簡單了解Ajax表單序列化的實(shí)現(xiàn)方法,隨著Ajax的出現(xiàn)，表單序列化已經(jīng)成為一種需求,在學(xué)習(xí)原生Ajax時(shí),若用POST方法向后臺(tái)提交數(shù)據(jù)時(shí),就需要將表單序列化,需要的朋友可以參考下
2019-06-06
three.js歐拉角和四元數(shù)的使用方法
這篇文章主要給大家介紹了關(guān)于three.js歐拉角和四元數(shù)的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者使用three.js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07
詳解JavaScript?中的變量聲明與賦值
在?JavaScript?中使用變量或常量之前，必須先進(jìn)行聲明，這篇文章主要介紹了JavaScript中的變量聲明與賦值,本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-08-08