前端学习(三十七) JavaScript预习课程document(javaScript)

doucment,代表当前这个文档

我们可以通过,循环输出查看页面到底有哪些成员

for(var x in document)

    document.write(x+"<br />")

document.image    //此时,输出的[object HTMLCollection],代表是一个对象(object),而collection表示这个是一个容器也就是数组

甚至,我们可以通过document.image[0].src,查看第一张图片的地址

document.getElementsByName("xxx"):获取name为xxx的元素;

document.getElementsById("xxx"):获取id为xxx的元素;

示例循环显示图片

    <script>
        var image=[];    //定义了一个数组,用于存放图片
        var index=1;    //循环的值
        window.onload=function () {    //页面加载完毕立即执行
            for (var i=0;i<6;i++){    //通过for循环将图片取出并存放在数组images中
                image[i]=new Image();    //这一步要注意,定义一个Image对象,
                var a=parseInt(i);    //这三步是将两个数字相加,并不是连接
                var b=parseInt(1);
                var sum=a+b;
                image[i].src="images/"+sum+".png";    //其实图片的命名已经确认好了
            }
            console.log(image.length);
           var time=setInterval('showx()',1000);
        };
        function showx() {
            document.getElementById("image").src=image[index].src;
            index=(index+1)%image.length;    //这一步是循环的关键,通过不断的赋值index,获取到不同的图片
        }

    </script>

这边对于取余又不是很理解了,10%3,那么余是1,但是4%6,是多少,查了下,4%6?是0.666666,但是整数部分是0,所以是,4%6=0余6

图像

image对象src可以写入也就是放入图片,所以可以创建image()对象来提前存储图片,但是图片的载入显示是需要网络支持的如果网速慢等原因可能会导致图片显示的很慢,所以这边就有了一个函数,image的onload()事件这个事件表明了图片装载完成才会触发

猜你喜欢

转载自blog.csdn.net/zy21131437/article/details/81061278