Javascript 从原始演示页面配置html页面
我通过github进入rainyday.js，这是maroslaw在以下链接制作的一个很棒的javascript程序：。基本上，我试着拍摄他的演示页面和我自己的照片Javascript 从原始演示页面配置html页面,javascript,html,image,canvas,Javascript,Html,Image,Canvas,我通过github进入rainyday.js，这是maroslaw在以下链接制作的一个很棒的javascript程序：。基本上，我试着拍摄他的演示页面和我自己的照片city.jpg，并更改了适用的字段，以便我可以在本地运行它，最终在我自己的网站上运行，但只有图片加载，脚本本身没有开始运行。我对html和javascript非常陌生，因此我可能省略了一些非常简单的内容，但下面是演示代码的脚本： <script src="rainyday.js"></script>
city.jpg <script src="rainyday.js"></script>
<script>
function getURLParameter(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,''])[1].replace(/\+/g, '%20'))||null;
}
function demo() {
var image = document.getElementById('background');
image.onload = function () {
var engine = null;
var preset = getURLParameter('preset') || '1';
if (preset === '1') {
engine = new RainyDay({
element: 'background',
blur: 10,
opacity: 1,
fps: 30,
speed: 30
});
engine.rain([ [1, 2, 8000] ]);
engine.rain([ [3, 3, 0.88], [5, 5, 0.9], [6, 2, 1] ], 100);
} else if (preset === '2') {
engine = new RainyDay({
element: 'background',
blur: 10,
opacity: 1,
fps: 30,
speed: 30
});
engine.VARIABLE_GRAVITY_ANGLE = Math.PI / 8;
engine.rain([ [0, 2, 0.5], [4, 4, 1] ], 50);
} else if (preset === '3') {
engine = new RainyDay({
element: 'background',
blur: 10,
opacity: 1,
fps: 30,
speed: 30
});
engine.trail = engine.TRAIL_SMUDGE;
engine.rain([ [0, 2, 0.5], [4, 4, 1] ], 100);
}
};
image.crossOrigin = 'anonymous';
if (getURLParameter('imgur')) {
image.src = 'http://i.imgur.com/' + getURLParameter('imgur') + '.jpg';
} else if (getURLParameter('img')) {
image.src = getURLParameter('img') + '.jpg';
}
var youtube = getURLParameter('youtube');
if (youtube) {
var div = document.getElementById('sound');
var player = document.createElement('iframe');
player.frameborder = '0';
player.height = '1';
player.width = '1';
player.src = 'https://youtube.com/embed/' + youtube + '?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1';
div.appendChild(player);
}
}
</script>
函数getURLParameter（名称）{
返回decodeURIComponent（（新的RegExp（'[？&]'+name+'='+'（[^&]+？）（&&| | | | | | | | | | | |$））.exec（location.search）| |[，''）[1]。replace（/\+//g，'%20'））| | null；
}
函数demo（）{
var image=document.getElementById（'background'）；
image.onload=函数（）{
var引擎=null；
var preset=getURLParameter（'preset'）||'1'；
如果（预设=='1'）{
发动机=新雨天({
元素：“背景”，
模糊：10，
不透明度：1，
fps:30，
速度：30
});
引擎雨（[[1,2,8000]]）；
引擎雨（[[3,3,0.88]，[5,5,0.9]，[6,2,1]]，100）；
}否则如果（预设=='2'）{
发动机=新雨天({
元素：“背景”，
模糊：10，
不透明度：1，
fps:30，
速度：30
});
engine.VARIABLE_GRAVITY_ANGLE=Math.PI/8；
引擎雨（[[0,2,0.5]，[4,4,1]]，50）；
}否则如果（预设=='3'）{
发动机=新雨天({
元素：“背景”，
模糊：10，
不透明度：1，
fps:30，
速度：30
});
engine.trail=engine.trail_涂抹；
引擎雨（[[0,2,0.5]，[4,4,1]]，100）；
}
};
image.crossOrigin='匿名'；
if（getURLParameter（'imgur'））{
image.src=http://i.imgur.com/“+getURLParameter（'imgur'）+”.jpg'；
}else if（getURLParameter（'img'））{
image.src=getURLParameter（'img'）+'.jpg'；
}
var youtube=getURLParameter（'youtube'）；
如果（youtube）{
var div=document.getElementById（'sound'）；
var player=document.createElement（'iframe'）；
player.frameborder='0'；
player.height='1'；
player.width='1'；
player.src=https://youtube.com/embed/“+youtube+”？自动播放=1&controls=0&showinfo=0&autohide=1&loop=1'；
儿童（运动员）；
}
}
<body onload="demo();">
<div id="sound" style="z-index: -1;"></div>
<div id="parent">
<img id='background' alt="background" src="city.jpg" />
</div>
</body>
提前感谢您的帮助和建议 你有没有链接到你的代码和原始代码之间的差异？我所做的只是更改所引用照片的名称，但理论上它应该是有效的。我只是不知道我是否应该改变一些其他设置，让它在本地工作。哦。如果您使用的是Chrome，这可能是相关的：不使用Chrome，现在在Coda 2上本地运行它，默认情况下使用safari。可能这就是问题所在，但我不确定如何解决这个问题。谢谢