堆栈内存溢出
  繁体   English   中英

将JavaScript与HTML分开是行不通的

[英]Separating JavaScript from HTML doesn't work

 原文  2015-08-16 20:30:20  6   3    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 个解决方案

解决方案1
 0  2015-08-16 20:57:23

将此添加到您的js文件中： document.getElementById ("myCanvas").addEventListener ("click", bounce, false); 并将其保留在canevas标记中，并删除onclick="bounce()" 。

此外，你忘了</body>之前</html>

解决方案2
 0  2015-08-16 20:58:30

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

解决方案3
 0 已采纳  2015-08-16 22:01:36

麻烦的是，您以前是这样定义画布的： 

<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;

实际上，最好在$(document).ready()函数之外定义函数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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 将Javascript与HTML分开 Javascript在html中不起作用 从HTML调用JavaScript函数不起作用 从html调用javascript函数不起作用 从html文件调用javascript文件根本不起作用 在Ionic应用程序中分离服务不起作用 如果语句在JavaScript中不起作用 - HTML Javascript在html文件中不起作用 html重置不适用于javascript onclick/Button 在 Javascript/HTML 中不起作用
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM