Javascript spin.js不'；似乎不起作用_Javascript_Jquery_Html_Css_Spin.js

Javascript spin.js不'；似乎不起作用

javascript jquery html css

Javascript spin.js不'；似乎不起作用,javascript,jquery,html,css,spin.js,Javascript,Jquery,Html,Css,Spin.js,我正在尝试使用spin.js库来显示正在加载的动画。然而，离开办公室，我似乎无法让它工作/出现；当我在Firefox中打开html文件时，空的div标记就很明显了这是我的代码（spinnertest.html）：变量选项={ lines:13，//要绘制的行数长度：7，//每行的长度宽度：4，//线条粗细半径：10，//内圈的半径拐角：1，//拐角圆度（0..1）旋转：0，//旋转偏移量颜色：'#000'、//#rgb或#rrggbb 速度：1，每秒//圈轨迹：60，//余辉

我正在尝试使用spin.js库来显示正在加载的动画。然而，离开办公室，我似乎无法让它工作/出现；当我在Firefox中打开html文件时，空的div标记就很明显了

这是我的代码（spinnertest.html）：


变量选项={
lines:13，//要绘制的行数
长度：7，//每行的长度
宽度：4，//线条粗细
半径：10，//内圈的半径
拐角：1，//拐角圆度（0..1）
旋转：0，//旋转偏移量
颜色：'#000'、//#rgb或#rrggbb
速度：1，每秒//圈
轨迹：60，//余辉百分比
shadow:false，//是否渲染阴影
hwaccel:false，//是否使用硬件加速
className:'微调器'，//要分配给微调器的CSS类
zIndex:2e9，//z索引（默认为2000000000）
top:'自动'，//在px中相对于父对象的top位置
左：“自动”//在px中相对于父对象的左位置
};
var target=document.getElementById（“微调器”）；
var微调器=新微调器（opts）。微调（目标）；

适用于感兴趣的人的工作代码（需要jquery-1.9.0.min.js和spin.min.js在同一目录中）：

<html>
<head>
    <script type="text/javascript" src="spin.min.js"></script>
    <script type="text/javascript" src="jquery-1.9.0.min.js"></script>
    <script type="text/javascript">
        $(function() {
            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("spinner");
            var spinner = new Spinner(opts).spin(target);
        });
    </script>
</head>
<body>
    <div id="spinner">
    </div>
</body>


$（函数（）{
变量选项={
lines:13，//要绘制的行数
长度：7，//每行的长度
宽度：4，//线条粗细
半径：10，//内圈的半径
拐角：1，//拐角圆度（0..1）
旋转：0，//旋转偏移量
颜色：'#000'、//#rgb或#rrggbb
速度：1，每秒//圈
轨迹：60，//余辉百分比
shadow:false，//是否渲染阴影
hwaccel:false，//是否使用硬件加速
className:'微调器'，//要分配给微调器的CSS类
zIndex:2e9，//z索引（默认为2000000000）
top:'自动'，//在px中相对于父对象的top位置
左：“自动”//在px中相对于父对象的左位置
};
var target=document.getElementById（“微调器”）；
var微调器=新微调器（opts）。微调（目标）；
});

您必须在DOM就绪状态下对其进行初始化，否则

target

将为

null

。您还应该将include脚本放在一个单独的

script

标记中

使用jquery

$(function() {
  var target = document.getElementById("spinner");
  var spinner = new Spinner(opts).spin(target);
});

我不相信带有src属性的

script

标记中的代码会执行。如果您将代码更改为以下内容，它是否有效

<script type="text/javascript" src="spin.min.js"></script>
<script type="text/javascript">
  $(document).ready(function () {
    var opts = ...
    ...
    // all the code that you currently have between <script> and
    // </script> goes here
  });
</script>


$（文档）.ready（函数（）{
var opts=。。。
...
//您当前在和之间拥有的所有代码
//去这里
});

啊，是的，那会有帮助。但是仍然不起作用——只是得到了一个空白的div标记。现在成功了，干杯。

<script type="text/javascript" src="spin.min.js"></script>
<script type="text/javascript">
  $(document).ready(function () {
    var opts = ...
    ...
    // all the code that you currently have between <script> and
    // </script> goes here
  });
</script>