将JavaScript与HTML分开不起作用

时间：2015-08-16 20:30:21

标签： javascript html

我正在尝试将我的JavaScript与HTML分开，但它似乎并不想工作。以下是组合代码：

<script type="text/javascript">
var width = 100;
var height = 200;

function Ball(){
    // random radius
    this.radius = Math.floor(Math.random()*(10-5+1))+5;

    // random x and y
    this.x = Math.floor(Math.random()*(width-this.radius+1))+this.radius;
    this.y = Math.floor(Math.random()*(width-this.radius+1))+this.radius;

    // random direction, +1 or -1
    this.dx = Math.floor(Math.random()*2) * 2 - 1;
    this.dy = Math.floor(Math.random()*2) * 2 - 1;

    //random colour, r, g or b
    var rcol = Math.floor(Math.random()*3);
    this.col = rcol==0 ? "red" :
               rcol==1 ? "blue" : "green";
}

// create an array of balls
numBalls = 10;
var balls = new Array(numBalls);
for(i= 0 ; i < numBalls ; i++){
   balls[i] = new Ball();
}

// draw the balls on the canvas
function draw(){
  var canvas = document.getElementById("myCanvas");

  // check if supported
  if(canvas.getContext){

    var ctx=canvas.getContext("2d");

    //clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.globalAlpha = 0.5;
    ctx.strokeStyle="black";

    // draw each ball
    for(i = 0; i < numBalls ; i++){
      var ball = balls[i];
      ctx.fillStyle=ball.col;
      ctx.beginPath();

      // check bounds
      // change direction if hitting border
      if(ball.x<=ball.radius ||
         ball.x >= (width-ball.radius)){
        ball.dx *= -1;
      }
      if(ball.y<=ball.radius ||
         ball.y >= (height-ball.radius)){
        ball.dy *= -1;
      }

      // move ball
      ball.x += ball.dx;
      ball.y += ball.dy;

      // draw it
      ctx.arc(ball.x, ball.y, ball.radius, 0, 2*Math.PI, false);
      ctx.stroke();
      ctx.fill();
    }
  }
  else{
    //canvas not supported
  }
}

// calls draw every 10 millis
function bounce(){
    setInterval(draw, 10);
}
</script>
<canvas id="myCanvas" width="100" height="200" style="border-style:solid;border-width:1px" onclick="bounce()">
Canvas not supported.</canvas>

但是当我将它分成单独的html和javascript文件时，如此：

<!DOCTYPE html>
<html>

<head>
    <title>NodeJS, Socket.IO</title>
    <!-- reference to the JQuery library -->
    <script type="text/javascript" src="./js/jquery-2.1.4.min.js"></script>
    <!-- our javascript file -->
    <script type="text/javascript" src="./js/script.js"></script>
    <!-- our css file -->

</head>

<body>

    <canvas id="myCanvas" width="100" height="200" style="border-style:solid;border-width:1px">
Canvas not supported.</canvas>


</html>

和

$(document).ready(function() {

var width = 100;
var height = 200;

function Ball(){
    // random radius
    this.radius = Math.floor(Math.random()*(10-5+1))+5;

    // random x and y
    this.x = Math.floor(Math.random()*(width-this.radius+1))+this.radius;
    this.y = Math.floor(Math.random()*(width-this.radius+1))+this.radius;

    // random direction, +1 or -1
    this.dx = Math.floor(Math.random()*2) * 2 - 1;
    this.dy = Math.floor(Math.random()*2) * 2 - 1;

    //random colour, r, g or b
    var rcol = Math.floor(Math.random()*3);
    this.col = rcol==0 ? "red" :
               rcol==1 ? "blue" : "green";
}

// create an array of balls
numBalls = 10;
var balls = new Array(numBalls);
for(i= 0 ; i < numBalls ; i++){
   balls[i] = new Ball();
}

// draw the balls on the canvas
function draw(){
  var canvas = document.getElementById("myCanvas");

  // check if supported
  if(canvas.getContext){

    var ctx=canvas.getContext("2d");

    //clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.globalAlpha = 0.5;
    ctx.strokeStyle="black";

    // draw each ball
    for(i = 0; i < numBalls ; i++){
      var ball = balls[i];
      ctx.fillStyle=ball.col;
      ctx.beginPath();

      // check bounds
      // change direction if hitting border
      if(ball.x<=ball.radius ||
         ball.x >= (width-ball.radius)){
        ball.dx *= -1;
      }
      if(ball.y<=ball.radius ||
         ball.y >= (height-ball.radius)){
        ball.dy *= -1;
      }

      // move ball
      ball.x += ball.dx;
      ball.y += ball.dy;

      // draw it
      ctx.arc(ball.x, ball.y, ball.radius, 0, 2*Math.PI, false);
      ctx.stroke();
      ctx.fill();
    }
  }
  else{
    //canvas not supported
  }
}

// calls draw every 10 millis
function bounce(){
    setInterval(draw, 10);
}

});

