안녕하세요 저는 프로젝트에서 일하고 있습니다. 애니메이션이 끝난 후 타이머를 시작하고 타이머를 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 솔루션을 제공 할 예정입니다.

스톱워치는 다음과 같은 자바 스크립트/jQuery를 사용하여 만들 수 있습니다 :

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

function stop() { 
    clearTimeout(t); 
}

입니다 :

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

우리는 그 다음도 시작할 start()과 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(); 
    } 
});

스톱워치의 : 우리가 할 수있는 키 누르기에 따라 또한 stop() 타이머,

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

을 마찬가지로 우리는과 같이 애니메이션의 콜백 함수에 .start()를 호출하여 지금이 작업을 수행 할 수 있습니다 다른 페이지로 이동하려면 다른 페이지로 이동할 때 url 매개 변수로 타이머의 값을 추가해야합니다.

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

은 어디 값 myValue을 포함 myParameter 변수를 보내 다음과 같이 일반적으로

이 이루어집니다. 다음과 같이 예에서

, 우리는이 작업을 수행 할 수 있습니다 : h1.textContent 다음 타이머의 값을 것

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

. 다른 페이지는 URL에서 time 변수를 가져올 수 있습니다.이 작업을 수행하는 방법을 모르는 경우,이 읽기 :

내가 함께 이해 jsFiddle에서이 모든 것을 넣어했습니다

jsFiddle DEMO

데모를 통해 달성하고자하는 목표를 달성 할 수 있어야합니다. 내가 코드를 시도했지만 내가 구글 크롬을 사용하고 있지만이 또한 파이어 폭스에서 시도했지만이 중 하나가 작동 didnt가 브라우저 또는 무언가에 문제가있을 수 있습니다 생각할 때 그것은 일을 일부러

enter image description here

출처

2014-12-28 19:40:36

좋아. 콘솔에서 보니 : "Uncaught ReferenceError : $가 정의되지 않았습니다."크롬과 Firefox 모두 – Nikki

@Nikki 즉, jQuery를 포함하지 않았다는 의미입니다. Google에서이를 수행하는 방법을 검색하십시오. 기본적으로해야 할 일은 스크립트 선언에서 jQuery 파일에 대한 링크를 추가하는 것입니다. –

@ 닛키 그리고? 유용 했습니까? –

애니메이션을 만든 후에 타이머/스톱워치를 만들고 시작하십시오.

답변

jsFiddle DEMO

관련 문제