如何使用 chessboard.js ，一个 javascript 棋盘？答案

【问题标题】：How do I use chessboard.js , a javascript chessboard?如何使用 chessboard.js ，一个 javascript 棋盘？
【发布时间】：2016-08-12 22:30:56
【问题描述】：

我正在尝试在这里使用 javascript 棋盘：http://chessboardjs.com/。不幸的是，我不知道 javascript 或 CSS，并且对 HTML 很生疏，所以我不理解文档，即使这似乎是一个标准的 javascript 棋盘。

究竟如何安装和使用这个包来渲染棋盘？ “示例”都是 HTML 或 javascript 的 sn-ps，如果没有嵌入到工作网页中，对我来说毫无用处。当复制到我的主目录时，示例网页的源代码不起作用。例如，这里的网页http://chessboardjs.com/examples/1000 声称要渲染和清空板，并在他们的服务器上执行，但是当我将源复制到本地目录时，只会渲染一个空白页面。无论如何，该页面的来源对我来说没有意义，例如，它指的是文件 "js/chessboard.js" 和 "js/json3.min.js" ，这两个文件都不在发行版中。（当“chessboard.js”被替换为分发中的 javascript 文件的名称时，渲染也不起作用）。

我认为这个问题与搜索 img 文件的位置以及文件的存储位置有关。并且大概这些对于 javascript 专家来说是如此明显，以至于它们都隐含在这个包中，并且从未在文档中解释过。

所以，我想要一个文件 foo.html，当它复制到我的本地机器时，将使用 chessboard.js 源呈现棋盘。

【问题讨论】：

转到该示例页面并确保在保存时选择“网页，完成”或类似内容。
发行版中的“js/chessboard.js”文件在哪里？网页从哪里获取该文件？
明确地说，我想使用任何 javascript 的本地副本，因为最终我希望修改它。我不知道该网页是否以某种方式使用了来自其自己的服务器的“chessboard.js”，不在分发中的文件，或者我的分发是否已损坏或什么。再说一遍，您在下载的发行版中哪里看到“chessboard.js”？
即使我将 HTML 代码中的 "chessboard.js" 重命名为 "chessboard-0.3.0.js" ，该示例仍然对我不起作用。如果这很重要，我正在使用 file:///.... URL。然后是分发中不存在但在 HTML 示例中引用的所有其他 js/... 文件，例如 json3.min.js

标签： javascript html chessboard.js

【解决方案1】：

创建一个新的文本文件，并将其粘贴到里面：

<!DOCTYPE html>
<html>
  <head>
    <title>Chess</title>
    <link rel="stylesheet" href="css/chessboard-1.0.0.min.css">
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="js/chessboard-1.0.0.min.js"></script>
  </head>
  <body>
    <div id="board1" style="width: 400px"></div>
    <script>
        var board1 = ChessBoard('board1', 'start');
    </script>
  </body>
</html>

然后使用.html 或.htm 扩展名保存它。

接下来，从their download page 下载他们的可分发文件。并解压文件夹。

接下来，将您的 HTML 文件与解压缩后的可分发文件中的 js、img 和 css 文件夹放在同一文件夹中。

双击/运行 HTML 文件。 URL 应该是file:///C:/path/to/the/file.html。

你应该看到

【讨论】：

非常感谢！我确信这对于具有 javascript 和 CSS 专业知识的人来说是显而易见的，但我至少花了一个小时来玩弄这些东西，却无法让它发挥作用。这行得通，正是我想要的。
@kdog 乐于助人！我可以看到这个过程是如何令人困惑的。他们没有让大家知道 jQuery 是一个不包含在他们的可分发包中的依赖项。
@Astrydax 请提出一个新问题，解释您尝试了什么以及发生了什么
确保链接与文件名相同 - 即 css/chessboard-0.3.0.min.css 现在是 css/chessboard-1.0.0.min.css。