JS 操作 CSS は Web ページの背景をランダムに変更して、ideas_javascript スキルを達成します

今日、友人が weibo で、ページが更新されるたびに JS と CSS を使用して背景画像をランダムに生成できないかと尋ねました。もちろん、私の答えは「はい」です。具体的には、次のようにすることができます:
1. JS を使用して、ランダムに表示する画像を格納する画像配列を定義します

コードをコピーします コードは次のとおりです:

var imgArr=["http://www.google.com.hk/intl/zh-CN/images/logo_cn.png",
"http://www.baidu.com/img/baidu_sylogo1.gif"、
"http://www.open-open.com/news/uploadImg/20120111/20120111081906_79.jpg"、
"http://www.open-open.com/news/uploadImg/20120111/20120111081906_76.jpg"
];

ここで、ランダムに 4 枚の写真を見つけました。
2. JS を使用して乱数を生成します。もちろん、この乱数は 0 から始まり、imgArr.length-1 で終わります。

コードをコピーします。 コードは次のとおりです。

var index =parseInt(Math.random()*(imgArr.length-1));

このようにして、現在のランダム生成画像を取得します。

コードをコピー コードは次のとおりです。

var currentImage=imgArr[index];

3. 背景画像がランダムに生成されるので、この画像を背景画像として使用します。

コードをコピー コードは次のとおりです:

document.getElementById("BackgroundArea")。 style.backgroundImage ="url(" currentImage ")";

これはデモなので、ページ上に ID BackgroundArea を持つ div を定義し、この div にランダムな背景も設定しました。

コードをコピー コードは次のとおりです: