프론트 엔드 삼총사로 아름다운 카운트다운 효과를 만드는 방법
- 藏色散人원래의
- 2021-08-19 14:14:392274검색
이전 글 "CSS를 사용하여 고급 흐릿한 배경 이미지를 빠르게 생성"에서 CSS를 사용하여 고급 흐릿한 배경 이미지를 빠르게 생성하는 방법을 소개했습니다. 관심 있는 친구들은 가서 배우고 이해할 수 있습니다.
그럼 이 글의 초점은 프론트엔드 삼검(HTML, CSS, javascript)을 통해 매우 아름답고 실용적인 카운트다운 효과를 얻는 방법을 소개하는 것입니다.
카운트다운 페이지가 필요하신 분들은 이 글을 놓치지 마세요~
전체 코드로 바로 가보겠습니다:
카운트다운 효과를 구현하는 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
<style>
body, html {
height: 100%;
margin: 0;
}
.bgimg {
background-image: url('003.jpg');
height: 100%;
width:100%;
background-position: center;
background-size: cover;
position: relative;
color: white;
font-family: "Courier New", Courier, monospace;
font-size: 25px;
}
.topleft {
background-image: url('logo.png');
position: absolute;
width:100%;
height:100%;
background-repeat: no-repeat;
top: 2px;
left: 16px;
}
.bottomleft {
position: absolute;
bottom: 0;
left: 16px;
}
.middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
hr {
margin: auto;
width: 40%;
}
</style>
</head>
<body>
<div class="bgimg">
<div class="topleft">
<div id="color-overlay"></div>
</div>
<div class="middle">
<h1>距离2022年春节还有：</h1>
<hr>
<p id="demo" style="font-size:30px"></p>
</div>
<div class="bottomleft">
<p>www.php.cn</p>
</div>
</div>
<script>
// 设定我们倒计时的日期
var countDownDate = new Date("2022,2,1").getTime();
// 每1秒更新一次计数
var countdownfunction = setInterval(function() {
// 获取今天的日期和时间
var now = new Date().getTime();
// 找出现在与倒数日期之间的差
var distance = countDownDate - now;
// 时间计算为天，小时，分和秒
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// 在id="demo"的元素中输出结果
document.getElementById("demo").innerHTML = days + "天" + hours + "时"
+ minutes + "分" + seconds + "秒";
// 如果倒计时结束了，写一些文字
if (distance < 0) {
clearInterval(countdownfunction);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
</body>
</html>파일을 실행하면 효과가 나타납니다.
(배경 이미지는 인터넷에서 가져온 것입니다. 침해해서 죄송합니다.)
카운트다운 효과를 얻기 위해 이 기능은 주로 javascript를 통해 구현됩니다. 스타일은 물론 html/css를 통해 설정됩니다. 위 코드에서 구체적인 코드 설명은 이미 통과했습니다. 주석 방법은 각 단계의 의미를 나타내므로 누구나 한눈에 이해할 수 있다고 믿습니다~
위 코드를 직접 복사하여 로컬에서 테스트할 수도 있습니다. 또는 텍스트 콘텐츠를 쉽게 바꿀 수 있습니다. 다른 카운트다운 효과를 얻으려면 이 기사의 콘텐츠를 기반으로 확장할 수 있습니다. 구현 아이디어를 배우고 익히는 것이 가장 중요합니다!
마지막으로 궁금한 점이 있으시면 댓글로 남겨주세요!
PHP 중국어 웹사이트 플랫폼에는 많은 동영상 교육 리소스가 있습니다. "css 동영상 튜토리얼"과 "javascript 기본 튜토리얼"을 배우는 모든 분들을 환영합니다!
위 내용은 프론트 엔드 삼총사로 아름다운 카운트다운 효과를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!