javascript JS 脚本没有运行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18815461/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JS script not running?
提问by Katie H
Have no experience with JS or JQuery.
没有使用 JS 或 JQuery 的经验。
I'm trying to use this: http://codepen.io/highplainsdrifter/pen/Aicls
我正在尝试使用这个：http: //codepen.io/highplainsdrifter/pen/Aicls
The clock renders but does not actually work. For the JavaScript, I tried pasting it in between <script></script>tags in the html, and also tried putting it into it's own file and referring to it <script src="./clock.js"></script>
时钟呈现但实际上不起作用。对于 JavaScript，我尝试将其粘贴在<script></script>html 中的标签之间，并尝试将其放入自己的文件中并引用它<script src="./clock.js"></script>
Is something missing from this, some semicolon or punctuation?
是否缺少某些分号或标点符号？
var clockH = $(".hours");
var clockM = $(".minutes");
var clockS = $(".seconds");
function time() {
var d = new Date(),
s = d.getSeconds() * 6,
m = d.getMinutes() * 6,
h = d.getHours() % 12 / 12 * 360;
clockH.css("transform", "rotate("+h+"deg)");
clockM.css("transform", "rotate("+m+"deg)");
clockS.css("transform", "rotate("+s+"deg)");
}
var clock = setInterval(time, 1000);
=========
==========
Updates. Ok, so here is what I have in my js file:
更新。好的，这是我的 js 文件中的内容：
$(document).ready(function(){
var clockH = $(".hours");
var clockM = $(".minutes");
var clockS = $(".seconds");
function time() {
var d = new Date(),
s = d.getSeconds() * 6,
m = d.getMinutes() * 6,
h = d.getHours() % 12 / 12 * 360;
clockH.css("transform", "rotate("+h+"deg)");
clockM.css("transform", "rotate("+m+"deg)");
clockS.css("transform", "rotate("+s+"deg)");
}
var clock = setInterval(time, 1000);
});
In the HTML:
在 HTML 中：
<script src="./jquery.js"></script>
<script src="./clock.js"></script>
and
和
<div class="clock">
<span class="hours"></span>
<span class="minutes"></span>
<span class="seconds"></span>
<span class="midday"></span>
<span class="three"></span>
<span class="six"></span>
<span class="nine"></span>
</div>
Finally, in my css:
最后，在我的 css 中：
body { background: #574b57; }
.clock {
background-color:#c7c7c7;
width: 250px;
height: 250px;
border: 4px solid #999;
border-radius: 100%;
position: relative;
margin: 20px auto;
-moz-box-shadow: 1px 5px 5px rgba(0,0,0,0.6);
-webkit-box-shadow: 1px 5px 5px rgba(0,0,0,0.6);
box-shadow: 1px 5px 50px rgba(0,0,0,0.6);
}
.clock:after {
background:#FFF;
border-radius: 10px;
border:#FFF 5px solid;
content:"";
left:50%;
position:absolute;
top:50%;
margin-left: -5px;
margin-top: -5px;
-moz-box-shadow: 1px 5px 5px rgba(68,68,68,0.1);
-webkit-box-shadow: 1px 5px 5px rgba(68,68,68,0.1);
box-shadow: 1px 5px 5px rgba(68,68,68,0.1);
}
.clock span {
display: block;
background: white;
position: absolute;
transform-origin: bottom center;
left: 50%;
bottom: 50%;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
.clock .hours {
height: 30%;
width: 5px;
margin-left: -2px;
-moz-box-shadow: 1px 5px 5px rgba(68,68,68,0.2);
-webkit-box-shadow: 1px 5px 5px rgba(68,68,68,0.2);
box-shadow: 1px 5px 5px rgba(68,68,68,0.2);
}
.clock .minutes {
height: 45%;
width: 3px;
margin-left: -1px;
-moz-box-shadow: 1px 5px 5px rgba(68,68,68,0.2);
-webkit-box-shadow: 1px 5px 5px rgba(68,68,68,0.2);
box-shadow: 1px 5px 5px rgba(68,68,68,0.2);
}
.clock .seconds {
background: #949494;
height: 47%;
width: 1px;
margin-left: 0px;
-moz-box-shadow: 1px 5px 5px rgba(68,68,68,0.6);
-webkit-box-shadow: 1px 5px 5px rgba(68,68,68,0.6);
box-shadow: 1px 5px 5px rgba(68,68,68,0.6);
}
.clock .midday, .clock .three, .clock .six, .clock .nine {
background: #949494;
height: 10%;
width: 6px;
left: 49%;
top: 2%;
-moz-box-shadow: 1px 0px 5px rgba(68,68,68,0.3);
-webkit-box-shadow: 1px 0px 5px rgba(68,68,68,0.3);
box-shadow: 1px 0px 5px rgba(68,68,68,0.3);
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
.clock .three {
top: 49%;
left: 89%;
height: 6px;
width: 10%;
}
.clock .six {
top: 89%;
left: 49%;
}
.clock .nine {
top: 49%;
left: 1%;
height: 6px;
width: 10%;
}
But for some reason this is how the clock looks, any ideas on why so?
但出于某种原因，这就是时钟的样子，有什么想法吗？
采纳答案by BenM
As you are using jQuery wrap your function in document.ready like so
当您使用 jQuery 时，将您的函数包装在 document.ready 中，就像这样
$(document).ready(function(){
var clockH = $(".hours");
var clockM = $(".minutes");
var clockS = $(".seconds");
function time() {
var d = new Date(),
s = d.getSeconds() * 6,
m = d.getMinutes() * 6,
h = d.getHours() % 12 / 12 * 360;
clockH.css("transform", "rotate("+h+"deg)");
clockM.css("transform", "rotate("+m+"deg)");
clockS.css("transform", "rotate("+s+"deg)");
}
var clock = setInterval(time, 1000);
});
Also make sure you are referencing jQuery in your script tags.
还要确保您在脚本标签中引用了 jQuery。
回答by Oscar Barrett
The script requires jQuery. The variables with $ are trying to create jQuery objects from the selector that is passed as a parameter.
该脚本需要 jQuery。带有 $ 的变量试图从作为参数传递的选择器创建 jQuery 对象。
Place another script tag above the clock script, with the following content:
在时钟脚本上方放置另一个脚本标签，内容如下：
<script type="text/javascript" src="code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="code.jquery.com/jquery-latest.min.js"></script>
It is also good practice to wrap any code that requires jQuery in a document.ready closure. i.e.
将任何需要 jQuery 的代码包装在 document.ready 闭包中也是一种很好的做法。IE
jQuery(document).ready(function($) {
// Clock script here
});
