Question

我无法在公共网页上使用此功能。我确保文件的所有权限都是正确的，但是当我访问该网站时，它只显示一个空白页面。它应该具有类似矩阵的效果。我通过Codepen.io编辑它，但是当我将它转移到实际文件并上传它们时，没有任何作用。

HTML：

<html><head>

<script src="(link the js file attached that is in the directory of my webpage)" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <meta charset="utf-8">
    <title>Matrix</title>
</head>
<body>
    <div align="center">
    <canvas id="canvas" width="500" height="500">
    </canvas><br/><br/>  
    </div>   
</body>
</html>

JavaScript的：

//this is my matrix.js file

$(document).ready(function(){
var s=window.screen;
var width = canvas.width=s.width;
var height = canvas.height;
var inLink = false;
var yPositions = Array(300).join(0).split('');
var context=canvas.getContext('2d');
var draw = function () {
   context.fillStyle='rgba(0,0,0,.05)';
   context.fillRect(0,0,width,height);
context.fillStyle='#0F0';
canvas.addEventListener("click", on_click, false);
canvas.addEventListener("mousemove", on_mousemove, false);
context.fillText(linkText,10,50);
context.font = '12pt Georgia';
yPositions.map(function(y, index){
text = String.fromCharCode(1e3+Math.random()*33);//determines characters randomly from this specific font
x = (index * 10)+10;
canvas.getContext('2d').fillText(text, x, y);
if(y > 100 + Math.random()*1e4)
{
  yPositions[index]=0;
}
else
{
  yPositions[index] = y + 10;
}
});
};
RunMatrix();
function RunMatrix()
{
   if(typeof Game_Interval != "undefined") clearInterval(Game_Interval);
    Game_Interval = setInterval(draw, 33);
 }
 })

Answer 1

您必须在之后包含您的javascript文件

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script src="(link the js file attached that is in the directory of my webpage)" type="text/javascript"></script>

另外，请考虑使用较新版本的jQuery

Answer 2

尝试添加...

var canvas = document.getElementById('canvas');

在你的$（文件）.ready函数的开头......

$(document).ready(function(){
 var canvas = document.getElementById('canvas');
....

基本上你引用的是'canvas'，它似乎还不存在......

还要确保在尝试使用它的任何库或脚本之前包含jquery！

为什么我的HTML和JS不起作用？

2 个答案: