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

您的代码有些问题：

在彼此之后（之前）有两个结束<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 个答案: