>  기사  >  웹 프론트엔드  >  JS 카운트다운 코드 요약_javascript 기술

JS 카운트다운 코드 요약_javascript 기술

WBOY
WBOY원래의
2016-05-16 16:30:201301검색

이 문서의 예에는 일반적인 JS 카운트다운 코드가 요약되어 있습니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 내용을 요약하면 다음과 같습니다.

첫 번째 유형: 초 단위까지 정확한 자바스크립트 카운트다운 코드

HTML 코드:

코드 복사 코드는 다음과 같습니다.
2010년이 며칠 남지 않았습니다.


<스크립트 LANGUAGE="javascript"> startclock()
var 타이머ID = null
var 타이머실행 = false
함수 쇼타임() {
오늘 = 새로운 날짜()
var NowHour = Today.getHours()
var NowMinute = Today.getMinutes()
var NowMonth = Today.getMonth()
var NowDate = Today.getDate()
var NowYear = Today.getYear()
var NowSecond = Today.getSeconds()
if (현재연도 <2000)
NowYear=1900 NowYear
오늘 = null
Hourleft = 23 - NowHour
Minuteleft = 59 - NowMinut
Secondleft = 59 - NowSecond
Yearleft = 2009 - NowYear
남은 월 = 12 - 현재월 - 1
Dateleft = 31 - NowDate
if (Secondleft<0)
{
두 번째왼쪽=60 두 번째왼쪽
Minuteleft=분왼쪽-1; }
if (분왼쪽<0)
{
분좌측=60분좌측
시간좌측=시간좌측-1
}
if (Hourleft<0)
{
시간좌측=24시간좌측
날짜왼쪽=날짜왼쪽-1
}
if (Dateleft<0)
{
날짜왼쪽=31 날짜왼쪽
월왼쪽=월왼쪽-1
}
if (월 왼쪽<0)
{
남은 달=12개월 남았습니다
연도왼쪽=연도왼쪽-1
}
Temp=Yearleft '연도, ' Monthleft ' 월, ' Dateleft ' 일, ' Hourleft ' 시, ' Minuteleft ' 분, ' Secondleft ' 초'
document.form1.left.value=임시
타이머ID = setTimeout("showtime()",1000)
타이머런닝 = 참
}
var 타이머ID = null
var 타이머실행 = false
함수 stopclock () {
if(timerRunning)
클리어타임아웃(타이머ID)
타이머런닝 = 거짓
}
함수 startclock () {
시계 중지()
상영시간()
}
// -->




두 번째 유형: 특정 운동회


HTML 코드:

코드 복사


코드는 다음과 같습니다.

<스크립트 언어="자바스크립트">


<본문 온로드=DigitalTime1()>




세 번째 유형: 시간 카운트다운

HTML 코드:

코드 복사

코드는 다음과 같습니다.]일

남았습니다.
여섯 번째: 자바스크립트 카운트다운 타이머 - 시스템 시간 자체 확인을 사용

이번에는 카운트다운을 보다 정확하게 하기 위해 수동 조정 없이 시스템 시간을 사용하여 카운트다운을 자체 확인합니다.


코드 복사 코드는 다음과 같습니다.
00:01:11:00

<스크립트 언어="자바스크립트"> var Normalelapse = 100
var nextelapse = 일반 elapse
변수 카운터
var 시작시간
var 시작 = clock.innerText
var 완료 = "00:00:00:00"
var 타이머 = null
// 실행 시작
함수 실행() {
startB.disabled = true
endB.disabled = 거짓
카운터 = 0
//초기화 시작 시간
startTime = new Date().valueOf()
// nextelapse는 타이밍 시간이며 초기에는 100밀리초입니다.
// setInterval 함수에 주의하세요. nextelapse(밀리초) 시간이 경과한 후 onTimer가 실행을 시작합니다.
타이머 = window.setInterval("onTimer()", nextelapse)
}
// 실행 중지
함수 중지() {
startB.disabled = 거짓
endB.disabled = 사실
window.clearTimeout(타이머)
}
window.onload = function() {
endB.disabled = 사실
}
// 카운트다운 기능
onTimer() 함수
{
if (시작 == 종료)
{
window.clearInterval(타이머)
Alert("시간이 다 됐어요!")
반환
}
var hms = new String(start).split(":")
var ms = 새로운 숫자(hms[3])
var s = 새로운 숫자(hms[2])
var m = 새로운 숫자(hms[1])
var h = 새로운 숫자(hms[0])
ms -= 10
if (ms {
ms = 90
s -= 1
if (s {
s = 59
m -= 1
}
if (m {
m = 59
h -= 1
}
}
var ms = ms < 10 ? ("0" ms) : ms; var ss = s < 10 ? ("0" s) : s; var sm = m < ("0" m)
var sh = h < 10 ? ("0" h) : h; 시작 = sh ":" sm ":" ss ":" ms
clock.innerText = 시작
// 마지막 타이머 지우기
window.clearInterval(타이머)
// 시스템 시간을 자체 검사하여 시차를 구하고, 다음 시간에 새로운 타이머가 시작되는 시간을 구합니다.
카운터
var counterSecs = 카운터 * 100
var elapseSecs = new Date().valueOf() - startTime
var diffSecs = counterSecs - elapseSecs
nextelapse = Normalelapse diffSecs
diff.value = counterSecs "-" elapseSecs "=" diffSecs
next.value = "nextelapse = " nextelapse
if (nextelapse < 0) nextelapse = 0
// 새 타이머 시작
타이머 = window.setInterval("onTimer()", nextelapse)
}



이 글이 모든 분들의 JavaScript 기반 웹 프로그래밍에 도움이 되기를 바랍니다.
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.