使用javascript spin.js库时出错

Error when I used javascript spin.js library

本文关键字：出错 js javascript spin 使用      更新时间：2023-09-26

我使用的是asp-mvc，需要使用spin.js，但无法使用。这是我正在使用的代码。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>spin.js example</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/spin.js/1.2.7/spin.min.js"></script>
</head>
<body>
    <div id="foo"></div>
    <script>
        var opts = {
            lines: 10, // 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: 25, // Top position relative to parent in px
            left: 25 // Left position relative to parent in px
        };
        var target = document.getElementById('foo');
        var spinner = new Spinner(opts).spin(target);
    </script>
</body>
</html>

但当我运行它时，这行显示了一个异常

var spinner = new Spinner(opts).spin(target);

并且消息是

"未定义微调器"

关于如何解决这个问题，有什么想法吗？

使用旋转库的完全限定路径，当将其插入此处的StackOverflow代码片段中时，它似乎可以正常工作（实际上是复制了您的问题，没有其他修改）。这可能表明您的代码存在其他问题（这是整个页面吗），或者您的浏览器缓存了导致问题的内容。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>spin.js example</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/spin.js/1.2.7/spin.min.js"></script>
</head>
<body>
    <div id="foo"></div>
    <script>
        var opts = {
            lines: 10, // 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: 25, // Top position relative to parent in px
            left: 25 // Left position relative to parent in px
        };
        var target = document.getElementById('foo');
        var spinner = new Spinner(opts).spin(target);
    </script>
</body>
</html>

尝试使用绝对url（使用类似http的方案）。

<script src="http://cdnjs.cloudflare.com/ajax/libs/spin.js/1.2.7/spin.min.js"/>

希望这能有所帮助。

相关文章：