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

How do I take code from Codepen, and use it locally?(如何从 Codepen 获取代码并在本地使用?)
本文介绍了如何从 Codepen 获取代码并在本地使用?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

How do I take the code from codepen, and use it locally in my text-editor?

http://codepen.io/mfields/pen/BhILt

我正在尝试在本地玩这个创作,但是当我在 chrome 中打开它时,我得到一个空白页面,没有任何内容.

I am trying to have a play with this creation locally, but when I open it in chrome, I get a blank white page with nothing going on.

<!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 文件中,如上所示.

I have copy, pasted and saved the css and js into different files and saved them, then tried to link them into the html file as I have shown above.

我还包含了 jquery 库,因为我知道很多 codepen 创作都使用它.

I have also included the jquery library as I understand a lot of the codepen creations use it.

我得到的唯一控制台错误是

The only console error I'm getting is

Uncaught TypeError: Cannot read property 'getContext' of null

链接到我的 js 文件第 4 行

which is linking to my js file, line 4

(function(){

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

对不起,如果这很愚蠢,但我对这一切都很陌生.我敢肯定这是基本的地狱.任何帮助都会很棒!

Sorry if this is dumb, but I'm new to all this. I'm sure this is basic as hell. Any help would be awesome!

推荐答案

Joe Fitter 是对的,但我认为最好 导出您的笔(使用 export to export.zip 选项在本地使用您的笔).这将为您提供笔的工作版本,而无需复制和粘贴 CSS、JavaScript 和 HTML 代码,也无需对其进行更改以使其工作.

Joe Fitter is right, but I think is better to export your pen (use the export to export.zip option for using your pen locally). This will give you a working version of your pen without having to copy and paste the CSS, JavaScript and HTML code and without having to make changes on it for making it work.

这篇关于如何从 Codepen 获取代码并在本地使用?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

Update another component when Formik form changes(当Formik表单更改时更新另一个组件)
Formik validation isSubmitting / isValidating not getting set to true(Formik验证正在提交/isValiating未设置为True)
React Validation Max Range Using Formik(使用Formik的Reaction验证最大范围)
Validation using Yup to check string or number length(使用YUP检查字符串或数字长度的验证)
Updating initialValues prop on Formik Form does not update input value(更新Formik表单上的初始值属性不会更新输入值)
password validation with yup and formik(使用YUP和Formick进行密码验证)