文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用客户端的spin.js (Javascript，Node)

问如何使用客户端的spin.js (Javascript，Node)
EN

Stack Overflow用户

提问于 2018-05-14 16:39:18

回答 1查看 1.6K关注 0票数 0

我正在尝试使用spin.js (https://spin.js.org/#!)但是我有一些问题。

正在做什么

npm install spin.js

然后

const Spinner = require('spin.js');

不工作，因为您需要浏览模块才能使用来自客户端的模块。

我还试图复制和过去的spin.js (https://spin.js.org/spin.js)，并从html引用它，但是它给了我一个spin.js中的错误

export { Spinner };

作为

Uncaught SyntaxError: Unexpected token export

从客户端使用spin.js需要什么？

javascript

node.js

npm

spin.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-05-14 16:39:18

好吧，所以我想通了。

你要做的是：

将spin.js文件复制到本地文件系统(称为spin.js)，并在html文件中的body标记末尾引用本地spin.js。

...
<script type="text/javascript" src="js/spin.js"></script>
<script type="text/javascript" src="js/scriptWithSpinner.js"></script>
</body>

在spin.js中注释掉下面一行。

export { Spinner };

从https://spin.js.org/spin.css复制CSS并将其存储在本地文件系统中。请参考html文件头中的CSS。

<head>
    <meta charset="utf-8">
    ...

    <link rel="stylesheet" type="text/css" href="mystyles.css" />
    <link rel="stylesheet" type="text/css" href="spin.css" />
    ...
</head>

如果使用express，则可能需要在服务器代码中公开带有js和CSS的目录，以便html文件能够读取它。

现在，您可以从scriptWithSpinner.js直接使用全局定义的Spinner对象，不需要导入或要求。

scriptWithSpinner.js

var opts = {
  lines: 13, // The number of lines to draw
  length: 38, // The length of each line
  width: 17, // The line thickness
  radius: 45, // The radius of the inner circle
  scale: 1, // Scales overall size of the spinner
  corners: 1, // Corner roundness (0..1)
  color: '#ffffff', // CSS color or array of colors
  fadeColor: 'transparent', // CSS color or array of colors
  speed: 1, // Rounds per second
  rotate: 0, // The rotation offset
  animation: 'spinner-line-fade-quick', // The CSS animation name for the lines
  direction: 1, // 1: clockwise, -1: counterclockwise
  zIndex: 2e9, // The z-index (defaults to 2000000000)
  className: 'spinner', // The CSS class to assign to the spinner
  top: '50%', // Top position relative to parent
  left: '50%', // Left position relative to parent
  shadow: '0 0 1px transparent', // Box-shadow for the lines
  position: 'absolute' // Element positioning
};

var target = document.getElementsByClassName('uploader')[0];
var spinner = new Spinner(opts).spin(target);

票数 5

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50335171

复制

相似问题

问如何使用客户端的spin.js (Javascript，Node)
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用客户端的spin.js (Javascript，Node)EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用客户端的spin.js (Javascript，Node)
EN