首頁 > web前端 > js教程 > js如何設定隨機切換背景圖片

js如何設定隨機切換背景圖片

小云云
發布: 2018-05-26 10:24:28
原創
5489 人瀏覽過

一個完美的網頁,除了HTML和css,JavaScript也功不可沒,本文我們將和大家分享一個小技巧,js設定隨機切換背景圖片的簡單實例。

<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設定隨機切換背景圖片的簡單實例,希望能幫助大家。

相關推薦:

css中關於背景圖片設定的實例詳解

CSS+html如何實作背景圖片的填色詳解

js實作按鈕加上背景圖片常用方法總結

以上是js如何設定隨機切換背景圖片的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板