<!DOCTYPE html>  

<html>  

    <head>  

        <meta charset="utf-8">  

        <title></title>  

        <style type="text/css">  

            #div1{  

                width: 200px;  

                height: 200px;  

                background: red;  

                position: absolute;  

                left:0;  

                top:60px;  

            }  

        </style>  

        <script type="text/javascript">  

            window.onload=function(){  

                var oDiv=document.getElementById("div1");  

                var oBt=document.getElementsByTagName('input')[0];  

                var time=null;  

                oBt.onclick=function(){  

                    clearInterval(time);//這里首先要關(guān)閉一個(gè)定時(shí)器，這是因?yàn)榻鉀Q在運(yùn)動(dòng)過(guò)程中多次點(diǎn)擊按鈕從而產(chǎn)生多個(gè)定時(shí)器疊加的bug  

                    time=setInterval(function(){  

                        var speed=7;  

                        if(oDiv.offsetLeft<=600)  

                        oDiv.style.left=oDiv.offsetLeft+speed+'px';  

                        else{  

                            clearInterval(time);  

                        }  

                    },30);  

                }  

            }  

        </script>  

    </head>  

    <body>  

        <input type="button" value="開(kāi)始運(yùn)動(dòng)" />  

        <div id="div1"></div>  

    </body>  

</html>