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

Question

I am new to Javacript (very, very new) and I need to place a loading spinner on a site. 我是Javacript的新手（非常新），我需要在网站上放置一个加载微调器。 We currently have a screensaver and once you tap the screen it takes a awhile to get to the necessary url. 我们目前有一个屏幕保护程序，一旦您点击屏幕，就会花一些时间才能找到所需的网址。 So, we wanted to place a spinner to make sure users would not continue to tap the screen. 因此，我们希望放置一个微调器，以确保用户不会继续点击屏幕。

I am using spin.js abd I am pretty sure I am doing something wrong as it is not showing up when I do a test. 我正在使用spin.js abd，我很确定自己做错了什么，因为在进行测试时没有显示。

Here is the code I am using: 这是我正在使用的代码：

<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>

Any advice will be appreciated. 任何建议将被认真考虑。

Answer 1

A few things are wrong with your code: 您的代码有些错误：

you have 2 closing <script/> tags after eachother (right before ), so that's a syntax error. 您在彼此之后有2个结束<script/>标记（在之前），这是一个语法错误。
you have another syntax error. 您还有另一个语法错误。 You're not closing jqueries document.ready function properly. 您没有正确关闭jqueries document.ready函数。
You're using a jQuery method but you're not including the jQuery library in your code. 您正在使用jQuery方法，但未在代码中包含jQuery库。
You say color:'#000' in the spinner options, which means the spinner will be black (same as your background color so you will never see it). 您在微调器选项中说color:'#000' ，这意味着微调器将为黑色（与您的背景色相同，因此您将永远看不到它）。

The spinner works in its most simple form. 微调器以其最简单的形式工作。 See working example: 请参阅工作示例：

http://jsfiddle.net/wLkganhm/ http://jsfiddle.net/wLkganhm/

If you're very new to javascript I suggest reading up on how to use the debugger so you can find the syntax errors for yourself :) 如果您不熟悉javascript，建议您阅读有关如何使用调试器的信息，以便您自己找到语法错误：）

Answer 2

You have a few issues with your code as already pointed out. 如前所述，您的代码存在一些问题。 I've put up a cleaned up version here http://jsbin.com/payuzeyopa . 我在这里http://jsbin.com/payuzeyopa整理了一个清理版本。

Things to improve on/fix: 改进/修复的问题：

Try using a site like JSFiddle or JSBin to share/prototype your code with others 尝试使用类似JSFiddle或JSBin的网站与他人共享/原型化您的代码
Keep your HTML, CSS and JavaScript files separate 将您的HTML，CSS和JavaScript文件分开保存
Spot errors early by using tools built into the browser. 通过使用浏览器中内置的工具及早发现错误。 For example, see http://discover-devtools.codeschool.com/ for an excellent starter. 例如，有关出色的入门指南，请参见http://discover-devtools.codeschool.com/ 。
Finally, read up on JavaScript and HTML :) 最后，阅读JavaScript和HTML :)

Good luck! 祝好运！

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