js에서 동적 카운트다운 효과를 구현하는 방법

js가 동적 카운트다운 효과를 구현하는 단계: 먼저 사용자가 입력한 목표 시간을 가져온 후 목표 시간에서 현재 시간을 뺍니다. 그러면 시차가 표시됩니다. 시차는 일, 시, 분, 초로 변환되고 마지막으로 남은 시간이 동적으로 출력됩니다.

동적 카운트다운을 단계별로 구현해 보겠습니다.

1.

html 코드:

<form>目的日期：<br><br>
     <input type="text" id="year"><span>年</span>
     <input type="text" id="month"><span>月</span>
     <input type="text" id="day"><span>日</span><br><br>
     <input type="text" id="hour"><span>时</span>
     <input type="text" id="minute"><span>分</span>
     <input type="text" id="second"><span>秒</span><br><br>
     <input type="button" value="确定" onclick="show()">
</form><br><br>
<div class="time1">还剩时间：<br><br>
     <span id="_d"></span>天 
     <span id="_h"></span>时
     <span id="_m"></span>分
     <span id="_s"></span>秒
</div>

css 코드:

input{width:50px;height: 20px;border:1px solid black;}
.time1 span{display:inline-block;width:40px;height: 20px;}

렌더링:

2. 동적 카운트다운 구현--js 코드

# 🎜🎜#The 첫 번째 단계: 첫 번째는 목표 시간을 얻는 것입니다. 페이지에 목표 날짜를 입력하고 확인을 클릭하면 목표 시간을 얻을 수 있습니다.

function show(){
    //获取目的日期
    var myyear=document.getElementById("year").value;
    var mymonth=document.getElementById("month").value-1;
    var myday=document.getElementById("day").value;
    var myhour=document.getElementById("hour").value;
    var myminute=document.getElementById("minute").value;
    var mysecond=document.getElementById("second").value;
    var time=Number(new Date(myyear,mymonth,myday,myhour,myminute,mysecond));
}

2단계: 현재 시간을 구하고 한 다음 목표 시간 에서 현재 시간을 빼서 남은 시간, 즉 시간을 구합니다. 차이점 .

//获取当前时间
 var nowTime=Date.now();

//获取时间差
var timediff=Math.round((time-nowTime)/1000);

세 번째 단계: 얻은 시차를 일, 시, 분, 초로 변환

//获取还剩多少天
var day=parseInt(timediff/3600/24);

//获取还剩多少小时
var hour=parseInt(timediff/3600%24);

//获取还剩多少分钟
var minute=parseInt(timediff/60%60);

//获取还剩多少秒
var second=timediff%60;

네 번째 단계: 남은 시간 출력

//输出还剩多少时间
document.getElementById("_d").innerHTML=day;
document.getElementById("_h").innerHTML=hour;
document.getElementById("_m").innerHTML=minute;
document.getElementById("_s").innerHTML=second;

Rendering:

아직 동적이 아닙니다. 출력 또한 목표 날짜를 입력하기 전에 지속적으로 수동으로 새로 고쳐야 합니다.

5단계: 타이머 setTimeout()을 사용하여 동적으로 시간을 출력합니다.

setTimeout(show,1000);
if(timediff==0){return 0;}

시간 차이가 0이 되면 0을 반환하고 출력을 중지합니다. 또한,clearInterval() 메소드를 사용하여 타이머를 중지하고 더 이상 동적으로 시간을 출력하지 않을 수 있습니다.

 var set=setTimeout(show,1000);
if(timediff==0){clearInterval(set);}

시간 차이가 0인 경우,clearInterval() 메소드를 사용하여 setTimeout(을 중지합니다. ) 타이머가 종료되고 더 이상 시간을 출력하지 않습니다.

동적 렌더링:

설명: # 🎜🎜#setInterval(): 지정된 기간(밀리초)에 따라 함수 또는 계산 표현식을 호출하는 간격 트리거 타이머를 정의합니다. 이 메소드는 setInterval() 타이머를 중지하기 위해 ClearInterval() 메소드가 호출되거나 창이 닫힐 때까지 계속해서 함수를 호출합니다.

요약: 위 내용은 이 글의 전체 내용이며, 모든 분들의 공부에 도움이 되길 바랍니다.

위 내용은 js에서 동적 카운트다운 효과를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!