当我通过浏览器打开html页面时，为什么倒计时应用程序可以正常运行，但是当我使用http服务器时却不能正常运行？

Question

The app is fully functioning when I open the html file in my browser, but when I try and open it on localhost:3000 it only loads the html and doesn't pick up the css or javascript. 当我在浏览器中打开html文件时，该应用程序可以正常运行，但是当我尝试在localhost：3000上打开该文件时，该应用程序只会加载html，而不会提取CSS或javascript。

HTML: HTML：

<html>
  <head>
<link href="./main.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="del-countdown">
     <h1>THE SINGULARITY IS NEAR</h1>
     <div id="clock"></div>
      <div id="units">
       <span>Years</span>
       <span>Days</span>
       <span>Hours</span>
       <span>Minutes</span>
       <span>Seconds</span>
      </div>
    </div>
  <script src="../index.js"></script>
 </body>
</html>

CSS: CSS：

body{
  background: #282e3a;
  font-family: tahoma;
}
h1{
  color: #fff;
  text-align: center;
  font-size: 74px;
  letter-spacing: 10px;
  margin-bottom: 5px;
}
h3{
  color: #fff;
  text-align: center;
  font-size: 36px;
  letter-spacing: 5px;
  margin-top: 5px;
}
#del-countdown{
  width: 850px;
  margin: 15% auto;
}
#clock span{
  float: left;
  text-align: center;
  font-size: 84px;
  margin: 0 2%;
  color: #fff;
  padding: 20px;
  width: 16%;
  border-radius: 20px;
  box-sizing: border-box;
}
#clock span:nth-child(1){
  background: #696868;
}
#clock span:nth-child(2){
  background: #7D7C7C;
}
#clock span:nth-child(3){
  background: #9E9E9E;
}
#clock span:nth-child(4){
  background: #C4C4C4;
}
#clock span:nth-child(5){
  background: #D9D7D7;
}
#clock:after{
  content: "";
  display: block;
  clear: both;
}
#units span{
  float: left;
  width: 20%;
  text-align: center;
  margin-top: 30px;
  color: #ddd;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 2px;
  text-shadow: 1px 1px 1px rgba(10,10,10, 0.7);
}

span.turn{
  animation: turn 0.7s ease forwards;
}

@keyframes turn{
  0%{transform: rotateX(0deg)}
  100%{transform: rotateX(360deg)}
}

Index.js: Index.js：

function updateTimer(deadline){
  var time = deadline - new Date();
  return {
    'years': Math.floor( time/(1000*60*60*24*365) ),
    'days': Math.floor( time/(1000*60*60*24) % 365 ),
    'hours': Math.floor( (time/(1000*60*60)) % 24 ),
    'minutes': Math.floor( (time/1000/60) % 60 ),
    'seconds': Math.floor( (time/1000) % 60 ),
    'total' : time
  };
}


function animateClock(span){
  span.className = "turn";
  setTimeout(function(){
    span.className = "";
  },700);
}

function startTimer(id, deadline){
  var timerInterval = setInterval(function(){
    var clock = document.getElementById(id);
    var timer = updateTimer(deadline);

    clock.innerHTML = '<span>' + timer.years + '</span>'
                    + '<span>' + timer.days + '</span>'
                    + '<span>' + timer.hours + '</span>'
                    + '<span>' + timer.minutes + '</span>'
                    + '<span>' + timer.seconds + '</span>';

    //animations
    var spans = clock.getElementsByTagName("span");
    animateClock(spans[4]);
    if(timer.seconds == 59) animateClock(spans[3]);
    if(timer.minutes == 59 && timer.seconds == 59) animateClock(spans[2]);
    if(timer.hours == 23 && timer.minutes == 59 && timer.seconds == 59) animateClock(spans[1]);
    if(timer.days == 364 && timer.hours == 23 && timer.minutes == 59 && timer.seconds == 59) animateClock(spans[0]);

    //check for end of timer
    if(timer.total < 1){
      clearInterval(timerInterval);
      clock.innerHTML = '<span>0</span><span>0</span><span>0</span><span>0</span><span>0</span>';
    }


  }, 1000);
}


window.onload = function(){
  var deadline = new Date("January 01, 2045 00:00:01");
  startTimer("clock", deadline);
};

Server.js Server.js

var http = require('http')
var fs = require('fs')
var path = require('path')

//404 response
function send404Response(res) {
  res.writeHead(404, {"Content-Type": "text/plain"})
  res.write("Error 404: Page not found!")
  res.end()
}

//Handle user request
function onRequest(req, res) {
  if(req.method == 'GET' && req.url == '/') {
    res.writeHead(200, {"Content-Type": "text/html"})
    fs.createReadStream("./public/index.html").pipe(res)
  }
  else{
    send404Response(res)
  }
}

http.createServer(onRequest).listen(3000)
console.log("Server is now running...");

Answer 1

put the js and css file in a folder named pubilc. 将js和css文件放在名为pubilc的文件夹中。 And call app.use('/public',express.static(__dirname + '/public')); 并调用app.use('/public',express.static(__dirname + '/public')); Now add css and js src="/public/js" 现在添加css和js src="/public/js"

当我通过浏览器打开html页面时，为什么倒计时应用程序可以正常运行，但是当我使用http服务器时却不能正常运行？

问题描述

1 个解决方案

解决方案1
0 2016-11-11 04:58:41

当我通过浏览器打开html页面时，为什么倒计时应用程序可以正常运行，但是当我使用http服务器时却不能正常运行？

问题描述

1 个解决方案

解决方案1 0 2016-11-11 04:58:41

解决方案1
0 2016-11-11 04:58:41