Question

大家好，

我是JavaScript的新手，经过大量的互联网研究和实施微调器的尝试失败后，我决定问你。

我正在使用Spin.js（http://fgnass.github.com/spin.js/#v1.2.6）。它似乎是一个很棒的工具，但我根本无法使它工作。我的问题是我做错了什么？我无法弄明白。任何帮助都感激不尽。非常感谢你。

这是我的代码：

   <script src="Scripts/Spin.js" type="text/javascript"></script>

    <script type="text/javascript">
           function spinnerInit() {
               var opts = {
                   lines: 13, // The number of lines to draw
                   length: 7, // The length of each line
                   width: 4, // The line thickness
                   radius: 10, // The radius of the inner circle
                   corners: 1, // Corner roundness (0..1)
                   rotate: 0, // The rotation offset
                   color: '#000', // #rgb or #rrggbb
                   speed: 1, // Rounds per second
                   trail: 60, // Afterglow percentage
                   shadow: false, // Whether to render a shadow
                   hwaccel: false, // Whether to use hardware acceleration
                   className: 'spinner', // The CSS class to assign to the spinner
                   zIndex: 2e9, // The z-index (defaults to 2000000000)
                   top: 'auto', // Top position relative to parent in px
                   left: 'auto', // Left position relative to parent in px
                   visibility: true
               };

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

      <script type="text/javascript">
           $(document).ready(function () {
               $('#btnPerformSave').click(function () {
                   spinnerInit();
               });
           });
       </script>

     <div id="spinnerContainer" class="spinner" style="width: 100%; height: 150%;
           position: absolute; z-index: 100; background-color: Gray;
           left: 0; top:  0; bottom: 0;right: 0">
       </div>

Answer 1

尝试替换

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

与

$('#spinnerContainer').after(new Spinner(opts).spin().el);

您需要将spin方法创建的html元素附加到dom

以下是一个让您入门的示例http://jsfiddle.net/5CQJP/1/

Answer 2

我不确定这个问题是否得到了回答，但对于那些仍在寻找答案的人来说：

我发现我需要在spinnerContainer div下面移动javascript。我相信如果你把javascript放在onload事件中，这也会有效。这是我做的：

<div id="spinnerContainer" class="spinner" style="width:100px;height:100px;background-color: Gray;">
</div>
<script src="Scripts/Spin.js" type="text/javascript"></script>
<script type="text/javascript">
    var opts = {
      lines: 13, // The number of lines to draw
      length: 7, // The length of each line
      width: 4, // The line thickness
      radius: 10, // The radius of the inner circle
      corners: 1, // Corner roundness (0..1)
      rotate: 0, // The rotation offset
      color: '#000', // #rgb or #rrggbb
      speed: 1, // Rounds per second
      trail: 60, // Afterglow percentage
      shadow: false, // Whether to render a shadow
      hwaccel: false, // Whether to use hardware acceleration
      className: 'spinner', // The CSS class to assign to the spinner
      zIndex: 2e9, // The z-index (defaults to 2000000000)
      top: 'auto', // Top position relative to parent in px
      left: 'auto' // Left position relative to parent in px
    };
    var target = document.getElementById('spinnerContainer');
    var spinner = new Spinner(opts).spin(target);
</script>

Answer 3

这是我的答案。效果很好。

//Declare Script
<script src="Scripts/spin.js" type="text/javascript"></script>


 <button  id="btnSearchClick">Search</button>

//Displays Loading Spinner
<div id="loading">
    <div id="loadingcont">
        <p id="loadingspinr">
        </p>
    </div>
</div>



<script type="text/javascript">
     //On button click load spinner and go to another page
     $("#btnSearchClick").click(function () {  
        //Loads Spinner
        $("#loading").fadeIn();
        var opts = {
            lines: 12, // The number of lines to draw
            length: 7, // The length of each line
            width: 4, // The line thickness
            radius: 10, // The radius of the inner circle
            color: '#000', // #rgb or #rrggbb
            speed: 1, // Rounds per second
            trail: 60, // Afterglow percentage
            shadow: false, // Whether to render a shadow
            hwaccel: false // Whether to use hardware acceleration
        };
        var trget = document.getElementById('loading');
        var spnr = new Spinner(opts).spin(trget);

        //Go another page.
        window.location.href = "http://www.example.com/";
   });
 </script>

Answer 4

试试这个：

var target = document.getElementById('spinnerContainer');
           //target.style.display = "block";
           var spinner = new Spinner(opts);

如果你使用jQuery：

           $(target).html(spinner.el);

如果没有，如文档中那样：

           target.innerHtml = '';
           target.appendChild(spinner.el);

我没试过这个，但它应该有效。如果出现问题，请告诉我。

Answer 5

我知道这已经晚了但是我很好奇你是否曾经开始工作。我会告诉你一件我做过的蠢事并没有意识到这一点。我让旋转器的颜色与它出现的背景颜色相同，这就是为什么我看不到它。我也使用了JQuery，如https://gist.github.com/its-florida/1290439 像魅力一样工作

如何使用Spin.js使微调器工作？

5 个答案: