var bodyBgs = [];    //創(chuàng)建一個(gè)數(shù)組變量來存儲背景圖片的路徑

bodyBgs[0] = "images/01.jpg";

bodyBgs[1] = "images/02.jpg";

bodyBgs[2] = "images/03.jpg";

bodyBgs[3] = "images/04.jpg";

bodyBgs[4] = "images/05.jpg";

因?yàn)樯厦嬗玫搅?個(gè)圖像，所以在這里需要產(chǎn)生一個(gè)0到4的隨機(jī)數(shù)。如果數(shù)組長度不一樣，修改下面代碼中的乘數(shù)就可以。

復(fù)制代碼代碼如下:

var randomBgIndex = Math.round( Math.random() * 4 );

核心的程序就是這些。盡管很簡單，卻是一種小小的思路，若以此為基礎(chǔ)，通過加工可以做出一些擴(kuò)展功能。比如：主題切換以及其它的隨機(jī)呈現(xiàn)等等。下面是完整的JS代碼。

復(fù)制代碼代碼如下:

<script type="text/javascript">

    //<!CDATA[

        var bodyBgs = [];

        bodyBgs[0] = "images/01.jpg";

        bodyBgs[1] = "images/02.jpg";

        bodyBgs[2] = "images/03.jpg";

        bodyBgs[3] = "images/04.jpg";

        bodyBgs[4] = "images/05.jpg";

        var randomBgIndex = Math.round( Math.random() * 4 );

    //輸出隨機(jī)的背景圖

        document.write('<style>body{background:url(' + bodyBgs[randomBgIndex] + ') no-repeat 50% 0}</style>');

    //]]>

</script>

希望本文所述對大家基于javascript的web程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

JS實(shí)現(xiàn)的tab切換選項(xiàng)卡效果示例
這篇文章主要介紹了JS實(shí)現(xiàn)的tab切換選項(xiàng)卡效果,結(jié)合具體實(shí)例形式分析了JS通過鼠標(biāo)事件觸發(fā)自定義函數(shù)控制頁面元素樣式變換實(shí)現(xiàn)tab切換功能的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2017-02-02
詳解適配器在JavaScript中的體現(xiàn)
在日常開發(fā)中，很多時(shí)候會不經(jīng)意間寫出符合某種設(shè)計(jì)模式的代碼，而適配器其實(shí)在JavaScript中應(yīng)該是比較常見的一種了。這篇文章主要介紹了適配器在JavaScript中的體現(xiàn) ,需要的朋友可以參考下
2018-09-09
JavaScript中的this原理及6種常見使用場景詳解
這篇文章主要介紹了JavaScript中的this原理及6種常見使用場景詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-02-02
常見Ajax下載文件方式以及報(bào)錯(cuò)解決辦法
AJAX(Asynchronous JavaScript and XML)是一種用于創(chuàng)建快速、動(dòng)態(tài)和交互式網(wǎng)頁的技術(shù),它的主要優(yōu)勢在于能夠在不刷新整個(gè)網(wǎng)頁的情況下與服務(wù)器進(jìn)行數(shù)據(jù)交互,這篇文章主要給大家介紹了關(guān)于常見Ajax下載文件方式以及報(bào)錯(cuò)解決辦法的相關(guān)資料,需要的朋友可以參考下
2024-01-01
在JavaScript中使用高階函數(shù)的方法
JavaScript可以接受高階函數(shù)。這種處理高階函數(shù)的能力以及其他特點(diǎn)，使JavaScript成為非常適合函數(shù)式編程的編程語言之一，這篇文章主要介紹了如何在JavaScript中使用高階函數(shù),需要的朋友可以參考下
2022-09-09
D3.js實(shí)現(xiàn)繪制柱狀圖的教程詳解
這篇文章主要為大家詳細(xì)介紹了如何通過D3.js實(shí)現(xiàn)繪制柱狀圖，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)D3.js有一定的幫助，需要的可以參考一下
2022-11-11
用純JS實(shí)現(xiàn)二級菜單效果
這篇文章主要為大家詳細(xì)介紹了用純JS實(shí)現(xiàn)二級菜單效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-04-04
微信小程序?qū)崿F(xiàn)手機(jī)獲取驗(yàn)證碼倒計(jì)時(shí)60s
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)手機(jī)獲取驗(yàn)證碼后倒計(jì)時(shí)60s，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-05-05
如何在CocosCreator里畫個(gè)炫酷的雷達(dá)圖
這篇文章主要介紹了如何在CocosCreator里畫個(gè)炫酷的雷達(dá)圖，對Graphics感興趣的同學(xué)，一定要看看，并且把代碼實(shí)踐一下
2021-04-04
jQuery實(shí)現(xiàn)為控件添加水印文字效果(附源碼)
這篇文章主要介紹了jQuery實(shí)現(xiàn)為控件添加水印文字效果的方法,涉及jQuery插件jquery.tinywatermark.js的使用技巧,并提供了源碼供讀者下載參考,需要的朋友可以參考下
2015-12-12