网页中JS函数自动执行的方法

最新推荐文章于 2024-01-18 14:58:21 发布

阿鑫君_ty

最新推荐文章于 2024-01-18 14:58:21 发布

阅读量594

点赞数

分类专栏： javaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_34807258/article/details/74452206

版权

javaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

网页中JS函数自动执行的三种方法

实现网页中的图片轮播要求：
在页面中显示一组图片，默认显示第一张，每隔n秒换一张图片

在body标签中使用onload<body onload="method()">

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图片轮播</title>
    <script type="text/javascript">
       function start() {
           var img01 = document.getElementById("img01");
           var ary = ["1.jpeg", "2.jpeg", "3.jpeg", "4.jpeg",
               "5.jpeg", "6.jpeg" ];
           var index = 0;
           window.setInterval(function(){
               img01.src = "images/" + ary[index++%ary.length];
               //0 1 2 3 4 5, 6 7 8 9  ...
               //0 1 2 3 4 5  0 1 2 3 ...
           }, 2000)
       }

    </script>
</head>
<body onload="start()">
    <h1>图片轮播</h1>
<img id="img01" src="img/1.jpeg" height="500" />
</body>
</html>

在脚本中使用window.onload

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图片轮播</title>
    <script type="text/javascript">
       window.onload= function start() {
           var img01 = document.getElementById("img01");
           var ary = ["1.jpeg", "2.jpeg", "3.jpeg", "4.jpeg",
               "5.jpeg", "6.jpeg" ];
           var index = 0;
           window.setInterval(function(){
               img01.src = "images/" + ary[index++%ary.length];
               //0 1 2 3 4 5, 6 7 8 9  ...
               //0 1 2 3 4 5  0 1 2 3 ...
           }, 2000)
       }

    </script>
</head>
<body >
    <h1>图片轮播</h1>
<img id="img01" src="img/1.jpeg" height="500" />
</body>
</html>

在页面先声明在页面底部调用方法
浏览器是从上到下依次加载并解析页面的，所以加载到head时，body并没有被解析，浏览器会等到js执行完成之后再加载页面，所以方法的执行要放在页面底端。
如果直接在head中的script中直接加入start()，那么img01=null


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片轮播</title>
<style type="text/css">
div {
    margin: 0 auto;
    text-align: center;
}
</style>
<script type="text/javascript">
function start(){
    var img01 = document.getElementById("img01");
    var ary = ["1.jpeg", "2.jpeg", "3.jpeg", "4.jpeg", 
                                "5.jpeg", "6.jpeg" ];
    var index = 0;

    window.setInterval(function(){

        img01.src = "images/" + ary[index++%ary.length]; 
                        //0 1 2 3 4 5, 6 7 8 9  ...
                        //0 1 2 3 4 5  0 1 2 3 ...

    }, 2000)
}
</script>
</head>
<body>
    <div>
        <h1>图片轮播</h1>
        <img id="img01" src="images/1.jpeg" height="500" />
    </div>
</body>
</html>
<script type="text/javascript">
start();
</script>