카운트다운 효과
사례 분석
① 이 카운트다운은 계속 바뀌기 때문에 타이머가 자동으로 바뀌어야 합니다(setInterval) 참고: Int의 I는 대문자 i이고 val의 l은 소문자 L입니다. 장황하게 말하겠습니다.
② 3개의 블랙박스에 시, 분, 초가 저장됩니다.
③ 블랙박스 3개는 innerHTML을 이용해 계산된 시, 분, 초를 넣는다.
④ 첫 번째 실행도 밀리초 간격이므로 새로 고침 직후 페이지가 비어 있습니다.
⑤ 처음에 페이지를 새로 고칠 때 공백 문제를 방지하기 위해 함수를 먼저 한 번 호출할 수 있도록 함수를 캡슐화하는 방법을 채택하는 것이 가장 좋습니다.
⑥ 카운트다운이 끝나면 과거 정보를 알려줍니다.
⑦ 최적화, 타이머 지우기clearInterval().
효과 다이어그램 실현:
암호
기본 구조
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>12-倒计时效果</title>
<style>
div {
margin: 200px;
}
div>span {
display: inline-block;
width: 40px;
height: 40px;
background-color: #333;
font-size: 20px;
color: #fff;
text-align: center;
line-height: 40px;
}
/* 倒计时已过小提示 先是隐藏的 */
.tisp {
display: none;
position: absolute;
top: 65px;
left: 25%;
width: 300px;
color: red;
background-color: skyblue;
line-height: 40px;
text-align: center;
font-size: 14px;
}
</style>
</head>
<body>
<div>
<span class="hour">14</span>
<span class="minute">59</span>
<span class="second">14</span>
</div>
<span class="tisp">已过倒计时时间，下次尽早~</span>
</body>
</html>
새 날짜()
Date 개체
Date 개체는 날짜 및 시간 작업에 사용됩니다.
Date 객체 생성: new Date()
자세한 내용은 다음을 참조하십시오: Date - Javascript | MDN
JavaScript 코드 스니펫이 지겹기 때문에 이번에는 학습된 로드를 사용하여 본문 아래에서 수행합니다.
암호:
// 以下的js语句将都会被放入到function(){}内
// 也就是function(){这里面！}
window.addEventListener('load', function(){
} )
카운트다운을 캡슐화하는 parseInt() 함수를 사용하여 정수를 얻
습니다. 전체적인 아름다움을 위해 특별히 삼항식을 사용하여 10 미만의 숫자에 0을 더합니다. 예
: h = h < 10 ? '0' + 시간 : 시간
암호:
window.addEventListener('load', function(){
//
var hour = document.querySelector('.hour') // 时
var minute = document.querySelector('.minute') // 分
var second = document.querySelector('.second') // 秒
// 设定目标时间格式：'YYYY-MM-DD HH:mm:ss'
var inputDate = +new Date('2022-09-23 16:54:00')
// 封装一个倒计时函数
function countDown(){
// 获取调用的时间戳
var nowData = +new Date()
// 目标时间 - 当前时间 / 1000 得到 剩余秒数
times = (inputDate - nowData)/1000
// 转化成时钟
var h = parseInt(times/60/60%24)
// 为了整体美观给10以下的数字补0
h = h < 10 ? '0' + h : h
hour.innerHTML = h
// 转化成分钟
var m = parseInt(times/60%60)
m = m < 10 ? '0' + m : m
minute.innerHTML = m
// 转化成秒钟
var s = parseInt(times % 60)
s = s < 10 ? '0' + s : s
second.innerHTML = s
}
})
이 시점에서 절반은 완료되었지만 실행 중 한 번만 실행되므로 타이머를 사용해야 합니다.
타이머 - setInterval()
윈도우에는 2개의 타이머 메소드가 있으며 호출시 윈도우를 생략할 수 있으며 지연 시간 단위는 밀리초 1000밀리초 = 1초로 생략 가능하며 생략하면 기본값은 0이다.
①setTimeout(실행 함수, 지연 시간)
한 번만 실행하려면 setTimeout
②를 선택할 수 있습니다.setInterval(실행함수, 지연시간)
계속해서 함수를 호출하고 싶다면 setInterval을 선택하면 됩니다.
카운트다운 함수를 계속 호출해야 하므로setInterval카운트다운 효과를 얻으려면
암호:
// 开启定时器
// 给定时器加标识符（名字）方便后续调用
var timer = setInterval(countDown,1000)
설정한 목표 시간은 2022-09-23 17:50:00 현재 시간 기준으로 아직 1~2분 정도 남았습니다. 우리는 그것을 달성했습니다! 그러나 신중한 친구들은 달리기를 시작하거나 카운트다운 효과를 새로고침할 때 짧은 일시 중지가 있음을 발견했습니다.
문제의 예시 이미지:
이 문제는 첫 번째 실행도 밀리초 간격이기 때문에 새로고침 직후 페이지가 비어 있기 때문입니다. 해결 방법은 타이머를 시작하기 전에 카운트다운 기능을 한 번 호출하는 것입니다.
// 加载页面时就调用一次防止有空白
countDown()
카운트다운이 만료되었습니다
카운트다운 효과만 구현해서는 안 됩니다. 사용자에게 더 나은 경험을 제공하기 위해 다른 프롬프트를 추가할 수 있습니다.
샘플 코드:
// times是剩余的秒数
// 如果秒数小于0 即为已过倒计时时间，则隐藏时间，显示提示语
// 需要先去获取时间的div元素和提示的div元素
// 此代码片放置在倒计时函数countDown()的最后
if (times < 0) {
div.style.display = 'none'
tisp.style.display = 'block'
// 此处还有一句
} else {
div.style.display = 'block'
tisp.style.display = 'none'
}
예시 렌더링:
지우기 타이머 최적화 - clearInterval()
앞에서 setInterval() 타이머가 계속 호출된다고 했는데 시간이 다 되면 쉬는 건가요? 아니요, 계속 전화를 겁니다.
위 사진!
시간이 지났는데도 타이머가 계속 울리고 있으니 이 시간에는 타이머를 지워야 합니다.clearInterval()
이전에 타이머에 추가한 이름이 여기서도 유용합니다.
샘플 코드:
// 此js代码片放置在判断剩余秒数是小于0内
clearInterval(timer)
코드 예제 다이어그램:
다이어그램을 보면 클리어 타이머가 성공적입니다. 카운트다운이 경과하면 타이머가 더 이상 호출되지 않습니다.
전체 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>12-倒计时效果</title>
<style>
div {
margin: 200px;
position: absolute;
top: 65px;
left: 25%;
}
div>span {
display: inline-block;
width: 40px;
height: 40px;
background-color: #333;
font-size: 20px;
color: #fff;
text-align: center;
line-height: 40px;
}
.tisp {
display: none;
position: absolute;
top: 65px;
left: 25%;
width: 300px;
color: red;
background-color: skyblue;
line-height: 40px;
text-align: center;
font-size: 14px;
}
</style>
<script>
window.addEventListener('load', function(){
var hour = document.querySelector('.hour') // 时
var minute = document.querySelector('.minute') // 分
var second = document.querySelector('.second') // 秒
var div = document.querySelector('div')
var tisp = document.querySelector('.tisp')
// 你记得修改这个时间哟
var inputDate = +new Date('2022-09-23 18:31:00')
// 加载页面时就调用一次防止有空白
countDown()
// 开启定时器
var timer = setInterval(countDown,1000)
// 封装一个倒计时函数
function countDown(){
var nowData = +new Date()
times = (inputDate - nowData)/1000
var h = parseInt(times/60/60%24)
h = h < 10 ? '0' + h : h
hour.innerHTML = h
var m = parseInt(times/60%60)
m = m < 10 ? '0' + m : m
minute.innerHTML = m
var s = parseInt(times % 60)
s = s < 10 ? '0' + s : s
second.innerHTML = s
if (times < 0) {
div.style.display = 'none'
tisp.style.display = 'block'
clearInterval(timer)
} else {
div.style.display = 'block'
tisp.style.display = 'none'
}
}
})
</script>
</head>
<body>
<div>
<span class="hour">14</span>
<span class="minute">59</span>
<span class="second">14</span>
</div>
<span class="tisp">已过倒计时时间，下次尽早~</span>
</body>
</html>