Javascript는 카운트다운 및 팝업 프롬프트를 구현합니다.

프론트엔드 개발에서는 카운트다운 사용이 불가피합니다. 예를 들어 Double Eleven 이벤트를 진행하는 경우 이벤트 시작 반달 전에 홍보 작업을 해야 하고, 할인 이벤트가 언제 시작되는지 사용자에게 알려야 합니다. 이때 전체 사이트의 특정 페이지에서 활동이 언제 시작되는지 사용자에게 알려주는 등의 카운트다운이 사용됩니다. 이벤트 후반부, 특히 이벤트 종료까지 약 1일밖에 남지 않은 경우 팝업 카운트다운이 사용됩니다. 이 카운트다운은 전체 사이트 홈페이지 상단에 설정되어 있으며(물론 홈페이지 중앙 등 다른 곳에도 설정 가능), 이후에는 팝업창이 자동으로 사라지도록 설정되어 있습니다. 해당 활동 페이지를 클릭하고 제품을 구매할지 여부는 10초 동안 사용자가 결정합니다.

기술 지원 필요: CSS3, jQuery 라이브러리

HTML 코드는 다음과 같습니다.

<section class="the_body">
  <div class="countdown">
    <h3>距中国雄于地球之日还有</h3>
    <div class="countdown_time">
     <span class="the_days"><i>0</i><i>3</i></span>
     <i class="date_text">天</i>
     <span class="the_hours"><i>0</i><i>7</i></span>
     <i class="date_text">时</i>
     <span class="the_minutes"><i>4</i><i>7</i></span>
     <i class="date_text">分</i>
     <span class="the_seconds"><i>1</i><i>1</i></span>
     <i class="date_text">秒</i>
    </div>
  </div>
</section>

CSS 코드는 다음과 같습니다.

.the_body{width: 100%;max-width: 640px;min-width: 320px;margin: 0 auto;}
.countdown{background:#ffec20;padding: 10px 0;}
.countdown h3{margin:0;padding:5px 0;color:#f53544;text-align:center;font-size:14px;}
.countdown .countdown_time{display:block;width:100%;text-align:center;}
.countdown .countdown_time i{display:inline-block;position:relative;padding:0 3px;font-style:normal;background:#fff;
margin:0 2px;border-radius:3px;box-shadow:0px 1px 1px #ccc;border-bottom:1px solid #cfcfcf;font-weight
:bold;}
.countdown .countdown_time i:after{content:"";width:100%;border:1px solid #cfcfcf;border-width:1px 0 0;position:absolute;
bottom:1px;left:0;}
.countdown .countdown_time i:before{content:"";width:100%;border:1px solid #cfcfcf;border-width:1px 0 0;position:absolute;
bottom:3px;left:0;}
.countdown .countdown_time .date_text{background:transparent;font-weight:bold;box-shadow:none;
border-bottom:none;text-decoration:none;padding: 0;}
.countdown .countdown_time .date_text:after{content:"";border:none;}
.countdown .countdown_time .date_text:before{content:"";border:none;}

자바스크립트 코드는 다음과 같습니다.

<script>
function remaintime() {
 var date = new Date("Jan 1,2015 00:00:00");//设置倒计时结束时间
 var nowdate = new Date();//获取当前日期
 var remaintime = date.getTime() - nowdate.getTime();//获取现在到倒计时结束时间的毫秒数
 var remainday = Math.floor(remaintime / (1000 * 60 * 60 * 24));//计算求得剩余天数
 var remainhour = Math.floor((remaintime - remainday * 1000 * 60* 60 * 24)/ (1000 * 60 * 60));//计算求得剩余小时数
 var remainminute = Math.floor((remaintime - remainday * 1000 * 60* 60 * 24 - remainhour * 1000 * 60 * 60)/ (1000 * 60));//计算求得剩余分钟数
 var remainsecond = Math.floor((remaintime - remainday * 1000 * 60 * 60 * 24- remainhour * 1000 * 60 * 60 - remainminute *
    1000 * 60) / (1000));//计算求得剩余秒数
 //当剩余天数小于10时，就在其前加一个0，以下剩余小时数、分钟数与秒数与此相同
 if (remainday < 10) {
  remainday = "0" + remainday;
 }else{remainday+="";
 //当剩余天数大于10时，剩余天数为数值，这是需要将该值转换为字符串，以下的剩余小时数、分钟数与秒数与此相同
}
 if (remainhour < 10) {
  remainhour = "0" + remainhour;
 }else{remainhour+="";}
 if (remainminute < 10) {
  remainminute = "0" + remainminute;
 }else{remainminute+="";}
 if (remainsecond < 10) {
  remainsecond = "0" + remainsecond;
 }else{remainsecond+="";}
 $(".the_days i:first-child").html(remainday.substr(0, 1));
 $(".the_days i:last-child").html(remainday.substr(1, 2));
 $(".the_hours i:first-child").html(remainhour.substr(0, 1));
 $(".the_hours i:last-child").html(remainhour.substr(1, 2));
 $(".the_minutes i:first-child").html(remainminute.substr(0, 1));
 $(".the_minutes i:last-child").html(remainminute.substr(1, 2));
 $(".the_seconds i:first-child").html(remainsecond.substr(0, 1));
 $(".the_seconds i:last-child").html(remainsecond.substr(1, 2));
 setTimeout("remaintime()",1000);//设置1秒后调用remaintime函数
}
remaintime();
setTimeout(function(){$(".countdown").hide();},10000);//在首页设置的弹窗效果，在分页这段代码可以不设置
</script>

직접 작성한 카운트다운 효과입니다. 물론 누구나 자신의 취향에 맞게 카운트다운 효과를 설정할 수 있습니다. 예를 들어 "일, 시, 분, 분"만 표시할 수 있는데, 개인적으로 "일, 시, 분, 초"로 설정하는 것만으로는 분위기가 부족하다고 생각합니다. 여기의 스타일도 자신의 취향에 따라 변경할 수 있지만 최종 효과는 행사 전에 불 같은 분위기를 조성하는 것입니다.

여기에 있는 html 코드, css 코드 및 JavaScript 코드는 다음을 참고하세요.

1.html 코드에 대해 자세히 설명하지 않겠습니다. 가장 중요한 것은 JavaScript 작업을 용이하게 하기 위해 DOM을 설정하는 방법입니다.

2.css 코드, 여기서는 주로 :before 및 :after 의사 클래스를 사용하여 카운트다운 값의 3차원 효과를 설정합니다.

3. JavaScript 코드도 매우 간단한 함수입니다. 여기서는 문자열을 쉽게 가로채고 표시할 수 있도록 남은 시간을 문자열로 변환해야 합니다. 또한, 1초마다 실행되어 동적으로 남은 시간을 표시하도록 함수를 설정하려면 setTimeout 함수를 사용합니다. 물론, 이 두 함수 설정의 효과는 기본적으로 동일합니다.

이때 간단한 카운트다운 효과가 생성됩니다. 홈페이지에서 팝업창 카운트다운을 설정하고 싶다면 배경을 좀 더 시원하게 설정하여 사용자의 클릭을 유도하고, 팝업창이 10초 후에 자동으로 사라지도록 설정(또는 닫기 버튼 설정 등)할 수 있습니다. .).

카운트다운을 구현하는 방법은 여러 가지가 있습니다. 여기서 먼저 소개하고 시간이 나면 계속해서 요약하겠습니다.

이상은 이 글의 전체 내용입니다. 자바스크립트를 이해하시는 모든 분들께 도움이 되었으면 좋겠습니다.