如下是我的代码<!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/");
1 回答
已采纳
OlderSkee
TA贡献123条经验 获得超103个赞
你的代码里有几个小错误。。
分别在，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>
对照下你自己的。再复制过去试试
点击展开后面1条
- 1 回答
- 0 关注
- 1729 浏览
添加回答
举报
0/150
提交
取消