在JavaScript实现简单的汽车移动动画

Javascript是一种非常通用的语言，从编程机器人到制作交互式网站Javscript几乎遍布各地，但最有趣的使用是制作动画，是的，您可以使用Javascript制作有吸引力的动画。

在本教程中，我们将学习如何使用Javascript制作移动汽车动画，但首先我们将向您介绍setInterval（），该方法用于在指定的时间间隔内一次又一次地调用特定函数

setInterval（）是一个javscript方法，用于在指定的时间间隔内一次又一次调用特定的函数，setInterval（）的语法如下所示

setInterval（函数名称，以ms为单位）

现在我们将设计一款像看起来的结构（请不要指望法拉利）使用HTML和CSS的汽车。首先在计算机中的某个地方创建一个文件夹，并在其中创建三个新文件命名car.html，style.css和animation.js

现在在car.html中输入以下HTML代码

现在打开你的style.css文件并输入下面的代码

.wheel{

width:50px;

height:50px;

border-radius:100%;

background:black;

margin:-20px 10px 0 10px

}

.flt-left{

float:left;

}

.flt-right{

float:right;

}

.clear{

clear:both

}

.car{

width:250px

}

.car-head{

width:60%;

margin:auto;

background:red;

height:70px;

}

.car-bottom{

width:100%;

margin:auto;

background:red;

height:50px;

}

现在打开你的car.html文件，你会得到一个甜美和简单的汽车出现在你的屏幕上，它可能看起来像下面所示

但现在我们的车没有发动机，所以我们来为它编写引擎。打开你的animation.js文件，并在其中键入以下Javascript代码。

var car = document.getElementsByClassName("car");

var leftOffset = 0;

function move(){

car[0].style.marginLeft = leftOffset+"px";

leftOffset += 5;

if(leftOffset > 500){

leftOffset = 0;

}

};

setInterval(move,30);

上面的代码具有限定容器的大小leftOffse函数移动车和在每次调用它递增的值左偏移5像素，并且通过使用setInterval函数我们要求在每30毫秒的移动功能。现在打开你的car.html，hurray！你的车正在移动

谢谢你的阅读。

了解更多资讯请关注微信公众号：芒果web 或者微信搜索（javascriptes6）

将您的查询和反馈发送到我们的微信公众号或在我们的QQ群460582514讨论。您也可以在下面评论您的问题。

另外，别忘了订阅我们。

如果你喜欢这篇文章，那么请分享一下，帮助我们成长。