Search code examples
javascriptjquerycsstimeronkeypress

Create a timer / stopwatch and start after animation

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 !

Solution

  • 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