**关闭。**这个问题是not reproducible or was caused by typos。目前不接受答复。
此问题是由打印错误或无法再重现的问题引起的。虽然类似的问题可能是on-topic在这里,这一个是解决的方式不太可能帮助未来的读者。
12小时前关闭。
Improve this question
我想创建一个椒盐卷饼雨,我已经采取了代码从 www.example.com 。Codepen link,但是当我在本地执行它时,它不工作。有人能帮帮我吗
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page TEST</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='style.css'>
<script src='../main.js'></script>
</head>
<body>
<canvas id="canvas"></canvas>
<script src='../main.js'></script>
</body>
</html>
CSS
body {
margin: 0;
overflow: hidden;
background: #061928;
}/*# sourceMappingURL=style.css.map */
JS
$(document).ready(function() {
var canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
if(canvas.getContext) {
var ctx = canvas.getContext('2d');
var w = canvas.width;
var h = canvas.height;
var img = new Image();
img.src = "https://images.vexels.com/media/users/3/138154/isolated/preview/5d645814754f5509238ef242137b0fa3-oktoberfest-pretzel-cookie-illustration-by-vexels.png";
var init = [];
var maxParts = 1000;
for(var a = 0; a < maxParts; a++) {
init.push({
x: Math.random() * w,
y: Math.random() * h,
l: Math.random() * 30,
xs: -4 + Math.random() * 4 + 2,
ys: Math.random() * 10 + 10
})
}
var particles = [];
for(var b = 0; b < maxParts; b++) {
particles[b] = init[b];
}
function draw() {
ctx.clearRect(0, 0, w, h);
for(var c = 0; c < particles.length; c++) {
var p = particles[c];
ctx.drawImage(img, p.x, p.y, p.l, p.l); // draw image at particle's position
}
move();
}
function move() {
for(var b = 0; b < particles.length; b++) {
var p = particles[b];
p.x += p.xs;
p.y += p.ys;
if(p.x > w || p.y > h) {
p.x = Math.random() * w;
p.y = -20;
}
}
}
setInterval(draw, 30);
}
});
SCSS
/*# sourceMappingURL=style.css.map */
body {
margin: 0;
overflow: hidden;
background: #061928;
}
style.css.map
{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":";AACA;EACI,SAAA;EACA,gBAAA;EACA,mBAAA;ACCJ","file":"style.css"}
我安装了几次SASS,我清空了我的缓存,并调整了我的代码几次,但它不起作用。
1条答案
按热度按时间rryofs0p1#
最有可能是由于没有jquery导入到您的网站添加
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
到主js上面的html
看起来会是这样。
这里最重要的事情实际上比使它工作更重要,是你如何能够在未来自己解决这个问题。Chrome和其他网络浏览器通常都有开发工具,这将使解决这些问题变得更加容易。要在Chrome中打开开发工具,请按f12