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

Question

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

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

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

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

Answer 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 文件夹放在同一文件夹中。

双 click/Run HTML 文件。 URL 应该是 file:///C:/path/to/the/file.html.

你应该看看

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

How do I use chessboard.js , a javascript chessboard?

html

javascript

chessboard.js