想测试一下老师讲的ball.html的动画效果，但是不知道怎么弄？（我是win10系统）求解答
如下是我的代码
<!DOCTYPE html>
<html>
<head>
<title>Promise animation</title>
<style type="text/css">
.ball{
width: 40px;
height: 40px;
border-radius: 20px;
}
.ball1{
background: red;
}
.ball2{
background: yellow;
}
.ball3{
background: green;
}
</style>
</head>
<body>
<div class="ball ball1" style="margin-left:0"></div>
<div class="ball ball2" style="margin-left:0"></div>
<div class="ball ball2" style="margin-left:0"></div>
<script type="text/javascript">
</script>
var ball1 = document.querySelector('.ball1')
var ball2 = document.querySelector('.ball2')
var ball3 = document.querySelector('.ball3')
function animate(ball,distance,cb){
setTimeout(function(){
var marginLeft = parseInt(ball.style.marginLeft,10)
if(marginLeft === distance){
cb && cb()
}
else{
if(marginLeft<distance){
marginLeft++
}
else{
marginLeft--
}
ball.style.marginLeft = marginLeft
animate(ball,distance,cb)
}
},13)
}
animate(ball1,100,function(){
animate(ball2,200,function(){
animate(ball3,300,function())
})
})
</body>
</html>我是node ball.js命令启动服务器的，访问地址是：http://localhost:8080/，但是访问之后总是出现如下错误
D:\imooc\promise>node ball.js
Server running at http://127.0.0.1:8080/
D:\imooc\promise\ball.js:15
path.exists(pathname,function(exists){
^
TypeError: path.exists is not a function
at Server.<anonymous> (D:\imooc\promise\ball.js:15:7)
at emitTwo (events.js:87:13)
at Server.emit (events.js:172:7)
at HTTPParser.parserOnIncoming [as onIncoming] (_http_server.js:533:12)
at HTTPParser.parserOnHeadersComplete (_http_common.js:103:23)ball.js 的源码如下
var http = require('http')
var url = require('url')
var path = require('path')
var fs = require('fs')
http.createServer(function (req, res) {
var pathname=__dirname+url.parse(req.url).pathname;
if (path.extname(pathname)=="") {
pathname+="/";
}
if (pathname.charAt(pathname.length-1)=="/"){
pathname+="index.html";
}
path.exists(pathname,function(exists){
if(exists){
switch(path.extname(pathname)){
case ".html":
res.writeHead(200, {"Content-Type": "text/html"});
break;
case ".js":
res.writeHead(200, {"Content-Type": "text/javascript"});
break;
case ".css":
res.writeHead(200, {"Content-Type": "text/css"});
break;
case ".gif":
res.writeHead(200, {"Content-Type": "image/gif"});
break;
case ".jpg":
res.writeHead(200, {"Content-Type": "image/jpeg"});
break;
case ".png":
res.writeHead(200, {"Content-Type": "image/png"});
break;
default:
res.writeHead(200, {"Content-Type": "application/octet-stream"});
}
fs.readFile(pathname,function (err,data){
res.end(data);
});
} else {
res.writeHead(404, {"Content-Type": "text/html"});
res.end("<h1>404 Not Found</h1>");
}
});
}).listen(8080, "127.0.0.1");
console.log("Server running at http://127.0.0.1:8080/");
星辰Iron浏览 1730回答 1
1回答
-
OlderSkee
你的代码里有几个小错误。。分别在，31行 ，35行，46行，59行。<!DOCTYPE html><html><head> <title>Promise animation</title> <style type="text/css"> .ball{ width: 40px; height: 40px; border-radius: 20px; } .ball1{ background: red; } .ball2{ background: yellow; } .ball3{ background: green; } </style></head><body><div class="ball ball1" style="margin-left:0"></div><div class="ball ball2" style="margin-left:0"></div><div class="ball ball2" style="margin-left:0"></div><script type="text/javascript"> var ball1 = document.querySelector('.ball1') var ball2 = document.querySelector('.ball2') var ball3 = document.querySelector('.ball3')function animate(ball,distance,cb){setTimeout(function(){var marginLeft = parseInt(ball.style.marginLeft,10)if(marginLeft === distance){cb && cb()}else{if(marginLeft<distance){marginLeft++}else{marginLeft--}ball.style.marginLeft = marginLeft+"px";animate(ball,distance,cb)}},13)}animate(ball1,100,function(){ animate(ball2,200,function(){ animate(ball3,300,function(){ })})})</script></body></html>对照下你自己的。再复制过去试试
随时随地看视频慕课网APP
相关分类
Node.js