JS运动基础框架实例分析

2024-05-06 14:45:15

字体：大中小

来源：转载

供稿：网友

本文实例讲述了JS运动基础框架。分享给大家供大家参考。具体分析如下：

这里需要注意：

1. 在开始运动时关闭已有的定时器
2. 把运动和停止隔开
代码如下:<!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);//这里首先要关闭一个定时器，这是因为解决在运动过程中多次点击按钮从而产生多个定时器叠加的bug
                    time=setInterval(function(){
                        var speed=7;
                        if(oDiv.offsetLeft<=600)