javascript - JS script not running?

Have no experience with JS or JQuery.

I'm trying to use this:

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>

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:

$(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:

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

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?

Have no experience with JS or JQuery.

I'm trying to use this: http://codepen.io/highplainsdrifter/pen/Aicls

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:

$(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:

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

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?

Share Improve this question edited Sep 15, 2013 at 18:07 asked Sep 15, 2013 at 17:42 Katie H 2,2935 gold badges31 silver badges52 bronze badges

1 The codepen code you posted works in my puter. Does it not for you ? – Sergio Commented Sep 15, 2013 at 17:44
You can debug it in your browser. In Chrome or Firefox (with Firebug), usually pressing F12 will bring up the dev tools. Place breakpoints in your code, and watch the console for exceptions. – Geeky Guy Commented Sep 15, 2013 at 17:45
Can you post the whole code? I suspect you are missing some important library? – Neeraj Commented Sep 15, 2013 at 17:45
Are you using the exact HTML, CSS and JS from the codepen site? – BenM Commented Sep 15, 2013 at 17:45

Add a ment |

2 Answers 2

Sorted by: Reset to default 2

As you are using jQuery wrap your function in document.ready like so

$(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.

The script requires jQuery. The variables with $ are trying to create jQuery objects from the selector that is passed as a parameter.

Place another script tag above the clock script, with the following content:

<script type="text/javascript" src="code.jquery./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(function($) {
    // Clock script here
});

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - JS script not running? - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)