css 如何从Codepen获取代码并在本地使用它？

bjp0bcyl 于 2023-11-19 发布在其他

关注(0)|答案(6)|浏览(237)

我如何从codepen中获取代码，并在我的文本编辑器中本地使用它？
http://codepen.io/mfields/pen/BhILt
我试图在本地玩这个创造，但当我在Chrome中打开它时，我得到一个空白的白色页面，什么也没有发生。

<!DOCTYPE HTML>
<html>
<head>
<script> src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="celtic.js"></script>
<link rel="stylesheet" type="text/css"  src="celtic.css"></link>
</head>
<body>
<canvas id="animation" width="400" height="400"></canvas>
</body>
</html>

字符串
我复制，粘贴和保存css和js到不同的文件，并保存它们，然后试图将它们链接到html文件，正如我上面所示。
我还包括了jquery库，因为我知道很多codepen作品都使用它。
我得到的唯一控制台错误是

Uncaught TypeError: Cannot read property 'getContext' of null

型
它链接到我的js文件，第4行

(function(){

var canvas = document.getElementById( 'animation' ),
    c = canvas.getContext( '2d' ),

型
如果这是愚蠢的，对不起，但我是新的所有这一切。我相信这是基本的地狱。任何帮助将是真棒！

css

来源：https://stackoverflow.com/questions/29876904/how-do-i-take-code-from-codepen-and-use-it-locally

6条答案

按热度按时间

umuewwlo1#

Joe Fitter是对的，但我认为最好是export your pen（使用导出到export.zip选项在本地使用您的笔）。这将给予您的笔的工作版本，而无需复制和粘贴CSS，JavaScript和HTML代码，也无需对其进行更改以使其工作。

赞(0）回复(0）举报 2023-11-19

acruukt92#

右键点击result框架并选择View Frame source。然后你可以复制源代码并粘贴到你自己的文本编辑器中。

的数据

赞(0）回复(0）举报 2023-11-19

8zzbczxx3#

看起来你的JavaScript在HTML加载完成之前就已经运行了。如果你能使用jQuery，把js放在里面;

$( document ).ready(function() {
      // js goes in here.
    });

字符串
你可以试试这个…

function init() {
     // Run your javascript code here
  }
document.addEventListener("DOMContentLoaded", init, false);

型

赞(0）回复(0）举报 2023-11-19

agxfikkp4#

看起来像是在DOM加载之前调用JS。
试着把它包在

$(function() {
    // your code here
});

字符串
港元亦为

$(document).ready(function() {
    // your code here
});

型
如果你使用jQuery
或者你可以在内容之后，在结束的body标签之前包含<script>标签，这将确保内容在JS执行之前已经呈现
或者你可以在JS中命名这个函数，并在函数体的onLoad上执行它：

<body onLoad="yourFunction();">

型

赞(0）回复(0）举报 2023-11-19

x6h2sr285#

要下载codepen的计算html，请转到您选择的codepen，然后单击“更改视图”按钮并转到“整页”模式。
现在取决于您的浏览器。

Firefox

显示源代码（Cmd+u）并转到最底部。查找最后一个iframe并单击src属性的值。

Chrome

右键点击页面（不是codepen头），选择View FRAME source（不是view PAGE source）选项。

赞(0）回复(0）举报 2023-11-19

lbsnaicq6#

如果他们使用的是bootstrap，在复制粘贴所有html，css，js代码后，您需要在html文件中添加bootstrap CDN链接。转到：https://getbootstrap.com/docs/5.0/getting-started/download/

赞(0）回复(0）举报 2023-11-19

我来回答

css 如何从Codepen获取代码并在本地使用它？

6条答案

Firefox

Chrome

相关问题

热门标签

最新问答