如何正确地将代码从 CodePen 复制到 VS Code？

问题描述 投票：0回答：3

我想将我的 codepen 复制到 visual studio code，但是当我将它复制粘贴到 visual studio code 时，它要么有问题，要么不工作，要么不显示输出。但在 codepen 中它工作得很好。我做了一些关于如何从 youtube 链接 HTML、CSS 和 JS 的研究。我按照视频说明进行操作，链接了 HTML、CSS 和 JS，并下载了扩展程序，但为什么它不起作用？大多数都是正确的（我认为），但我认为红色代码是错误的，我想这就是我的网站无法正常工作的原因，但我不知道怎么办，因为我是新手，刚开始使用 visual studio 代码，我主要在 codepen。

这是我的考勤代码笔https://codepen.io/rhynacpil/pen/dyKmyLE

visual studio 代码中的出勤 HTML

<!DOCTYPE html>
<html lang="en">
    <link rel="stylesheet" href="style.css"
    <script src="script.js"></script>
    <div class="mistyrose"></div>
    <h1>Attendance</h1>
    
    
    <label for="start">Start month:</label>
    <input type="month" id="start" name="start" min="2018-03" value="2018-05">
    
    <div class="holder">
                        <td>Un/check All</td>
                            <div class="attendance">
                                <input type="checkbox" id="checkAll"/>
                                <span></span>
                            </div>
    
    <table id="dataTable" width="350px" border="1">
      <thead>
        <tr>
          <th class="name-col">Name</th>
          <th>1</th>
          <th>2</th>
          <th>3</th>
          <th>4</th>
          <th>5</th>
          <th>6</th>
          <th>7</th>
          <th>8</th>
          <th>9</th>
          <th>10</th>
          <th>11</th>
          <th>12</th>
          <th>13</th>
          <th>14</th>
          <th>15</th>
          <th>16</th>
          <th>17</th>
          <th>18</th>
          <th>19</th>
          <th>20</th>
          <th>21</th>
          <th>22</th>
          <th>23</th>
          <th>24</th>
          <th>25</th>
          <th>26</th>
          <th>27</th>
          <th>28</th>
          <th>29</th>
          <th>30</th>
          <th>31</th>
          <th class="missed-col">Days Missed</th>
          <th>Remove</th>
        </tr>
      </thead>
    
      <input type="button" value="Add Row" onclick="addRow('dataTable')">
    
    
      <tbody>
        <tr class="visitor">
          <td class="name-col"><input type="text" placeholder="Your name"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="attend-col"><input type="checkbox"></td>
          <td class="missed-col">0</td><type="checkbox"></td>
          <td><input type="button" value="(Delete)"></td>
          
        </tr>
      </tbody>
    </table>
</html>

CSS


body {
    line-height: 1.9;
    margin: 2em;
    min-width: 1100px;
}

th {
    background-color: #001f3f;
    color: #fff;
    padding: 1em 1.3em;

}

td {
    border-top: 5px solid #eee;
    padding: 0.5em 1em;

}

input {
    cursor: pointer;
}


th.missed-col {
    background-color: #f00;
}



th.Attend-col {
    background-color: #f00;
    
}

td.Attend-col {
    background-color: #ffecec;
    color: #f00;
    text-align: center;
    
}

.name-col {
    text-align: left;
    min-width: 11rem;
  
}

td.missed-col {
    background-color: #ffecec;
    color: #f00;
    text-align: center;
}


