Question

我正在尝试使用http://spin.js.org/在我的网站上创建一个微调器，它在AJAX帖子触发时开始旋转，在完成时停止。不过，我正努力让旋转器工作。

我有一个节点应用程序，并且正在使用EJS进行模板化。在使用部分下，spin.js的网站说：

import {Spinner} from 'spin.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
  opacity: 0.25, // Opacity of the lines
  rotate: 0, // The rotation offset
  direction: 1, // 1: clockwise, -1: counterclockwise
  speed: 1, // Rounds per second
  trail: 60, // Afterglow percentage
  fps: 20, // Frames per second when using setTimeout() as a fallback in IE 9
  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: none, // Box-shadow for the lines
  position: 'absolute' // Element positioning
};

var target = document.getElementById('foo');
var spinner = new Spinner(opts).spin(target);

我不确定import {Spinner} from 'spin.js'应该去哪里？我已经搜索了很多，并且无法找到如何实际实现这一点。我找到了this example of a jquery plugin for spin.js，但我也在努力解决这个问题。任何帮助将不胜感激！

截至目前，这就是我所拥有的：

<div id="spinnerContainer" class="spinner" style="width:100px;height:100px;background-color: Gray; color:black;">
</div>

<script src="/scripts/spin.js/spin.js" type="text/javascript"></script>
<script>
    var opts = {
      lines: 20, // The number of lines to draw
      length: 0, // The length of each line
      width: 15, // The line thickness
      radius: 42, // The radius of the inner circle
      scale: 0.85, // Scales overall size of the spinner
      corners: 1, // Corner roundness (0..1)
      color: '#41d62b', // CSS color or array of colors
      fadeColor: 'transparent', // CSS color or array of colors
      opacity: 0.05, // Opacity of the lines
      rotate: 0, // The rotation offset
      direction: 1, // 1: clockwise, -1: counterclockwise
      speed: 1, // Rounds per second
      trail: 74, // Afterglow percentage
      fps: 20, // Frames per second when using setTimeout() as a fallback in IE 9
      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, // Box-shadow for the lines
      position: 'absolute' // Element positioning
    };

    var target = document.getElementById('spinnerContainer');
    var spinner = new Spinner(opts).spin(target);
</script>

要在spin.js中加载的脚本正在正确查找文件，但是我从spin.js中得到引用行Uncaught SyntaxError: Unexpected token export的错误export { Spinner };

我也收到错误说Uncaught ReferenceError: Spinner is not defined，我认为这与上述错误有关，但我不确定。

Answer 1

如果您没有设置管理导入，也许您只想使用CDN version

＆＃13;

    var opts = {
      lines: 20, // The number of lines to draw
      length: 0, // The length of each line
      width: 15, // The line thickness
      radius: 42, // The radius of the inner circle
      scale: 0.85, // Scales overall size of the spinner
      corners: 1, // Corner roundness (0..1)
      color: '#41d62b', // CSS color or array of colors
      fadeColor: 'transparent', // CSS color or array of colors
      opacity: 0.05, // Opacity of the lines
      rotate: 0, // The rotation offset
      direction: 1, // 1: clockwise, -1: counterclockwise
      speed: 1, // Rounds per second
      trail: 74, // Afterglow percentage
      fps: 20, // Frames per second when using setTimeout() as a fallback in IE 9
      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, // Box-shadow for the lines
      position: 'absolute' // Element positioning
    };

    var target = document.getElementById('spinnerContainer');
    var spinner = new Spinner(opts).spin(target);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.js"></script>
<div id="spinnerContainer" class="spinner" style="width:100px;height:100px;background-color: Gray; color:black;">
</div>

＆＃13;

Answer 2

我遇到了同样的错误，请从@charlietfl答案中打开CDN文件，然后将其复制并替换为您的spin.js文件。它将起作用。

如何导入Javascript模块

2 个答案: