Create a timer / stopwatch and start after animation

Question

Hi I'm working on a project and I've been thinking about if there is possible to start a timer after an animation has finsihed, and stop the timer onkeypress ? And then just send the time results to another page ? And with timer I mean stopwatch so no counter or anything else...

Anyway here is the original code:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Exercise1</title>
<style>
.first-child {
       width: 200px;
       height: 200px;
       background: white;
       margin-top: 150px;
       margin-bottom: 50px;
       margin-right: 0px;
       margin-left: 550px;
       -webkit-animation: myfirst 1s;
       animation: myfirst 1s;
}
@-webkit-keyframes myfirst {
       0% {background: white;}
      20% {background: white;}
      40% {background: white;}
      60% {background: white;}
      80% {background: white;}
     100% {background: red;}
}

.first-parent {
       color: blue;
       margin-top: 5px;
       margin-bottom: 50px;
       margin-left: 600px;
       margin-right: 0px;
}
.second-parent {
       color: red;
       margin-top: 0px;
       margin-bottom: 50px;
       margin-left: 40px;
       margin-right: 0px;
}
p {
       margin-left: 640px;
}
</style>
</head>
<body>

<div class='first-child'></div>

<button class='first-parent' onclick="window.location.href='Exercise2.html' ">B</button>

<button class='second-parent' onclick="window.location.href='Exercise2.html' ">R</button>

<br />
<p>1/2</p>

<script>
document.onkeypress = function(b) {
      b = b || window.event;
      var charCode = b.charCode || b.keyCode,
      character = String.fromCharCode(charCode);

      console.log(charCode);
      window.location.href="Exercise2.html";
};

document.onkeypredss = function(r) {
      r = r || window.event;
      var charCode = r.charCode || r.keyCode,
      character = String.fromCharCode(charCode);

      console.log(charCode);
      window.location.href='Exercise2.html';
};

</script>
</body>
</html>

As you can see I don't got any timer yet... Sorry about that but if there is any questions just ask, I'm most familiar with HTML, CSS, JavaScript and I know some jQuery but if there's another way to do it I gladly hear that too. Thanks in advance, peace !

score 1 · Accepted Answer · edited May 23 '17 at 12:05

1

Well, since you've tagged jQuery, I will give you a jQuery solution.

A stopwatch can be created using the following JavaScript/jQuery:

var h1 = document.getElementsByTagName('h1')[0],
    seconds = 0,
    t;
function add() {
    seconds++;
    h1.textContent = seconds;
    timer();
}
function timer() {
    t = setTimeout(add, 1000);
}

We then also need to define a start() and a stop() function which start and stop the timer:

// start and stop functions
function start() {
    timer();
}

function stop() {
    clearTimeout(t);
}

That's it! Now we've created a stopwatch.

In your question, you mention that you would like the stopwatch to start after an animation finishes. We can do this now by calling .start() in an animation's callback function like so:

// Example of an animation that starts the timer when complete
$("#animatedDiv").animate({
        left: "+=50",
        top: "+=150",
        height: "100px",
        width: "200px"
      }, 4000, function() {          // define a callback function

        // Animation complete.
        start();                    // Start the timer in the callback function
  });

Likewise, we can also stop() the timer upon a keypress:

// Example of a function that stops the timer
$(document).keypress(function( event ) {
  if ( event.which == 115 ) {       // when pressing s for 'stop'
     alert('You stopped the timer');
     stop();
  }
});

Now when we want to send the stopwatch's time to another page, we need to add the timer's value as a url parameter when directing to another page.

In general this is done as follows:

http://www.newpage.com/?myParameter=myValue

Where we send variable myParameter containing the value myValue.

In your example, we could do this as follows:

// button click function
$("#theButton").click(function() {
    window.open('http://www.yourpage.com/?time='+h1.textContent);
});

Where h1.textContent would then be the timer's value. The other page could then get the variable time from the url. If you don't know how to do this, read this:

I've put all of this together in a comprehensible jsFiddle:

jsFiddle DEMO

With that demo, it should be possible to achieve what you wanted to achieve.

enter image description here

edited May 23 '17 at 12:05

Community

1
1

answered Dec 28 '14 at 19:40

Jean-Paul

19,910
9
62
88

Ok It didnt work when I tried the code but I think there might be a problem with my browser or something I'm using Google Chrome but I also tried in Firefox but it didnt work there either. I looked in the console and it says: "Uncaught ReferenceError: $ is not defined" in both Chrome and Firefox – Nikki Dec 28 '14 at 21:36
@Nikki That means you didn't include jQuery. Search on Google for how to do that. Basically what you have to do is add a link to the jQuery file in a script declaration. – Jean-Paul Dec 28 '14 at 22:44
@Nikki And? Was it useful? – Jean-Paul Jan 15 '15 at 11:16
I don't really understand what u ment in the other comment, so at the moment no – Nikki Jan 16 '15 at 11:39
@Nikki Search on Google on how to include jQuery in your code. Once you've done that, it'll work. – Jean-Paul Jan 16 '15 at 11:41
I've found this site: http://jquery.com/download/ but how do I know which one to chooose ? – Nikki Jan 16 '15 at 11:47
You just have to link to it [like done here](http://www.w3schools.com/jquery/jquery_install.asp). Basically, you put `` BEFORE your `` tag in every page you want to use it. – Jean-Paul Jan 16 '15 at 11:54
Yeah it works thank you !! :) By the way would you mind to help me with another problem ? I don't really know how I can send which key that was pressed to another page or more or less another file, that I have on my computer ? Not redirecting I already know how to do that, but you know send the keypress to a "result file" or something like that. – Nikki Jan 17 '15 at 14:56
@Nikki: With which language? – Jean-Paul Jan 18 '15 at 10:20
@JeanPaul if it's possible maybe with jQuery, JavaScript or HTML or something like that but if there's any other way to do it I would like to hear that to ! But if so, I need a detailed explenation. – Nikki Jan 18 '15 at 12:43
@Nikki Ask a well-defined new question here on SO and post the link to the question in a comment here. Then I'll take a look at it. – Jean-Paul Jan 18 '15 at 12:45
@JeanPaul I've been writing a new post I haven't post it yet but should I link it to your post/answer on my question here ? just dubbelchecking :p – Nikki Jan 18 '15 at 13:23
@Nikki, that's not necessary as the question you're about to ask has no relation to this question ;) – Jean-Paul Jan 18 '15 at 17:02
@JeanPaul aha ok thanks :) Anyway I've posted it now just follow this link http://stackoverflow.com/questions/28011767/send-which-key-that-was-pressed-to-file – Nikki Jan 18 '15 at 17:05

Create a timer / stopwatch and start after animation

1 Answers1

jsFiddle DEMO