JavaScript 타이머 사용 방법 상세 설명

8618 단어 js타이머
본 고의 실례 는 여러분 에 게 자 바스 크 립 트 타이머 가 사용 하 는 구체 적 인 코드 를 공 유 했 습 니 다.여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
타이머 분류
1.순환 실행:한 프로그램 은 한 시간 간격 으로 한 번 씩 실행 할 수 있 습 니 다[setInterval()][clearInterval()]
2.정시 실행(타이머):특정한 프로그램 이 얼마나 지연 되 는 지[setTimeout()][clearTimeout()]을 실행 해 야 합 니 다.
타이머 사용
사용 주의:타이머 가 누적 되 는 것 을 방지 하기 위해 타 이 머 를 사용 할 때 먼저 지우 고 설정 해 야 합 니 다.메모리 에 타이머 가 하나 밖 에 없다 는 것 을 보증 해 야 한다.
1.순환 실행:한 프로그램 은 한 시간 간격 으로 한 번 씩 실행 할 수 있 습 니 다.
타이머 설정:[var timeid=window.setInterval("방법 명 또는 방법","지연");]
타이머 지우 기[window.clearInterval(timeid);]

 // window.setInterval("console.log('1     ')", 1000); 
 
 // setInterval(function() {
 // console.log('1     ');
 // }, 1000);
 
 
 function test() {
 console.log('1     ');
 }
 
 setInterval(test, 2000);
초시계

<!DOCTYPE html>
<html lang="en">
 
<head>
 <meta charset="UTF-8">
 <title>     </title>
 <style>
 #box {
 width: 300px;
 height: 200px;
 border: 1px solid #ccc;
 margin: 20px auto;
 text-align: center;
 }
 
 .btn {
 width: 100%;
 margin: 10px;
 }
 
 .diaplayTime {
 font-weight: 600;
 font-size: 20px;
 margin-top: 30px;
 }
 </style>
</head>
 
<body>
 <div id="box">
 <div class="btn">
 <button id="btn1">  </button>
 <button id="btn2">  </button>
 <button id="btn3">  </button>
 </div>
 <div class="diaplayTime">
 <span>     ：</span>
 <span id="totalTime">0</span>&nbsp;&nbsp; 
 </div>
 </div>
 <script>
 window.onload = function() {
 // 1.       
 var btn1 = $("btn1");
 var btn2 = $("btn2");
 var btn3 = $("btn3")
 var totalTime = $("totalTime");
 
 
 var second = 0,
 timer = null;
 
 // 2.      
 btn1.onclick = function() {
 //          ：       
 clearInterval(timer);
 // 2.1      
 timer = setInterval(function() {
 second += 1;
 console.log(second)
 totalTime.innerHTML = second;
 
 }, 1000);
 }
 
 // 3.      
 btn2.onclick = function() {
 clearInterval(timer);
 }
 
 // 4.    
 btn3.onclick = function() {
 clearInterval(timer);
 second = 0;
 totalTime.innerHTML = second;
 }
 }
 
 function $(id) {
 return typeof id === "string" ? document.getElementById(id) : null;
 }
 </script>
</body>
 
</html>
예 2:공휴일 카운트다운

<!DOCTYPE html>
<html lang="en">
 
<head>
 <meta charset="UTF-8">
 <title>   -     </title>
 <style>
 #time {
 font-size: 30px;
 color: blue;
 text-align: center;
 }
 </style>
</head>
 
<body>
 <div id="time"></div>
 <script>
 window.onload = function() {
 // 1.       
 var time = document.getElementById('time');
 
 // 2.         
 var nextDate = new Date('2019/10/18 17:30:00');
 
 // 3.      
 setInterval(function() {
 // 4.        
 var currentDate = new Date();
 
 // 5.      
 var currentTime = currentDate.getTime();
 var nextTime = nextDate.getTime();
 
 // 6.       
 var allTime = nextTime - currentTime;
 
 // 7.       
 var allSecond = parseInt(allTime / 1000);
 
 // 8.  
 var d = size(parseInt(allSecond / 3600 / 24));
 var h = size(parseInt(allSecond / 3600 % 24));
 var m = size(parseInt(allSecond / 60 % 60));
 var s = size(parseInt(allSecond % 60));
 
 // 9.   
 time.innerText = "      " + d + " " + h + "  " + m + "  " + s + " ";
 }, 1000);
 
 
 //       
 function size(num) {
 return num >= 10 ? num : '0' + num;
 }
 }
 </script>
