Javascript JS脚本没有运行？

没有使用JS或JQuery的经验

我试着用这个：

时钟渲染，但实际上不工作。对于JavaScript，我尝试将其粘贴在html中的

标记之间，还尝试将其放入自己的文件中并引用它

是否缺少一些分号或标点符号？

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

=========

更新。好的，下面是我的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);

});

在HTML中：

<script src="./jquery.js"></script>
<script src="./clock.js"></script>

但出于某种原因，这就是时钟的外观，你知道为什么吗？

---

在使用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);

});

---

还要确保在脚本标记中引用jQuery。

脚本需要jQuery。带有$的变量试图从作为参数传递的选择器创建jQuery对象

在时钟脚本上方放置另一个脚本标记，包含以下内容：

将任何需要jQuery的代码包装到document.ready闭包中也是一种很好的做法。 i、 e

---

你发布的代码笔代码在我的计算机中工作。它不适合您吗？您可以在浏览器中调试它。在Chrome或Firefox（带有Firebug）中，通常按F12键将打开开发工具。在代码中放置断点，并观察控制台是否有异常。是否可以发布整个代码？我怀疑你错过了一些重要的库？你使用的是codepen网站上的HTML、CSS和JS吗？是的，只是没有包装在jQuery中，谢谢！现在我必须弄清楚为什么它是倾斜的。很高兴知道它被修好了！在使用jQuery时，几乎总是必须使用上述方法才能顺利运行。你能提供一个倾斜时钟的屏幕截图吗？我不能说确切的问题，但它看起来像是因为时钟的css使用的是百分比，而不是绝对测量值（如像素），它所在的容器的大小很重要。基本上，你需要把你的时钟HTML放在一个与codepenI上的大小相同的容器中。对不起，我似乎没有弄清楚，外部容器的属性应该是什么样的，我试了250乘250，但似乎不起作用。你不应该用缩写$（function（）而不是$（document）。ready（function（）？

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%;
}

$(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);

});

jQuery(document).ready(function($) {
    // Clock script here
});