嗨我正在研究一个项目，我一直在考虑是否有可能在动画完成后启动计时器，并停止计时器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，但如果有另一种方式来做到这一点，我也很乐意听到。先谢谢了，平安！

来源

2014-12-28 Nikki

好吧，既然你已经标记了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

来源

2014-12-28 19:40:36

确定它没有工作，当我试图代码，但我觉得可能是我的浏览器或东西有问题，我使用谷歌Chrome，但我也试过在Firefox但它没有在那里工作无论是。我查看了控制台，它在Chrome和Firefox中都显示：“Uncaught ReferenceError：$未定义” – Nikki

@Nikki这意味着您没有包含jQuery。在Google上搜索如何做到这一点。基本上你必须做的是在脚本声明中添加一个链接到jQuery文件。 –

@Nikki和？它有用吗？ –

创建一个计时器/秒表并开始动画后

回答

jsFiddle DEMO

相关问题