이 효과를 구현하는 핵심은 날짜 개체 및 설정 타임 아웃을 사용하는 것입니다.
총 세 가지 예가 있습니다. HTML 구조는 다음과 같습니다. 따라서 CSS 스타일이 추가되지 않습니다.
<body> 현재 시간 : <p id = "p1"> </p> 대학 입학 시험 카운트 다운 : <p id = "p2"> </p> 제한된 시간 러시 : <p id = "p3"> </p> </body>
주로 JavaScript의 구현을 이해합니다
window.onload = function () {var p1 = document.getElementById ( "p1"), p2 = document.getElementById ( "p2"); p3 = document.getElementById ( "P3"); showtime1 (); showtime2 (); showtime3 ();}1. 현재 시간 표시의 간단한 구현
function showtime1 () {var nowdate = new date (); // 현재 시간 객체를 생성하여 현재 시간 var year = nowdate.getlyear (), // get month = nowdate.getmonth ()+1, // getmonth ()가 0-11을 추가해야합니다. Week = [ "일요일", "월요일", "화요일", "목요일", "금요일", "토요일", "토요일", h = nowdate.gethours (), m = nowdate.getminutes (), s = nowdate.getseconds (), h = checktime (H), // 함수 점검 시간은 서식 시간, Meconds M = M = Checktime (M), s = s = s (s); p1.innerhtml = year+"year"+month+"month"+date+"day"+week [day]+h+":"+m+":"+s; settimeout (showtime1, 1000); // 함수 자체를 반복}점검 시간 기능은 다음과 같습니다.
함수 checktime (i) {if (i <10) {i = "0"+i; } 반환 i;}일반적으로 보는 시간 형식은 일반적으로 00:00:01이며, Getours, GetMinutes, geteconds는 00 ~ 09가 아닌 geteconds가 0 ~ 9를 가져옵니다. 따라서 9 ~ 10으로 변경하는 과정에서는 두 자리가되는 단일 숫자가 있으며 충전이 59 초에서 0 초 또는 0 분 또는 23 분의 경우 0이됩니다.
예를 들어, 23:59:59는 다음 순간에 00:00:00으로 변경해야합니다. Checktime 함수가 처리에 사용되지 않으면 0 : 0 : 0으로 변경되어 형식이 약간 일치하지 않으며 단어 수가 증가하거나 감소하는 시각적 돌연변이도 있습니다. (다음 두 예제는 체크 타임 함수를 사용하여 시간, 분 및 두 번째를 처리하지 않습니다 !!!)
2. 대학 입학 시험의 카운트 다운 효과는 실현됩니다.
function showtime2 () {var nowtime = new date (), // 현재 시간을 가져옵니다. endtime = new 날짜 ( "2017/6/6"); // 종료 시간 정의 var lefttime = endtime.gettime ()-nowtime.gettime (), // milliseconds leftd = math.floor (100*60*24), // // Leftth = Math.floor (왼쪽 시간/(1000*60*60)%24), // 왼쪽 시간 수 = 수학 (왼쪽 시간/(1000*60)%60), // 왼쪽의 수 = math.floor (왼쪽 시간/1000%60); // Seconds p2.innerhtml = leftd+"day"+lefth+","+lefth+","+Lefth+","+Lefth+" settimeout (showtime2, 1000); }그중에서도 더 중요한 점은 다음과 같습니다.
종료 시간 정의 종료 시간 = 새 날짜 ( "2017/6/6")는 매개 변수와 함께 새 날짜 객체를 사용하는 것이며 직접 새 날짜 ()는 현재 시간을 직접 얻는 것입니다.
gettime () 메소드는 1970 년 1 월 1 일부터 밀리 초 수를 얻습니다.
days 일, 시간, 분 및 초의 계산, % (모듈로 작동). 종료 시간부터 밀리 초 (나머지 밀리 초)를 얻고 남은 초를 얻으려면 1000으로 나누고 60으로 나누어 남은 분을 얻고 60으로 나누어 남은 시간을 얻습니다. 남은 날을 얻으려면 24로 나뉩니다. 남은 초 왼쪽 시간/1000 모듈 60 1 초, 남은 시간 왼쪽 시간/(1000*60) 모듈 60 모듈 60, 남은 시간 왼쪽 시간/(1000*60*60) 모듈 24는 시간 수를 얻습니다.
3. 제한된 시간 러시 구매의 카운트 다운 효과
함수 showtime3 () {var nowtime = new date (), endtime = new 날짜 ( "2020/1/1,00 : 00 : 00"), // // 왼쪽 시간을 설정합니다. 왼쪽 시간 = parseint ((endtime.gettime ()-nowtime.gettime ())/1000), d = math.floor (왼쪽 타임/(60*60*24)), H = Math.floor (60*60), M = Math.floor (왼쪽/60%60), S = Math.floor (왼쪽%60); p3.innerhtml = d+"day"+h+"hour"+m+"minute"+s+"second"; settimeout (showtime3, 1000); }실제로 두 번째 예와 유사합니다. 차이점은 종료 시간이 새 날짜를 설정한다는 것입니다 ( "2020/1/1,00 : 00 : 00").
아래는 전체 코드입니다
<! docType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> 카운트 다운 효과 </title> <script type = "text/javaScript"> 함수 checktime (i) {if (i <10) {i = "0"+i; } 반환 i; } window.onload = function () {var p1 = document.getElementById ( "p1"), p2 = document.getElementById ( "p2"); showtime1 (); showtime2 (); showtime3 (); } 함수 showtime1 () {var nowdate = new Date (); var year = nowdate.getlyear (), // 년 월 = nowdate.getmonth ()+1, // 월 날짜 = nowdate.getDate (), // day week = [ "일요일", "월요일", "화요일", "목요일", "금요일", "토요일"], day = nowdate.getday (), // getday.) m = nowdate.getminutes (), m = checktime (m), s = nowdate.getSeconds (), s = checktime (s); p1.innerhtml = year+"year"+month+"month"+date+"day"+week [day]+h+":"+m+":"+s; settimeout (showtime1, 1000); } 함수 showtime2 () {var nowtime = new Date (), endTime = 새 날짜 ( "2017/6/6"); var lefttime = endtime.gettime ()-nowtime.gettime (), leftd = math.floor (왼쪽 시간/(1000*60*60*24)), 왼쪽 = math.floor (왼쪽/(1000*60*60)%24), 왼쪽 = 수학 (왼쪽/(1000*60)%60), lefts = 수학 (왼쪽/1000%60); p2.innerhtml = leftd+"day"+lefth+":"+leftm+":"+lefts; settimeout (showtime2, 1000); } function showtime3 () {var nowtime = new date (), endtime = new 날짜 ( "2020/1/1,00 : 00 : 00 : 00"), 왼쪽 시간 = parseint ((endtime.gettime ()-nowtime.gettime ())/1000), d = math.floor (왼쪽 타임/(60*60*24)), h = 수학 (60*60) 24), M = Math.floor (왼쪽/60%60), S = Math.floor (왼쪽%60); p3.innerhtml = d+"day"+h+"hour"+m+"minute"+s+"seconds"; settimeout (showtime3, 1000); } </script> </head> <hod> 현재 시간 : <p id = "p1"> </p> 대학 입학 시험 카운트 다운 : <p id = "p2"> </p> 제한 시간 러시 : <p id = "p3"> </p> </body> </html>위의 JavaScript 특수 효과 구현 - 현재 시간 및 카운트 다운 효과의 간단한 예는 내가 공유 한 모든 컨텐츠입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.