input::placeholder {
    font-weight: bold;
    opacity: .5;
    color: black;
}


      .mistyrose {
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        position: fixed;
        background-image: linear-gradient(
            216deg,
            rgba(77, 77, 77, 0.05) 0%,
            rgba(77, 77, 77, 0.05) 25%,
            rgba(42, 42, 42, 0.05) 25%,
            rgba(42, 42, 42, 0.05) 38%,
            rgba(223, 223, 223, 0.05) 38%,
            rgba(223, 223, 223, 0.05) 75%,
            rgba(36, 36, 36, 0.05) 75%,
            rgba(36, 36, 36, 0.05) 100%
          ),
          linear-gradient(
            44deg,
            rgba(128, 128, 128, 0.05) 0%,
            rgba(128, 128, 128, 0.05) 34%,
            rgba(212, 212, 212, 0.05) 34%,
            rgba(212, 212, 212, 0.05) 57%,
            rgba(25, 25, 25, 0.05) 57%,
            rgba(25, 25, 25, 0.05) 89%,
            rgba(135, 135, 135, 0.05) 89%,
            rgba(135, 135, 135, 0.05) 100%
          ),
          linear-gradient(
            241deg,
            rgba(55, 55, 55, 0.05) 0%,
            rgba(55, 55, 55, 0.05) 14%,
            rgba(209, 209, 209, 0.05) 14%,
            rgba(209, 209, 209, 0.05) 60%,
            rgba(245, 245, 245, 0.05) 60%,
            rgba(245, 245, 245, 0.05) 69%,
            rgba(164, 164, 164, 0.05) 69%,
            rgba(164, 164, 164, 0.05) 100%
          ),
          linear-gradient(
            249deg,
            rgba(248, 248, 248, 0.05) 0%,
            rgba(248, 248, 248, 0.05) 32%,
            rgba(148, 148, 148, 0.05) 32%,
            rgba(148, 148, 148, 0.05) 35%,
            rgba(202, 202, 202, 0.05) 35%,
            rgba(202, 202, 202, 0.05) 51%,
            rgba(181, 181, 181, 0.05) 51%,
            rgba(181, 181, 181, 0.05) 100%
          ),
          linear-gradient(92deg, rgb(255, 228, 225), rgb(255, 228, 225));
        z-index: -6;
      }

Javascript

function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
    var colCount = table.rows[1].cells.length;
    for (var i = 0; i < colCount; i++) {
        var newcell = row.insertCell(i);
        newcell.innerHTML = table.rows[1].cells[i].innerHTML;
        switch (newcell.childNodes[0].type) {
            case "text":
                newcell.childNodes[0].value = "";
                break;
            case "checkbox":
                newcell.childNodes[0].checked = false;
                break;
            case "select-one":
                newcell.childNodes[0].selectedIndex = 0;
                break;
        }
    }
}



$('table').on('click', 'input[type="button"]', function(e){
   $(this).closest('tr').remove()
})

$("#checkAll").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
});

这是 visual studio code 的输出但不起作用

这是 codepen 中的输出

我将它复制粘贴到 visual studio 代码中并链接 HTML、CSS 和 Javascript，大多数都是正确的（我认为）但我认为红色代码是错误的，我想这就是我的网站无法运行的原因但我不知道如何，因为缺乏 visual studio 代码知识。我是 visual studio 代码的新手。

javascript html css visual-studio-code copy-paste
3个回答
0
投票

你当然需要正确关闭标签，但这里真正的问题是你在搜索栏中输入文件名，就像网站 url 一样，这是行不通的。最简单的（因为你已经安装了它），也是最好的，查看你的 html 结果并编辑它的方法是点击右下角的“上线”按钮;这将在您的计算机上启动本地服务器，每次您保存文件时，结果都会自动加载。 不过，如果您使用浏览器打开“attendance.html”文件，您将看到您所期望的页面。最后，您可以输入“file:////Attendance.html”来打开任何浏览器兼容的文件。

0
投票

我创建了另一个文件，对吗？还有红色的“边框”我怎么关闭它，我关闭了但我不知道关闭边框

-1
投票

如果您只是在地址栏中输入

attendace.html
，该页面将不会为您打开。在 VS Code 上，您可以安装一个名为 live server 的扩展，然后按照说明进行操作，否则，您可以直接进入您拥有的文件夹 保存您的文件，然后使用任何浏览器打开
.html
文件。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.