</body>
 
</html>
주의:총 초 수(allSecond)를 천(d)+시(h)+분(m)+초(s)의 형식 으로 바 꾸 고 공식 은 다음 과 같 습 니 다.
d=parseInt(allSecond / 3600 / 24)
h=parseInt(allSecond / 3600 %24)
m=parseInt(allSecond / 60 %60)
s=parseInt(allSecond%60)
시계

<!DOCTYPE html>
<html lang="en">
 
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 * {
 margin: 0;
 padding: 0;
 list-style: none;
 }
 
 #box {
 width: 600px;
 height: 600px;
 background: url("images/clock.jpg") no-repeat;
 margin: 10px auto;
 position: relative;
 }
 
 #hour,
 #min,
 #second {
 position: absolute;
 left: 50%;
 top: 0;
 width: 30px;
 height: 600px;
 margin-left: -15px;
 }
 
 #hour {
 background: url("images/hour.png") no-repeat center center;
 }
 
 #min {
 background: url("images/minute.png") no-repeat center center;
 }
 
 #second {
 background: url("images/second.png") no-repeat center center;
 }
 </style>
</head>
 
<body>
 <div id="box">
 <div id="hour"></div>
 <div id="min"></div>
 <div id="second"></div>
 </div>
 <script>
 window.onload = function() {
 // 1.        
 var hour = document.getElementById("hour");
 var min = document.getElementById("min");
 var second = document.getElementById("second");
 
 // 2.     
 setInterval(function() {
 // 2.1         
 var date = new Date();
 
 // 2.2       
 var millS = date.getMilliseconds();
 var s = date.getSeconds() + millS / 1000;
 var m = date.getMinutes() + s / 60;
 var h = date.getHours() % 12 + m / 60;
 
 // 2.3   
 hour.style.transform = 'rotate(' + h * 30 + 'deg)';
 min.style.transform = 'rotate(' + m * 6 + 'deg)';
 second.style.transform = 'rotate(' + s * 6 + 'deg)';
 }, 10);
 }
 </script>
</body>
 
</html>
주의:1 시간 동안 30 도 회전,1 분 동안 6 도 회전,1 초 동안 6 도 회전.
hour.style.transform = 'rotate(' + h * 30 + 'deg)';
min.style.transform = 'rotate(' + m * 6 + 'deg)';
second.style.transform = 'rotate(' + s * 6 + 'deg)';
2.정시 실행:특정한 절 차 는 얼마나 지연 한 후에 실행 해 야 합 니까?
타이머 설정:[var timeid=window.setTimeout("방법 이름 이나 방법","지연");]
타이머 지우 기:[window.clearTimeout(timeid);]
예시

<!DOCTYPE html>
<html lang="en">
 
<head>
 <meta charset="UTF-8">
 <title>   </title>
</head>
 
<body>
 <button id="btn1">5         </button>
 <button id="btn2">  </button>
 <script>
 window.onload = function() {
 // 1.        
 var btn1 = document.getElementById("btn1");
 var btn2 = document.getElementById("btn2");
 var timer = null;
 
 // 2.        
 btn1.onclick = function() {
 clearTimeout(timer);
 //      
 timer = setTimeout(function() {
 alert('5         ');
 }, 5000);
 };
 
 btn2.onclick = function() {
 clearTimeout(timer);
 }
 }
 </script>
</body>
 
</html>
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
정규 표현 식 의 JavaScript 코드 하 이 라 이 트 를 어떻게 실현 합 니까?
js 시계 타이머 구현

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage