Javascript codepen演示在本地浏览器中不工作？
我刚刚偶然发现了一支密码笔。然后代码在codepen窗口中正常工作。当我将它复制到本地HTML文件中时，它停止工作。下面是全部合并在一个.html文件中的代码Javascript codepen演示在本地浏览器中不工作？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我刚刚偶然发现了一支密码笔。然后代码在codepen窗口中正常工作。当我将它复制到本地HTML文件中时，它停止工作。下面是全部合并在一个.html文件中的代码 <!DOCTYPE html> <html> <head> <style> body { margin: 0; overflow: hidden; } #myCanvas { display: block; } #button { font-family: "Gill Sans", "Gil
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
overflow: hidden;
}
#myCanvas {
display: block;
}
#button {
font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
position: absolute;
font-size: 1.5em;
text-transform: uppercase;
padding: 7px 20px;
left: 50%;
width: 200px;
margin-left: -100px;
top: 50%;
border-radius: 10px;
color: white;
text-shadow: -1px -1px 1px rgba(0,0,0,0.8);
border: 5px solid transparent;
border-bottom-color: rgba(0,0,0,0.35);
background: hsla(260, 100%, 50%, 1);
cursor: pointer;
animation: pulse 1s infinite alternate;
transition: background 0.4s, border 0.2s, margin 0.2s;
}
#button:hover {
background: hsla(220, 100%, 60%, 1);
margin-top: -1px;
animation: none;
}
#button:active {
border-bottom-width: 0;
margin-top: 5px;
}
@keyframes pulse {
0% {
margin-top: 0px;
}
100% {
margin-top: 6px;
}}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
window.requestAnimFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
Math.randMinMax = function(min, max, round) {
var val = min + (Math.random() * (max - min));
if( round ) val = Math.round( val );
return val;
};
Math.TO_RAD = Math.PI/180;
Math.getAngle = function( x1, y1, x2, y2 ) {
var dx = x1 - x2,
dy = y1 - y2;
return Math.atan2(dy,dx);
};
Math.getDistance = function( x1, y1, x2, y2 ) {
var xs = x2 - x1,
ys = y2 - y1;
xs *= xs;
ys *= ys;
return Math.sqrt( xs + ys );
};
var FX = {};
(function() {
var canvas = document.getElementById('myCanvas'),
ctx = canvas.getContext('2d'),
lastUpdate = new Date(),
mouseUpdate = new Date(),
lastMouse = [],
width, height;
FX.particles = [];
setFullscreen();
document.getElementById('button').addEventListener('mousedown', buttonEffect);
function buttonEffect() {
var button = document.getElementById('button'),
height = button.offsetHeight,
left = button.offsetLeft,
top = button.offsetTop,
width = button.offsetWidth,
x, y, degree;
for(var i=0;i<40;i=i+1) {
if( Math.random() < 0.5 ) {
y = Math.randMinMax(top, top+height);
if( Math.random() < 0.5 ) {
x = left;
degree = Math.randMinMax(-45,45);
} else {
x = left + width;
degree = Math.randMinMax(135,225);
}
} else {
x = Math.randMinMax(left, left+width);
if( Math.random() < 0.5 ) {
y = top;
degree = Math.randMinMax(45,135);
} else {
y = top + height;
degree = Math.randMinMax(-135, -45);
}
}
createParticle({
x: x,
y: y,
degree: degree,
speed: Math.randMinMax(100, 150),
vs: Math.randMinMax(-4,-1)
});
}
}
window.setTimeout(buttonEffect, 100);
loop();
window.addEventListener('resize', setFullscreen );
function createParticle( args ) {
var options = {
x: width/2,
y: height/2,
color: 'hsla('+ Math.randMinMax(160, 290) +', 100%, 50%, '+(Math.random().toFixed(2))+')',
degree: Math.randMinMax(0, 360),
speed: Math.randMinMax(300, 350),
vd: Math.randMinMax(-90,90),
vs: Math.randMinMax(-8,-5)
};
for (key in args) {
options[key] = args[key];
}
FX.particles.push( options );
}
function loop() {
var thisUpdate = new Date(),
delta = (lastUpdate - thisUpdate) / 1000,
amount = FX.particles.length,
size = 2,
i = 0,
p;
ctx.fillStyle = 'rgba(15,15,15,0.25)';
ctx.fillRect(0,0,width,height);
ctx.globalCompositeStyle = 'lighter';
for(;i<amount;i=i+1) {
p = FX.particles[ i ];
p.degree += (p.vd * delta);
p.speed += (p.vs);// * delta);
if( p.speed < 0 ) continue;
p.x += Math.cos(p.degree * Math.TO_RAD) * (p.speed * delta);
p.y += Math.sin(p.degree * Math.TO_RAD) * (p.speed * delta);
ctx.save();
ctx.translate( p.x, p.y );
ctx.rotate( p.degree * Math.TO_RAD );
ctx.fillStyle = p.color;
ctx.fillRect( -size, -size, size*2, size*2 );
ctx.restore();
}
lastUpdate = thisUpdate;
requestAnimFrame( loop );
}
function setFullscreen() {
width = canvas.width = window.innerWidth;
height = canvas.height = window.innerHeight;
};
})();
</script>
<button id="button">click me</button>
<canvas id="myCanvas" width="500" height="500"></canvas>
</body>
</html>
身体{
保证金：0；
溢出：隐藏；
}
#我的画布{
显示：块；
}
#钮扣{
字体系列：“Gill Sans”、“Gill Sans MT”、Calibri、Sans serif；
位置：绝对位置；
字号：1.5em；
文本转换：大写；
填充：7px 20px；
左：50%；
宽度：200px；
左边距：-100px；
最高：50%；
边界半径：10px；
颜色：白色；
文本阴影：-1px-1px 1px rgba（0,0,0.8）；
边框：5px实心透明；
边框底色：rgba（0,0,0,0.35）；
背景：hsla（260,100%，50%，1）；
光标：指针；
动画：脉冲1s无限交替；
过渡：背景0.4s，边框0.2s，边距0.2s；
}
#按钮：悬停{
背景：hsla（220,100%，60%，1）；
页边顶部：-1px；
动画：无；
}
#按钮：激活{
边框底宽：0；
边缘顶部：5px；
}
@关键帧脉冲{
0% {
边际上限：0px；
}
100% {
边缘顶部：6px；
}}
window.requestAnimFrame=（函数（）{
return window.requestAnimationFrame||
window.webkitRequestAnimationFrame||
window.mozRequestAnimationFrame||
window.oRequestAnimationFrame||
window.msRequestAnimationFrame||
函数（回调）{
设置超时（回调，1000/60）；
};
})();
Math.randMinMax=函数（最小、最大、四舍五入）{
var val=min+（Math.random（）*（max-min））；
如果（舍入）val=数学舍入（val）；
返回val；
};
Math.TO_RAD=Math.PI/180；
Math.getAngle=函数（x1，y1，x2，y2）{
变量dx=x1-x2，
dy=y1-y2；
返回数学atan2（dy，dx）；
};
Math.getDistance=函数（x1，y1，x2，y2）{
变量xs=x2-x1，
ys=y2-y1；
xs*=xs；
ys*=ys；
返回Math.sqrt（xs+ys）；
};
var FX={}；
（功能（）{
var canvas=document.getElementById（'myCanvas'），
ctx=canvas.getContext（'2d'），
lastUpdate=新日期（），
mouseUpdate=新日期（），
lastMouse=[]，
宽度、高度；
FX.particles=[]；
设置全屏（）；
document.getElementById（'button'）。addEventListener（'mousedown'，buttonEffect）；
函数按钮效果（）{
var button=document.getElementById（'button'），
高度=按钮。远离视线，
左=按钮偏移左，
顶部=按钮。偏移设置，
宽度=button.offsetWidth，
x、 y，学位；
对于（var i=0；i，将脚本标记放入
标记中可能会有所帮助
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
overflow: hidden;
}
#myCanvas {
display: block;
}
#button {
font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
position: absolute;
font-size: 1.5em;
text-transform: uppercase;
padding: 7px 20px;
left: 50%;
width: 200px;
margin-left: -100px;
top: 50%;
border-radius: 10px;
color: white;
text-shadow: -1px -1px 1px rgba(0,0,0,0.8);
border: 5px solid transparent;
border-bottom-color: rgba(0,0,0,0.35);
background: hsla(260, 100%, 50%, 1);
cursor: pointer;
animation: pulse 1s infinite alternate;
transition: background 0.4s, border 0.2s, margin 0.2s;
}
#button:hover {
background: hsla(220, 100%, 60%, 1);
margin-top: -1px;
animation: none;
}
#button:active {
border-bottom-width: 0;
margin-top: 5px;
}
@keyframes pulse {
0% {
margin-top: 0px;
}
100% {
margin-top: 6px;
}}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
window.requestAnimFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
Math.randMinMax = function(min, max, round) {
var val = min + (Math.random() * (max - min));
if( round ) val = Math.round( val );
return val;
};
Math.TO_RAD = Math.PI/180;
Math.getAngle = function( x1, y1, x2, y2 ) {
var dx = x1 - x2,
dy = y1 - y2;
return Math.atan2(dy,dx);
};
Math.getDistance = function( x1, y1, x2, y2 ) {
var xs = x2 - x1,
ys = y2 - y1;
xs *= xs;
ys *= ys;
return Math.sqrt( xs + ys );
};
var FX = {};
(function() {
var canvas = document.getElementById('myCanvas'),
ctx = canvas.getContext('2d'),
lastUpdate = new Date(),
mouseUpdate = new Date(),
lastMouse = [],
width, height;
FX.particles = [];
setFullscreen();
document.getElementById('button').addEventListener('mousedown', buttonEffect);
function buttonEffect() {
var button = document.getElementById('button'),
height = button.offsetHeight,
left = button.offsetLeft,
top = button.offsetTop,
width = button.offsetWidth,
x, y, degree;
for(var i=0;i<40;i=i+1) {
if( Math.random() < 0.5 ) {
y = Math.randMinMax(top, top+height);
if( Math.random() < 0.5 ) {
x = left;
degree = Math.randMinMax(-45,45);
} else {
x = left + width;
degree = Math.randMinMax(135,225);
}
} else {
x = Math.randMinMax(left, left+width);
if( Math.random() < 0.5 ) {
y = top;
degree = Math.randMinMax(45,135);
} else {
y = top + height;
degree = Math.randMinMax(-135, -45);
}
}
createParticle({
x: x,
y: y,
degree: degree,
speed: Math.randMinMax(100, 150),
vs: Math.randMinMax(-4,-1)
});
}
}
window.setTimeout(buttonEffect, 100);
loop();
window.addEventListener('resize', setFullscreen );
function createParticle( args ) {
var options = {
x: width/2,
y: height/2,
color: 'hsla('+ Math.randMinMax(160, 290) +', 100%, 50%, '+(Math.random().toFixed(2))+')',
degree: Math.randMinMax(0, 360),
speed: Math.randMinMax(300, 350),
vd: Math.randMinMax(-90,90),
vs: Math.randMinMax(-8,-5)
};
for (key in args) {
options[key] = args[key];
}
FX.particles.push( options );
}
function loop() {
var thisUpdate = new Date(),
delta = (lastUpdate - thisUpdate) / 1000,
amount = FX.particles.length,
size = 2,
i = 0,
p;
ctx.fillStyle = 'rgba(15,15,15,0.25)';
ctx.fillRect(0,0,width,height);
ctx.globalCompositeStyle = 'lighter';
for(;i<amount;i=i+1) {
p = FX.particles[ i ];
p.degree += (p.vd * delta);
p.speed += (p.vs);// * delta);
if( p.speed < 0 ) continue;
p.x += Math.cos(p.degree * Math.TO_RAD) * (p.speed * delta);
p.y += Math.sin(p.degree * Math.TO_RAD) * (p.speed * delta);
ctx.save();
ctx.translate( p.x, p.y );
ctx.rotate( p.degree * Math.TO_RAD );
ctx.fillStyle = p.color;
ctx.fillRect( -size, -size, size*2, size*2 );
ctx.restore();
}
lastUpdate = thisUpdate;
requestAnimFrame( loop );
}
function setFullscreen() {
width = canvas.width = window.innerWidth;
height = canvas.height = window.innerHeight;
};
})();
</script>
</head>
<body>
<button id="button">click me</button>
<canvas id="myCanvas" width="500" height="500"></canvas>
</body>
</html>
身体{
保证金：0；
溢出：隐藏；
}
#我的画布{
显示：块；
}
#钮扣{
字体系列：“Gill Sans”、“Gill Sans MT”、Calibri、Sans serif；
位置：绝对位置；
字号：1.5em；
文本转换：大写；
填充：7px 20px；
左：50%；
宽度：200px；
左边距：-100px；
最高：50%；
边界半径：10px；
颜色：白色；
文本阴影：-1px-1px 1px rgba（0,0,0.8）；
边框：5px实心透明；
边框底色：rgba（0,0,0,0.35）；
背景：hsla（260,100%，50%，1）；
光标：指针；
动画：脉冲1s无限交替；
过渡：背景0.4s，边框0.2s，边距0.2s；
}
#按钮：悬停{
背景：hsla（220,100%，60%，1）；
页边顶部：-1px；
动画：无；
}
#按钮：激活{
边框底宽：0；
边缘顶部：5px；
}
@关键帧脉冲{
0% {
边际上限：0px；
}
100% {
边缘顶部：6px；
}}
window.requestAnimFrame=（函数（）{
return window.requestAnimationFrame||
window.webkitRequestAnimationFrame||
window.mozRequestAnimationFrame||
window.oRequestAnimationFrame||
window.msRequestAnimationFrame||
函数（回调）{
设置超时（回调，1000/60）；
};
})();
Math.randMinMax=函数（最小、最大、四舍五入）{
var val=min+（Math.random（）*（max-min））；
如果（舍入）val=数学舍入（val）；
返回val；
};
Math.TO_RAD=Math.PI/180；
Math.getAngle=函数（x1，y1，x2，y2）{
变量dx=x1-x2，
dy=y1-y2；
返回数学atan2（dy，dx）；
};
Math.getDistance=函数（x1，y1，x2，y2）{
变量xs=x2-x1，
ys=y2-y1；
xs*=xs；
ys*=ys；
返回Math.sqrt（xs+ys）；
};
var FX={}；
（功能（）{
var canvas=document.getElementById（'myCanvas'），
ctx=canvas.getContext（'2d'），
lastUpdate=新日期（），
mouseUpdate=新日期（），
lastMouse=[]，
宽度、高度；
FX.particles=[]；
设置全屏（）；
document.getElementById（'button'）。addEventListener（'mousedown'，buttonEffect）；
函数按钮效果（）{
var button=document.getElementById（'button'），
高度=按钮。远离视线，
左=按钮偏移左，
顶部=按钮。偏移设置，
宽度=button.offsetWidth，
x、 y，学位；
对于（var i=0；i您需要在LIKE中使用脚本代码
因为您的脚本是先加载的，但它找不到任何DOM元素，所以无法工作
另外，您不需要包括jquery，因为您的代码中没有使用任何jquery功能，所以可以这样尝试
<!DOCTYPE html>
<html>
<head>
<style>
// your style here
</style>
</head>
<body>
<button id="button">click me</button>
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
// and no need to include jquery if not used
// you script goes here after adding DOM elements
</script>
</body>
</html>
//你的风格在这里
点击我
//如果不使用jquery，则不需要包含它
//添加DOM元素后，脚本将转到此处
您的html代码在哪个浏览器中不起作用？我也在Fiddle.net上测试了相同的代码，在firefox.firefox版本34中它对我起作用。它在我拥有的三种浏览器中都不起作用。嘿，谢谢它起作用。我怀疑它如何在您的浏览器中起作用而不编写任何其他内容，但它需要额外的代码to在我的工作中。它在删除jQuery脚本后停止工作。因此，我再次包含它，它工作正常。
<!DOCTYPE html>
<html>
<head>
<style>
// your style here
</style>
</head>
<body>
<button id="button">click me</button>
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
// and no need to include jquery if not used
// you script goes here after adding DOM elements
</script>
</body>
</html>