时间戳

首页 > 解决方案 > 为什么我不能使用第一个代码移动图片？

javascript - 为什么我不能使用第一个代码移动图片？

问题描述

有人看到下面两个代码块之间有什么区别吗？第一个根本不运行，第二个完美运行。为什么会这样？

    <title></title>

    <style type="text/css">

        #stones_image {
            /*border: 1px solid red;*/
            left: 0;
        }

    </style>

</head>

<body onload="set_timer()">
    <img src="pics/stones.png" id="stones_image">

    <script type="text/javascript">
        var the_timer, x_position = 0, the_image;

        function set_timer() {
            the_image=document.getElementById("stones_image");
            x_position=x_position+1;
            the_image.style.left=x_position;
            the_timer = setTimeout(set_timer, 50);
        }

    </script>

和有效的代码：

<head>
    <script>
        var the_timer, x_position = 0, the_image;

        function set_timer() {
            the_image=document.getElementById("stones_image");
            x_position=x_position+1;
            the_image.style.left=x_position;
            the_timer = setTimeout(set_timer, 50);
        }
    </script>
</head>
<body onload="set_timer()">
    <img src="stones.png" id="stones_image"
         style="position:absolute; left:0">
</body>

标签： javascript

解决方案

在第一个代码中，你从不调用set_timer函数，所以它永远不会被执行。

在第二个代码中，set_timer在文档加载时调用（使用<body onload="set_timer">，所以它可以工作。

推荐阅读