自己运动的方块（JS）

最新推荐文章于 2021-12-06 21:24:46 发布

Shellin_F

最新推荐文章于 2021-12-06 21:24:46 发布

阅读量1.1k

点赞数

分类专栏： javascript 前端

本文链接：https://blog.csdn.net/Shellin_F/article/details/72734986

版权

前端同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

javascript

9 篇文章 0 订阅

订阅专栏

感觉自己最近也是石乐志了

什么都不记得了但是，我会学的很快的

今天就是上次说了那个方块用JS 写哎真的是很简单的东西觉得自己最近真的是诚惶诚恐

一个方块从左上到右下移动

就是用的是定时器 setinterval 连续的然后获取他的当前位置判断之后加10px

下面是代码：

HTML，css我就不写了 CSS上就是定位了一下

JS：

算了写上吧我怕自己忘了

HTML：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="mirrorPage.css" rel="stylesheet" />
    <script src="mirrorPage.js"></script>
</head>
<body>  
    <div id="content">
        <div id="face1"></div>
    </div>
    
</body>
</html>

CSS:

body {
    margin:0;
    padding:0;
}

#content {
    width:100px;
    height:100px;
    margin:100px auto;
    position:relative;
    background-color:#ff0000;
}
 
#face1 {
    position:absolute;
    width:10px;
    height:10px;
    top:0%;
    left:0%;
    background-color:#ffd800;
}

JS:

window.onload = function () {
    var dd = document.getElementById("face1"); 
    var time = setInterval(function () {
        if (dd.offsetLeft == 90) {
            clearInterval(time);
        }
        else {
            dd.style.left = dd.offsetLeft + 10 + "px";
            dd.style.top = dd.offsetTop + 10 + "px";
        }       
    }, 100);
   
}

行的问题都解决了一身轻松啊。下来就是自己学写一些小代码了。

哎，本想把我的那些垃圾代码都弄到GITHUB上，搞了半天GITHUB 放弃了

一个人的。。。