javascript - 如何将工作 HTML、CSS、Javascript 代码从 Codepen 传输到 Visual Studio 代码和浏览器
问题描述
我的代码可以在 codepen 上工作，但不能在外面使用 Visual Studio Code 创建我的文件（它们是：Quote.html, Quote.css,Quote.js都在同一个文件夹中）。
当我在浏览器中打开我的html文件时，我得到一个绿屏，所以css文件链接正确，但js文件没有。
根据我在 Stackoverflow 上阅读的内容，我js按照我的理解正确地将文件放入脚本中，但我做的事情是错误的。我
HTML文件代码：
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="Quote.css">
</head>
<body>
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js" crossorigin></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"></script>
<script src="Quote.js" type="text/javascript"></script>
</body>
</html>
//css file code:
body {background-color: green; color: white;}
#quote-box {
margin-top: 80px;
}
Javascript文件代码：
const quotes = [
{
quote: "Don't cry because it's over, smile because it happened.",
author: "Dr. Seuss"
},
{
quote: "You only live once, but if you do it right, once is enough.",
author: "Mae West"
},
{
quote: "Be yourself; everyone else is already taken.",
author: "Oscar Wilde"
},
{
quote:
"Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.",
author: "Albert Einstein"
},
{ quote: "So many books, so little time.", author: "Frank Zappa" },
{
quote: "A room without books is like a body without a soul.",
author: "Marcus Tullius Cicero"
},
{
quote:
"If you want to know what a man's like, take a good look at how he treats his inferiors, not his equals.",
author: "J.K. Rowling"
}
];
class Presentational extends React.Component {
constructor(props) {
super(props);
this.state = {
quote: "If you want to know what a man's like, take a good look at how he treats his inferiors, not his equals.", author: "J.K. Rowling"
}
this.newQuote = this.newQuote.bind(this);
this.sendTweet = this.sendTweet.bind(this);
}
newQuote() {
const randNumber = Math.floor(Math.random() * quotes.length);
this.setState({quote: quotes[randNumber].quote, author: quotes[randNumber].author})
}
sendTweet = () => {
const url = "twitter.com";
const text = this.state.quote.concat(" - ").concat(this.state.author);
window.open('http://twitter.com/share?url='+encodeURIComponent(url)+'&text='+encodeURIComponent(text), '', 'left=0,top=0,width=550,height=450,personalbar=0,toolbar=0,scrollbars=0,resizable=0');
}
render() {
return (
<div id="quote-box" class="container">
<div class="row">
<h1 class="col-md-3"></h1>
<h1 class="text-center col-md-6">Random Quotes:</h1>
<h1 class="col-md-3"></h1>
</div>
<div class="row">
<p class="col-md-3"></p>
<blockquote class="col-md-6">
<p id="text"><i class="fa fa-quote-left"></i> {this.state.quote} <i class="fa fa-quote-right"></i></p>
<cite id="author">-- {this.state.author}</cite>
</blockquote>
<p class="col-md-3"></p>
</div>
<div class="row">
<p class="col-md-3"></p>
<button id="new-quote" class="btn btn-default col-md-1" onClick={this.newQuote}>New Quote</button>
<p class="col-md-3"></p>
<a id="tweet-quote" onClick={this.sendTweet} class="text-right"><button class="btn btn-default col-md-2">Tweet Quote <i class="fa fa-twitter"></i></button></a>
<p class="col-md-3"></p>
</div>
</div>
);
}
};
ReactDOM.render(<Presentational />, document.getElementById("app"));
这是应该显示的 Codepen 链接：https ://codepen.io/EOJA/pen/MRNoBq
解决方案
查看您的代码，您的项目目录应该是这样的：
Project_Folder
| index.html
| Quote.css
| Quote.js
编辑：在研究了一段时间后，我发现这很有帮助。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<style>
body {
background-color: green;
color: white;
}
#quote-box {
margin-top: 80px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js" crossorigin></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"></script>
<script type='text/babel'>
// !! IMPORTANT README:
// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place.
const quotes = [
{
quote: "Don't cry because it's over, smile because it happened.",
author: "Dr. Seuss"
},
{
quote: "You only live once, but if you do it right, once is enough.",
author: "Mae West"
},
{
quote: "Be yourself; everyone else is already taken.",
author: "Oscar Wilde"
},
{
quote:
"Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.",
author: "Albert Einstein"
},
{ quote: "So many books, so little time.", author: "Frank Zappa" },
{
quote: "A room without books is like a body without a soul.",
author: "Marcus Tullius Cicero"
},
{
quote:
"If you want to know what a man's like, take a good look at how he treats his inferiors, not his equals.",
author: "J.K. Rowling"
}
];
class Presentational extends React.Component {
constructor(props) {
super(props);
this.state = {
quote: "If you want to know what a man's like, take a good look at how he treats his inferiors, not his equals.", author: "J.K. Rowling"
}
this.newQuote = this.newQuote.bind(this);
this.sendTweet = this.sendTweet.bind(this);
}
newQuote() {
const randNumber = Math.floor(Math.random() * quotes.length);
this.setState({quote: quotes[randNumber].quote, author: quotes[randNumber].author})
}
sendTweet = () => {
const url = "twitter.com";
const text = this.state.quote.concat(" - ").concat(this.state.author);
window.open('http://twitter.com/share?url='+encodeURIComponent(url)+'&text='+encodeURIComponent(text), '', 'left=0,top=0,width=550,height=450,personalbar=0,toolbar=0,scrollbars=0,resizable=0');
}
render() {
return (
<div id="quote-box" class="container">
<div class="row">
<h1 class="col-md-3"></h1>
<h1 class="text-center col-md-6">Random Quotes:</h1>
<h1 class="col-md-3"></h1>
</div>
<div class="row">
<p class="col-md-3"></p>
<blockquote class="col-md-6">
<p id="text"><i class="fa fa-quote-left"></i> {this.state.quote} <i class="fa fa-quote-right"></i></p>
<cite id="author">-- {this.state.author}</cite>
</blockquote>
<p class="col-md-3"></p>
</div>
<div class="row">
<p class="col-md-3"></p>
<button id="new-quote" class="btn btn-default col-md-1" onClick={this.newQuote}>New Quote</button>
<p class="col-md-3"></p>
<a id="tweet-quote" href="http://twitter.com/intent/tweet" onClick={this.sendTweet} class="text-right"><button class="btn btn-default col-md-2">Tweet Quote <i class="fa fa-twitter"></i></button></a>
<p class="col-md-3"></p>
</div>
</div>
);
}
};
ReactDOM.render(<Presentational />, document.getElementById("app"));
</script>
</body>
</html>推荐阅读
- rest - PowerShell - 使用 Exchange Server 2016 REST API 获取日历事件
- scala - 需要加特林专家，脚本没有执行，但我正在成功
- reactjs - React fetch 返回 undefined 但在控制台中它返回响应
- c# - 文本对象 Unity 上的 Onclickevent
- r - 中位数与 ggplot 中多个科目的时间课程一起绘制
- swift - 在表格视图单元格之间添加 AdMob 横幅
- json - 验证 JSON 响应中的多个参数的指定值范围
- eclipse - 如何在 STS Eclipse Neon.3 (4.6.3) 中设置 oracle weblogic server 11g 10.3.6
- android - Google Play 商店拒绝默认短信应用
- angular - 浏览器刷新时，分段的角度路由失败