3

没有 JS 或 JQuery 的经验。

我正在尝试使用这个：http ://codepen.io/highplainsdrifter/pen/Aicls

时钟呈现但实际上并没有工作。对于 JavaScript，我尝试将其粘贴在<script></script>html 中的标签之间，并尝试将其放入它自己的文件中并引用它<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%;
}

但由于某种原因，这就是时钟的样子，有什么想法吗？

在此处输入图像描述

4

2 回答 2

2

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

于 2013-09-15T17:47:01.447 回答
2

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

在时钟脚本上方放置另一个脚本标签，内容如下：

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

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

jQuery(document).ready(function($) {
    // Clock script here
});
于 2013-09-15T17:47:24.000 回答