它不起作用。任何帮助将不胜感激！

3 个答案:

答案 0 :(得分：0)

将此添加到您的js文件中：document.getElementById ("myCanvas").addEventListener ("click", bounce, false);  如果你把它留在了canevas标签中，请删除onclick="bounce()"。

此外，您忘记了</body>之前的</html>。

答案 1 :(得分：0)

我认为问题在于您将所有代码包装在$(document).ready中。如果您不需要使用内联脚本，那么在使用外部脚本时也应该没有它。

答案 2 :(得分：0)

麻烦的是，您曾经将画布定义如下：

<canvas id="myCanvas" width="100" height="200" style="border-style:solid;border-width:1px"
 onclick="bounce()">
Canvas not supported.</canvas>

现在它定义如下：

<canvas id="myCanvas" width="100" height="200" style="border-style:solid;border-width:1px">
Canvas not supported.</canvas>

请注意，新HTML文件中缺少onclick="bounce()"。那不是问题！实际上最好不要内联事件处理程序。要使script.js文件与新HTML一起使用，请对其进行更改，以使前几行看起来像这样：

$(document).ready(function() {

$('#myCanvas').click(bounce);

var width = 100;
var height = 200;

实际上，在Ball()函数之外定义函数draw()，bounce()和$(document).ready()会更好。然后你会写这个：

var width = 100,
    height = 200,
    numBalls = 10,
    balls;

$(document).ready(function() {

  $('#myCanvas').click(bounce);

  // create an array of balls
  balls = new Array(numBalls);
  for(i = 0 ; i < numBalls ; i++){
     balls[i] = new Ball();
  }

});

这是一个片段，其中包含我建议修改的整个JavaScript文件：

var width = 100,
    height = 200,
    numBalls = 10,
    balls;

$(document).ready(function() {

  $('#myCanvas').click(bounce);

  // create an array of balls
  balls = new Array(numBalls);
  for(i = 0 ; i < numBalls ; i++){
     balls[i] = new Ball();
  }

});

function Ball(){
    // random radius
    this.radius = Math.floor(Math.random()*(10-5+1))+5;

    // random x and y
    this.x = Math.floor(Math.random()*(width-this.radius+1))+this.radius;
    this.y = Math.floor(Math.random()*(width-this.radius+1))+this.radius;

    // random direction, +1 or -1
    this.dx = Math.floor(Math.random()*2) * 2 - 1;
    this.dy = Math.floor(Math.random()*2) * 2 - 1;

    //random colour, r, g or b
    var rcol = Math.floor(Math.random()*3);
    this.col = rcol==0 ? "red" :
               rcol==1 ? "blue" : "green";
}

// draw the balls on the canvas
function draw(){
  var canvas = document.getElementById("myCanvas");

  // check if supported
  if(canvas.getContext){

    var ctx=canvas.getContext("2d");

    //clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.globalAlpha = 0.5;
    ctx.strokeStyle="black";

    // draw each ball
    for(i = 0; i < numBalls ; i++){
      var ball = balls[i];
      ctx.fillStyle=ball.col;
      ctx.beginPath();

      // check bounds
      // change direction if hitting border
      if(ball.x<=ball.radius ||
         ball.x >= (width-ball.radius)){
        ball.dx *= -1;
      }
      if(ball.y<=ball.radius ||
         ball.y >= (height-ball.radius)){
        ball.dy *= -1;
      }

      // move ball
      ball.x += ball.dx;
      ball.y += ball.dy;
      
      // draw it
      ctx.arc(ball.x, ball.y, ball.radius, 0, 2*Math.PI, false);
      ctx.stroke();
      ctx.fill();
    }
  }
  else{
    //canvas not supported
  }
}

// calls draw every 10 millis
function bounce(){
    setInterval(draw, 10);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<canvas id="myCanvas" width="100" height="200" style="border-style:solid;border-width:1px"> Canvas not supported.</canvas>

相关问题
最新问题