Question

没有使用JS或JQuery的经验。

我正在尝试使用此功能：http://codepen.io/highplainsdrifter/pen/Aicls

时钟呈现但实际上不起作用。对于JavaScript，我尝试在html中的<script></script>标记之间粘贴它，并尝试将其放入自己的文件并引用它<script src="./clock.js"></script>

是否缺少此内容，有些分号或标点符号？

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>

和

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

最后，在我的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%;
}

但由于某些原因，这就是时钟的外观，为什么会这样的想法？

enter image description here

Answer 1

当你使用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。

Answer 2

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

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

<script type="text/javascript" src="code.jquery.com/jquery-latest.min.js"></script>

在document.ready闭包中包装任何需要jQuery的代码也是一种好习惯。即。

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

JS脚本没有运行？

2 个答案: