Question

如何从codepen中获取代码，并在我的文本编辑器中本地使用它？

我正试图在本地玩这个创作，但当我用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' ),

对不起，如果这是愚蠢的，但我对这一切都是新手。我确信这是基本的地狱。任何帮助都会很棒！

Answer 1

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

Answer 2

在HTML加载完成之前，您的javascript似乎正在运行。如果你可以使用jQuery把js放在里面;

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

你可以尝试这个......

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

Answer 3

看起来你在加载DOM之前调用了JS。

尝试将其包装在

中

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

与

相同

<script>

如果您使用的是jQuery。

或者您可以在内容之后包含<body onLoad="yourFunction();">标记，就在关闭正文标记之前，这将确保在执行JS之前呈现内容

或者您可以在JS中命名该函数并在body的onLoad上执行它：

com.nokia.meego

Answer 4

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

Answer 5

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

现在取决于您的浏览器。

火狐

显示源代码（Cmd + u）并进入最底层。查找最后一个iframe，然后单击src属性的值。你去吧。

铬

右键单击页面（不是codepen标题）并选择View FRAME source（不是view PAGE source）选项。你去吧。

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

5 个答案:

火狐

铬