javascript 如何从 Codepen 获取此代码以使其正常工作？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29056779/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I get this code from Codepen to work?
提问by Sherri
Here is the codepen: http://codepen.io/BrandonJF/pen/KGwyC
这是代码笔：http://codepen.io/BrandonJF/pen/KGwyC
In case the page can't be accessed, a copy of the code is below.
如果无法访问该页面，代码的副本如下。
Now, what I have been doing is using Brackets, and opening a folder in Brackets that contains a completely blankstyle.css page, completely blankinit.js page, and an almostblank index.html page (this page at least has the following code:
现在，我一直在做的是使用 Brackets，并在 Brackets 中打开一个文件夹，其中包含一个完全空白的style.css 页面、完全空白的init.js 页面和一个几乎空白的 index.html 页面（这个页面至少有以下内容代码：
<!DOCTYPE html>
<!--
-->
<html lang="en">
<head>
</head>
<body>
</body>
</html>
I paste the CodePen HTML in the body tag of index.html. I paste the CodePen CSS into style.css . I paste the CodePen Javascript into init.jss I have also tried pasting the CodePen Javascript into the body tag of index.html, using the tag "script" around the JS code.
我将 CodePen HTML 粘贴到 index.html 的 body 标签中。我将 CodePen CSS 粘贴到 style.css 中。我将 CodePen Javascript 粘贴到 init.jss 我也尝试将 CodePen Javascript 粘贴到 index.html 的 body 标记中，在 JS 代码周围使用标记“script”。
Any ideas what I am doing wrong?
任何想法我做错了什么？
So Clueless!
太无知了！
CodePen HTML:
代码笔 HTML：
<div id="container">
<header>
<h1>Task List</h1>
<a href="#" id="clear">Clear all</a>
</header>
<section id="taskIOSection">
<div id="formContainer">
<form id="taskEntryForm">
<input id="taskInput" placeholder="What would you like to do today?" />
</form>
</div>
<ul id="taskList"></ul>
</section>
</div>
CodePen CSS:
代码笔 CSS：
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 300, 600);
* {
padding:0;
margin:0;
}
body {
background:url('http://dribbble.com/images/attachments/attachments-bg.png?1');
background-color:#2a2a2a;
font-family:'Open Sans', sans-serif;
}
#container {
background-color: #111216;
color:#999999;
width:350px;
margin: 50px auto auto auto;
padding-bottom:12px;
}
#formContainer {
padding-top:12px
}
#taskIOSection {
}
#taskInput {
font-size:14px;
font-family:'Open Sans', sans-serif;
height:36px;
width:311px;
border-radius:100px;
background-color:#202023;
border:0;
color:#fff;
display:block;
padding-left:15px;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
}
#taskInput:focus{
box-shadow: 0px 0px 1pt 1pt #999999;
background-color:#111216;
outline:none;
}
::-webkit-input-placeholder {
color: #333333;
font-style:italic;
/* padding-left:10px; */
}
:-moz-placeholder {
/* Firefox 18- */
color: #333333;
font-style:italic;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #333333;
font-style:italic;
}
:-ms-input-placeholder {
color: #333333;
font-style:italic;
}
header {
margin-top:0;
background-color:#F94D50;
width:338px;
height:48px;
padding-left:12px;
}
header h1 {
font-size:25px;
font-weight:300;
color:#fff;
line-height:48px;
width:50%;
display:inline;
}
header a{
width:40%;
display:inline;
line-height:48px;
}
#taskEntryForm {
background-color:#111216;
width:326px;
height: 48px;
border-width:0px;
padding: 0px 12px 0px 12px;
font-size:0px;
}
#taskList {
width: 350px;
margin:auto;
font-size:19px;
font-weight:600;
}
ul li {
background-color:#17181D;
height:48px;
width:314px;
padding-left:12px;
margin:0 auto 10px auto;
line-height:48px;
list-style:none;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
CodePen Javascript:
代码笔 JavaScript：
$(document).ready(function () {
var i = 0;
for (i = 0; i < localStorage.length; i++) {
var taskID = "task-" + i;
$('#taskList').append("<li id='" + taskID + "'>" + localStorage.getItem(taskID) + "</li>");
}
$('#clear').click(function () {
localStorage.clear();
});
$('#taskEntryForm').submit(function () {
if ($('#taskInput').val() !== "") {
var taskID = "task-" + i;
var taskMessage = $('#taskInput').val();
localStorage.setItem(taskID, taskMessage);
$('#taskList').append("<li class='task' id='" + taskID + "'>" + taskMessage + "</li>");
var task = $('#' + taskID);
task.css('display', 'none');
task.slideDown();
$('#taskInput').val("");
i++;
}
return false;
});
$('#taskList').on("click", "li", function (event) {
self = $(this);
taskID = self.attr('id');
localStorage.removeItem(taskID);
self.slideUp('slow', function () {
self.remove();
});
});
});
EDIT: To anyone who stumbles upon this post, here are the things that made my code work. As per jswebb's suggestion, I referenced what I needed in the head of the index.html.
编辑：对于偶然发现这篇文章的任何人，这里是使我的代码工作的东西。根据 jswebb 的建议，我在 index.html 的头部引用了我需要的内容。
So the head tag looks like this now:
所以 head 标签现在看起来像这样：
<head>
<link type="text/css" rel="stylesheet" href="css/styleok.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
Make sure that when you are writing the link tag, the href="YOURCSSFILENAME.css" includes all the correct folders!!!
确保在编写链接标签时，href="YOURCSSFILENAME.css" 包含所有正确的文件夹！！！
Best wishes to all.
向所有人致以最良好的祝愿。
采纳答案by jswebb
The CodePen you linked to utilizes jQuery; however, when using a text editor and writing to a blank HTML file, you need to link to the jQuery library - have you done this?
您链接的 CodePen 使用 jQuery；但是，在使用文本编辑器并写入空白 HTML 文件时，您需要链接到 jQuery 库 - 您这样做了吗？
If not, place an external source link to the Google-hosted jQuery script file in between <head>and </head>, using the following:
如果没有，请使用以下内容在<head>和之间放置指向 Google 托管的 jQuery 脚本文件的外部源链接</head>：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
Let me know if that solves the issue for you!
如果这能解决您的问题，请告诉我！
EDIT:To solve the CSS issue you are having, you need to follow the same procedure for the external sheet; in general, sandboxes allow functionality without linking different files, but when working in text editors, you must supply the connection between stylesheets, JS files and the HTML page.
编辑：要解决您遇到的 CSS 问题，您需要对外部工作表执行相同的步骤；通常，沙箱允许在不链接不同文件的情况下实现功能，但是在文本编辑器中工作时，您必须提供样式表、JS 文件和 HTML 页面之间的连接。
To link to your external CSS sheet, put the following in between <head>and </head>:
要链接到外部 CSS 表，请将以下内容放在<head>和之间</head>：
<link type="text/css" rel="stylesheet" href="style.css" />
This is the standard procedure for adding links to external CSS. If the sheet is open in the Brackets editor, it should provide you with 'style.css' when you start typing it in.
这是将链接添加到外部 CSS 的标准程序。如果工作表在 Brackets 编辑器中打开，当您开始输入时，它应该为您提供“style.css”。
Once you do the above, place the CSS from the CodePen into that CSS file, and then save all of the sheets you're working in. Everything should work - let me know if that solved your issues!
完成上述操作后，将 CodePen 中的 CSS 放入该 CSS 文件中，然后保存您正在处理的所有工作表。一切正常 - 如果这解决了您的问题，请告诉我！
回答by thangdc94
I have the same answer here:
我在这里有相同的答案：
How do I take code from Codepen, and use it locally?
Right click on the resultframe and choose View Frame source. And you can copy the source code and paste it in your own text-editor.
右键单击result框架并选择View Frame source。您可以复制源代码并将其粘贴到您自己的文本编辑器中。
回答by deeveeABC
Ensure you are not missing jQuery which is a dependancy for the javascript
确保您没有遗漏 jQuery，它是 javascript 的依赖项
While copying javascript from codepen, it was adding some addition checks whilst compiling the coffeescript. So just use http://js2.coffee/in order to convert the coffeescript into javascript preview, which you can then use in your code.
在从 codepen 复制 javascript 时，它在编译咖啡脚本的同时添加了一些额外的检查。因此，只需使用http://js2.coffee/将 coffeescript 转换为 javascript 预览，然后您就可以在代码中使用它。
