javascript - 如何使用 chessboard.js ,一个 javascript 棋盘?

标签 javascript html chessboard.js

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

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

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

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

最佳答案

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

<!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 .
你应该看到
enter image description here

关于javascript - 如何使用 chessboard.js ,一个 javascript 棋盘?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38927285/

相关文章:

javascript - mouseover mouseout JQuery 时自动播放/暂停

javascript - 使用完phantomjs网页后如何正确关闭?

android - Android 浏览器上的自动纸牌花色更换?

JavaScript 事件处理程序不工作

html - 使用 Bootstrap 3 的网格系统

javascript - 是否可以将依赖于 jQuery 的库 'chessboard.js' 与 React 一起使用?

javascript - svg.js bbox() 在scale() 之后返回相同的值

javascript - responseJson 未定义

javascript - React中Chessboardjs NPM包,referenceError $ is not Defined

python - 如何在 python 中找到 open-cv 相机校准常量,OpenCV 错误:断言失败(nimages > 0)在 cv::calibrateCamera