Play with js settings to randomly switch background images-JS Tutorial-php.cn

Play with js settings to randomly switch background images

小云云

Release： 2017-12-22 10:01:08

Original

1727 people have browsed it

The function of js should not be underestimated. If you want to develop something well, js will greatly increase your score. This article will bring you a simple example of js setting to randomly switch background images. The editor thinks it is quite good, so I will share it with you now and give it as a reference for everyone. Let’s follow the editor to take a look, I hope it can help everyone.

The examples are as follows:

<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>

Copy after login

The code looks very simple, I wonder if you have mastered it? Hurry up and give it a try.

Related recommendations:

JS method of randomly switching background images on web pages_javascript skills

CSS implementation of switching backgrounds by mouse passing through links Image example code_html/css_WEB-ITnose

IE6 a tag switching background image cannot take effect immediately_html/css_WEB-ITnose

The above is the detailed content of Play with js settings to randomly switch background images. For more information, please follow other related articles on the PHP Chinese website!