从html页面中删除js脚本
[英]removing the js script from html page
问题描述
<!DOCTYPE html5> <html> <head> <title>disturbed</title> <script> window.onload = function() { // create the canvas var canvas = document.createElement("canvas"), c = canvas.getContext("2d"); var particles = {}; var particleIndex = 0; var particleNum = 15; // set canvas size canvas.width = window.innerWidth; canvas.height = window.innerHeight; // add canvas to body document.body.appendChild(canvas); // style the canvas c.fillStyle = "black"; c.fillRect(0, 0, canvas.width, canvas.height); function Particle() { this.x = canvas.width / 2; this.y = canvas.height / 2; this.vx = Math.random() * 10 - 5; this.vy = Math.random() * 10 - 5; this.gravity = 0.3; particleIndex++; particles[particleIndex] = this; this.id = particleIndex; this.life = 0; this.maxLife = Math.random() * 30 + 60; this.color = "hsla(" + parseInt(Math.random() * 360, 10) + ",90%,60%,0.5"; } Particle.prototype.draw = function() { this.x += this.vx; this.y += this.vy; if (Math.random() < 0.1) { this.vx = Math.random() * 10 - 5; this.vy = Math.random() * 10 - 5; } this.life++; if (this.life >= this.maxLife) { delete particles[this.id]; } c.fillStyle = this.color; //c.fillRect(this.x, this.y, 5, 10); c.beginPath(); c.arc(this.x, this.y, 2.5, 0, 2 * Math.PI); c.fill(); }; setInterval(function() { //normal setting before drawing over canvas w/ black background c.globalCompositeOperation = "source-over"; c.fillStyle = "rgba(0,0,0,0.5)"; c.fillRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < particleNum; i++) { new Particle(); } // c.globalCompositeOperation = "darken"; for (var i in particles) { particles[i].draw(); } }, 30); }; </script> </head> <body> </body> </html>
下面的代码都是正确的，但是我只想将其密集两个，以使其更容易而不是填充。 我想要做的是将我拥有的脚本放入一个单独的文件中，例如“ anything.js”，这样我就可以通过在window.onload =中调用诸如粒子（）之类的主要功能，将其加载到html主文件中。 function（）将在主页上。 原因是因为我想将此脚本添加到许多html页面，并且我不想一次又一次将所有冗长的脚本复制到我的代码中。 请回答这个问题，那将是非常有益的。
2 个解决方案
解决方案1
2 2018-09-20 13:49:45
HTML：
<!DOCTYPE html5>
<html>
<head>
<title>disturbed</title>
</head>
<body>
<script src="toto.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function() {
Particle();
};
</script>
</body>
</html>
toto.js：
//create the canvas
var canvas = document.createElement("canvas"),
c = canvas.getContext("2d");
var particles = {};
var particleIndex = 0;
var particleNum = 15;
// set canvas size
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// add canvas to body
document.body.appendChild(canvas);
// style the canvas
c.fillStyle = "black";
c.fillRect(0, 0, canvas.width, canvas.height);
function Particle() {
this.x = canvas.width / 2;
this.y = canvas.height / 2;
this.vx = Math.random() * 10 - 5;
this.vy = Math.random() * 10 - 5;
this.gravity = 0.3;
particleIndex++;
particles[particleIndex] = this;
this.id = particleIndex;
this.life = 0;
this.maxLife = Math.random() * 30 + 60;
this.color = "hsla(" + parseInt(Math.random() * 360, 10) + ",90%,60%,0.5";
}
Particle.prototype.draw = function() {
this.x += this.vx;
this.y += this.vy;
if (Math.random() < 0.1) {
this.vx = Math.random() * 10 - 5;
this.vy = Math.random() * 10 - 5;
}
this.life++;
if (this.life >= this.maxLife) {
delete particles[this.id];
}
c.fillStyle = this.color;
//c.fillRect(this.x, this.y, 5, 10);
c.beginPath();
c.arc(this.x, this.y, 2.5, 0, 2 * Math.PI);
c.fill();
};
setInterval(function() {
//normal setting before drawing over canvas w/ black background
c.globalCompositeOperation = "source-over";
c.fillStyle = "rgba(0,0,0,0.5)";
c.fillRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < particleNum; i++) {
new Particle();
}
// c.globalCompositeOperation = "darken";
for (var i in particles) {
particles[i].draw();
}
}, 30);
解决方案2
1 2018-09-20 13:09:58
我看到您遇到范围问题。
变量在脚本之间传递。 但是，在您的情况下，您在window.onload内部声明了Particle ，因此只能在其中定义它，而不能在其他地方使用它。
将脚本导出到单独文件中的正确方法是在整个脚本的范围内声明“ Particle ”，如下所示：
// anything.js
function Particle() {
...
}
请注意，您需要进行一些重写，因为我可以看到您在Particle的代码中使用了canvas变量（仅在window.onload的范围内定义）。
使用 JS 正则表达式从 html 中删除所有脚本标签
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.