这是来自http://www.bypeople.com/css-chat/的实时聊天模板，我甚至从他们的
http://codepen.io/m412c0/pen/rohwn?editors=100
这是在线工作但当我下载他们的源代码然后它不。这是他们的ZIP文件链接：
http://www.uploadmb.com/dw.php?id=1444229266
以下是我也尝试编辑我只更换了<script src="js/index.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
我编辑的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Live Chat - CodePen</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<script src="js/index.js"></script>
</head>
<body>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Live Chat</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Sans:400,700">
</head>
<body>
<div id="live-chat">
<header class="clearfix">
<a href="#" class="chat-close">x</a>
<h4>John Doe</h4>
<span class="chat-message-counter">3</span>
</header>
<div class="chat">
<div class="chat-history">
<div class="chat-message clearfix">
<img src="http://lorempixum.com/32/32/people" alt="" width="32" height="32">
<div class="chat-message-content clearfix">
<span class="chat-time">13:35</span>
<h5>John Doe</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, explicabo quasi ratione odio dolorum harum.</p>
</div> <!-- end chat-message-content -->
</div> <!-- end chat-message -->
<hr>
<div class="chat-message clearfix">
<img src="http://gravatar.com/avatar/2c0ad52fc5943b78d6abe069cc08f320?s=32" alt="" width="32" height="32">
<div class="chat-message-content clearfix">
<span class="chat-time">13:37</span>
<h5>Marco Biedermann</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, nulla accusamus magni vel debitis numquam qui tempora rem voluptatem delectus!</p>
</div> <!-- end chat-message-content -->
</div> <!-- end chat-message -->
<hr>
<div class="chat-message clearfix">
<img src="http://lorempixum.com/32/32/people" alt="" width="32" height="32">
<div class="chat-message-content clearfix">
<span class="chat-time">13:38</span>
<h5>John Doe</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
</div> <!-- end chat-message-content -->
</div> <!-- end chat-message -->
<hr>
</div> <!-- end chat-history -->
<p class="chat-feedback">Your partner is typing…</p>
<form action="#" method="post">
<fieldset>
<input type="text" placeholder="Type your message…" autofocus>
<input type="hidden">
</fieldset>
</form>
</div> <!-- end chat -->
</div> <!-- end live-chat -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>
<script src="js/index.js"></script>
</body>
</html>
请帮助我迷失自己:(
答案 0 :(得分：1)
包含index.js的次数太多了。
并尝试修改
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
到
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
整个代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Live Chat - CodePen</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Live Chat</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Sans:400,700">
</head>
<body>
<div id="live-chat">
<header class="clearfix">
<a href="#" class="chat-close">x</a>
<h4>John Doe</h4>
<span class="chat-message-counter">3</span>
</header>
<div class="chat">
<div class="chat-history">
<div class="chat-message clearfix">
<img src="http://lorempixum.com/32/32/people" alt="" width="32" height="32">
<div class="chat-message-content clearfix">
<span class="chat-time">13:35</span>
<h5>John Doe</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, explicabo quasi ratione odio dolorum harum.</p>
</div> <!-- end chat-message-content -->
</div> <!-- end chat-message -->
<hr>
<div class="chat-message clearfix">
<img src="http://gravatar.com/avatar/2c0ad52fc5943b78d6abe069cc08f320?s=32" alt="" width="32" height="32">
<div class="chat-message-content clearfix">
<span class="chat-time">13:37</span>
<h5>Marco Biedermann</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, nulla accusamus magni vel debitis numquam qui tempora rem voluptatem delectus!</p>
</div> <!-- end chat-message-content -->
</div> <!-- end chat-message -->
<hr>
<div class="chat-message clearfix">
<img src="http://lorempixum.com/32/32/people" alt="" width="32" height="32">
<div class="chat-message-content clearfix">
<span class="chat-time">13:38</span>
<h5>John Doe</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
</div> <!-- end chat-message-content -->
</div> <!-- end chat-message -->
<hr>
</div> <!-- end chat-history -->
<p class="chat-feedback">Your partner is typing…</p>
<form action="#" method="post">
<fieldset>
<input type="text" placeholder="Type your message…" autofocus>
<input type="hidden">
</fieldset>
</form>
</div> <!-- end chat -->
</div> <!-- end live-chat -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>