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%;
}
しかし、何らかの理由でこれが時計の外観です。その理由について何か考えはありますか?