jsFiddle DEMO

Question

您好我正在研究一个项目并且我一直在考虑是否有可能在动画完成后启动计时器，并停止计时器onkeypress？然后只是将时间结果发送到另一个页面？和计时器我的意思是秒表所以没有反击或其他任何东西......

无论如何这里是原始代码：

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

正如你所看到的，我还没有定时器...对此感到抱歉，但如果有任何问题请问，我最熟悉HTML，CSS，JavaScript，我知道一些jQuery但如果还有另一种方法，我也很乐意听到。在此先感谢，和平！

Answer 1

好吧，既然你已经标记了jQuery，我会给你一个jQuery解决方案。

可以使用以下JavaScript / jQuery创建秒表：

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

然后我们还需要定义一个start()和一个stop()函数来启动和停止计时器：

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

function stop() {
    clearTimeout(t);
}

就是这样！现在我们已经创建了一个秒表。

在你的问题中，你提到你希望秒表在动画结束后开始。我们现在可以通过在动画的回调函数中调用.start()来实现这一点，如下所示：

// 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
  });

同样，我们也可以在按键时stop()计时器：

// 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();
  }
});

现在，当我们想要将秒表的时间发送到另一个页面时，我们需要在指向另一个页面时将计时器的值添加为url参数。

一般情况下，这样做如下：

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

我们发送包含值myParameter的变量myValue。

在您的示例中，我们可以按如下方式执行此操作：

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

其中h1.textContent将是计时器的值。然后，另一个页面可以从URL获取变量time。如果您不知道如何操作，请阅读：

我把所有这些放在一个易于理解的jsFiddle中：

jsFiddle DEMO

通过该演示，应该可以实现您想要实现的目标。

enter image description here

创建一个计时器/秒表并在动画后启动

1 个答案:

jsFiddle DEMO