Javascript 创建计时器/秒表并在动画后启动_Javascript_Jquery_Css_Timer_Onkeypress

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

javascript jquery css timer

Javascript 创建计时器/秒表并在动画后启动,javascript,jquery,css,timer,onkeypress,Javascript,Jquery,Css,Timer,Onkeypress,嗨，我正在做一个项目，我一直在考虑是否有可能在动画结束后启动计时器，并在按键时停止计时器？然后把时间结果发送到另一个页面？还有计时器，我指的是秒表，所以没有计数器或其他东西无论如何，以下是原始代码： <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Exercise1</title> <style> .first-child {

嗨，我正在做一个项目，我一直在考虑是否有可能在动画结束后启动计时器，并在按键时停止计时器？然后把时间结果发送到另一个页面？还有计时器，我指的是秒表，所以没有计数器或其他东西

无论如何，以下是原始代码：

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


练习1
.第一个孩子{
宽度：200px；
高度：200px；
背景：白色；
边缘顶部：150px；
边缘底部：50px；
右边距：0px；
左边距：550px；
-webkit动画：我的第一个1s；
动画：我的第一个1；
}
@-webkit为myfirst设置关键帧{
0%{背景：白色；}
20%{背景：白色；}
40%{背景：白色；}
60%{背景：白色；}
80%{背景：白色；}
100%{背景：红色；}
}
.第一父母{
颜色：蓝色；
边缘顶部：5px；
边缘底部：50px；
左边距：600px；
右边距：0px；
}
.第二家长{
颜色：红色；
边际上限：0px；
边缘底部：50px；
左边距：40px；
右边距：0px；
}
p{
左边距：640px；
}
B
R


1/2
document.onkeypress=功能（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=函数（r）{
r=r | | window.event；
var charCode=r.charCode | | r.keyCode，
character=String.fromCharCode（charCode）；
console.log（charCode）；
window.location.href='Exercise2.html'；
};

正如你所看到的，我还没有计时器。。。对此很抱歉，但如果有任何问题要问，我最熟悉HTML、CSS、JavaScript，并且我知道一些jQuery，但如果有其他方法可以做到这一点，我也很高兴听到。提前感谢，和平

既然您已经标记了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

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

在这里，我们发送变量

myParameter

，其中包含值

myValue

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

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

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

其中

h1.textContent

将是计时器的值。另一个页面可以从url获取变量

time

。如果您不知道如何执行此操作，请阅读以下内容：

我将所有这些放在一个可以理解的JSFIDEL中：

有了这个演示，应该可以实现您想要实现的目标

好的，当我尝试代码时，它不起作用，但我认为我的浏览器可能有问题，或者我正在使用Google Chrome，但我也尝试了Firefox，但它也不起作用。我查看了控制台，它在Chrome和Firefox@Nikki这意味着您没有包括jQuery。在谷歌上搜索如何做到这一点。基本上，您需要做的是在脚本声明中添加到jQuery文件的链接。@Nikki和？它有用吗？我真的不明白其他评论中的意思，所以现在no@Nikki在Google上搜索如何在代码中包含jQuery。一旦你做到了，它就会起作用。