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

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

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

HTML 코드:

코드 복사 코드는 다음과 같습니다.

2010년이 며칠 남지 않았습니다.

양식> 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 (현재연도 NowYear=1900 NowYear
오늘 = null
Hourleft = 23 - NowHour
Minuteleft = 59 - NowMinut
Secondleft = 59 - NowSecond
Yearleft = 2009 - NowYear
남은 월 = 12 - 현재월 - 1
Dateleft = 31 - NowDate
if (Secondleft {
두 번째왼쪽=60 두 번째왼쪽
Minuteleft=분왼쪽-1; }
if (분왼쪽 {
분좌측=60분좌측
시간좌측=시간좌측-1
}
if (Hourleft {
시간좌측=24시간좌측
날짜왼쪽=날짜왼쪽-1
}
if (Dateleft {
날짜왼쪽=31 날짜왼쪽
월왼쪽=월왼쪽-1
}
if (월 왼쪽 {
남은 달=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 코드:

코드 복사

코드는 다음과 같습니다.

스크립트>

본문>



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

HTML 코드:

코드 복사

코드는 다음과 같습니다. var maxtime = 60*60 //1시간, 초 단위로 계산됩니다. 함수 CountDown(){ if(최대 시간>=0){

분 = Math.floor(최대 시간/60)

초 = Math.floor(maxtime`)
msg = 종료까지 "아직"분 "분"초 "초"가 있습니다
document.all["timer"].innerHTML=msg; if(maxtime == 5*60) Alert('주의하세요. 아직 5분 남았습니다!')
--최대 시간
}
그렇지 않으면{
클리어 인터벌(타이머)
Alert("시간이 다 됐어요!"); }
}
타이머 = setInterval("CountDown()",1000)
//--> 스크립트>

네 번째 유형: 가장 간단한 카운트다운


HTML 코드:

코드 복사

코드는 다음과 같습니다.

스크립트>

다섯 번째 유형: 가장 간단한 카운트다운 2

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 var sh = h 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 // 새 타이머 시작
타이머 = window.setInterval("onTimer()", nextelapse)
}



이 글이 모든 분들의 JavaScript 기반 웹 프로그래밍에 도움이 되기를 바랍니다.