Javascript是一种非常通用的语言，从编程机器人到制作交互式网站Javscript几乎遍布各地，但最有趣的使用是制作动画，是的，您可以使用Javascript制作有吸引力的动画。
在本教程中，我们将学习如何使用Javascript制作移动汽车动画，但首先我们将向您介绍setInterval（），该方法用于在指定的时间间隔内一次又一次地调用特定函数
setInterval（）是一个javscript方法，用于在指定的时间间隔内一次又一次调用特定的函数，setInterval（）的语法如下所示
setInterval（函数名称，以ms为单位）
现在我们将设计一款像看起来的结构（请不要指望法拉利）使用HTML和CSS的汽车。首先在计算机中的某个地方创建一个文件夹，并在其中创建三个新文件命名car.html，style.css和animation.js
现在在car.html中输入以下HTML代码
<!DOCTYPE html>
<html>
<head>
<title>car</title>
</head>
<body>
<div class="car">
<div class="car-head"></div>
<div class="car-bottom"></div>
<div class="car-wheels">
<div calss="wheel flt-left"></div>
<div class="wheel flt-right"></div>
</div>
</div>
</body>
</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讨论。您也可以在下面评论您的问题。
另外，别忘了订阅我们。
如果你喜欢这篇文章，那么请分享一下，帮助我们成长。
