spin.js没有显示在我的网站上？

Question

我是Javacript的新手（非常新），我需要在网站上放置一个加载微调器。 我们目前有一个屏幕保护程序，一旦您点击屏幕，就会花一些时间才能找到所需的网址。 因此，我们希望放置一个微调器，以确保用户不会继续点击屏幕。

我正在使用spin.js abd，我很确定自己做错了什么，因为在进行测试时没有显示。

这是我正在使用的代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, width=device-width" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>THE TITLE</title>
<style type="text/css">
body {
    background-color: #000;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    width: 1024px;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
    -webkit-user-select: none;
    -webkit-text-size-adjust: none;
}
a,img,map,area {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
</style>
<script type="text/javascript" src="spin.js"></script>
<script type="text/javascript">
  $(document).ready(function () {
var opts = {
  lines: 13, // The number of lines to draw
  length: 20, // The length of each line
  width: 10, // The line thickness
  radius: 30, // The radius of the inner circle
  corners: 1, // Corner roundness (0..1)
  rotate: 0, // The rotation offset
  direction: 1, // 1: clockwise, -1: counterclockwise
  color: '#000', // #rgb or #rrggbb or array of colors
  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: '50%', // Top position relative to parent
  left: '50%' // Left position relative to parent
};
var target = document.getElementById('foo');
var spinner = new Spinner(opts).spin(target);
    </script>
</script>
</head>
<body onLoad="timeout(7,goto,'screen3.html');">
<a href="SITE URL"><img src="screen2.jpg" width="1024" height="768" border="0"></a>
    <div id="spinner">
    </div>
</body>
</html>

任何建议将被认真考虑。

Answer 1

您的代码有些错误：

您在彼此之后有2个结束<script/>标记（在之前），这是一个语法错误。
您还有另一个语法错误。 您没有正确关闭jqueries document.ready函数。
您正在使用jQuery方法，但未在代码中包含jQuery库。
您在微调器选项中说color:'#000' ，这意味着微调器将为黑色（与您的背景色相同，因此您将永远看不到它）。

微调器以其最简单的形式工作。 请参阅工作示例：

http://jsfiddle.net/wLkganhm/

如果您不熟悉javascript，建议您阅读有关如何使用调试器的信息，以便您自己找到语法错误：）

Answer 2

如前所述，您的代码存在一些问题。 我在这里http://jsbin.com/payuzeyopa整理了一个清理版本。

改进/修复的问题：

尝试使用类似JSFiddle或JSBin的网站与他人共享/原型化您的代码
将您的HTML，CSS和JavaScript文件分开保存
通过使用浏览器中内置的工具及早发现错误。 例如，有关出色的入门指南，请参见http://discover-devtools.codeschool.com/ 。
最后，阅读JavaScript和HTML :)

祝好运！

spin.js没有显示在我的网站上？

问题描述

2 个解决方案

解决方案1
0 已采纳 2014-11-12 15:11:47

解决方案2
0 2014-11-12 15:23:08

spin.js没有显示在我的网站上？

问题描述

2 个解决方案

解决方案1 0 已采纳 2014-11-12 15:11:47

解决方案2 0 2014-11-12 15:23:08

解决方案1
0 已采纳 2014-11-12 15:11:47

解决方案2
0 2014-11-12 15:23:08