일반적으로 사용되는 세 가지 JS 시간 응답

零到壹度
풀어 주다: 2018-04-03 18:00:33
원래의
1977명이 탐색했습니다.

이 기사에서는 일반적으로 사용되는 세 가지 JS 시간 응답을 주로 소개합니다. 편집자는 이것이 꽤 좋다고 생각합니다. 이제 공유하고 참고로 제공하겠습니다. 다음은 일반적으로 사용되는 몇 가지 시간 응답을 살펴보는 것입니다. 사용하기 쉽고 좋은 효과가 있습니다.

1. 키 트리거

이런 종류의 이벤트 응답은 매우 일반적이며 처음부터 발생합니다. 간단한 예를 들자면:

<!DOCTYPE html>  
<html>  
<head>  
<title>javascript</title>  
</head>  
<body>  
    <p>点击确认查看日期</p>  
    <button onclick="myFunction()">确认</button>  
    <p id="demo"></p>  
    <script>  
    function myFunction() {  
        document.getElementById("demo").innerHTML =Date();  
}  
</script>  
</body>
로그인 후 복사

이 유형의 방법의 핵심은 버튼 라벨에 onclick+함수 이름을 추가하여 함수를 실행하는 것입니다.

2. 마우스 트리거 또는 입력 트리거.

첫 번째 방법의 단점은 실제로 매우 명백합니다. 예를 들어, 일괄 데이터를 처리하려고 하는데 입력 상자가 많은 경우 각 상자 뒤에 확인 키를 추가해야 합니까? 이는 사용자 입력에 있어 매우 불합리하므로 양식이나 여러 입력 상자를 채울 때 마우스나 Enter 키를 사용하여 효과를 발동시키는 것이 훨씬 더 효율적입니다.

<!DOCTYPE html>  
<html>  
<head>  
<title>javascript</title>  
</head>  
<body>  
    <p>请输入下列表框</p>  
	<label>表框一</label><input type="text" id="t1" onchange="myFunction()"/>  
    <p id="demo1"></p>  
    <script>  
    function myFunction() {  
        var x = document.getElementById("t1").value;
		document.getElementById("demo1").innerHTML="表格一的内容是"+x;
}  
</script>  
</body>
로그인 후 복사

핵심은 입력 상자에서 함수를 호출하기 위해 onchange를 사용하는 것입니다. 입력한 후 마우스로 아무 곳이나 클릭하거나 Enter 키를 누르면 함수가 호출됩니다.

3. 언제든지 트리거됩니다.

실제 예에서는 웹 페이지에서 온라인 16진수 변환을 시도해 볼 수 있습니다. 즉, 확인 키를 누르거나 Enter를 칠 필요가 없습니다. 언제든지 그것을 잃어버리고 언제든지 변환할 수 있습니다. 휴대폰의 계산기를 포함하여 실시간으로 입력값을 계산해 줍니다.

<!DOCTYPE html>  
<html>  
<head>  
<title>javascript</title>  
</head>  
<body>  
    <p>请输入下列表框</p>  
	<label>表框一</label><input type="text" id="t1" onKeyUp="myFunction()"/>  
    <p id="demo1"></p>  
    <script>  
    function myFunction() {  
        var x = document.getElementById("t1").value;
		document.getElementById("demo1").innerHTML="表格一的内容是"+x;
}  
</script>  
</body>
로그인 후 복사

사용방법의 핵심은 oneKeyUp + 메소드명 입니다. 이 외에도 onkeypress, oneKeyDown 등의 키워드도 있습니다. 개인적으로는 oneKeyUp이 더 실용적이라고 생각합니다.


관련 권장사항:

웹 트랜잭션 응답 시간 분석 및 심층 분석

jQuery 타임라인 효과는 Bootstrap 수직 응답을 기반으로 합니다.

Node.js 10 팁 앱으로 더 빠르게 실행하려면

위 내용은 일반적으로 사용되는 세 가지 JS 시간 응답의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!