个人中心
gpt4 book ai didi

javascript - codepen 演示在本地浏览器中不起作用？

转载 作者：行者123 更新时间：2023-11-28 08:35:04 27 4
gpt4 key购买 nike

我刚刚偶然发现了一个代码笔 demo .然后代码在 codepen 窗口中工作正常。当我将它复制到本地 HTML 文件时，它停止工作了。这是所有组合在一个 .html 文件中的代码

<!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>

最佳答案

您需要在$.ready() 中使用您的脚本代码喜欢，

$(function(){
   window.requestAnimFrame = (function () {
       ....
       ....
   })();
});

由于您的脚本首先加载但它没有找到任何 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>

关于javascript - codepen 演示在本地浏览器中不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28081921/

27 4 0
文章推荐： ios - 加载的 Nib 不更新框架大小
文章推荐： javascript - 在 jquery 中解析 ajax 响应
文章推荐： javascript - 我如何在日期选择器中应用 if 循环
文章推荐： html - 如何裁剪图像边缘
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com