>  기사  >  웹 프론트엔드  >  Javascript 예제에서 시간 카운트다운을 구현하는 방법은 무엇입니까?

Javascript 예제에서 시간 카운트다운을 구현하는 방법은 무엇입니까?

黄舟
黄舟원래의
2017-07-17 11:46:471425검색

and                                                                우리, 그녀 그녀 자신, 그녀 그녀 그녀 그녀 그녀 그녀 그녀 그녀 그녀 그녀 자신 그녀 그녀 그녀 그녀 그녀 그녀 그녀 그녀 그녀 그녀 그녀 그녀 그녀 그녀 그녀 그녀 그녀 그녀 그녀 그녀 그녀 그녀 그녀 그녀 그녀 필요 그녀 필요 자바 스크립트

5, 4, 3, 2, 1을 표시한 후 웹사이트 홈페이지로 바로 이동합니다. 모든 분들께 도움이 되기를 바랍니다. .

프론트 데스크 페이지: re
        <p>将在 <span id="mes">5</span> 秒钟后返回首页!</p>

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

 <script language="javascript" type="text/javascript">
        var i = 5;
        var intervalid;
        intervalid = setInterval("fun()", 1000);
        function fun() {
            if (i == 0) {
                window.location.href = "default.aspx";
                clearInterval(intervalid);
            }
            document.getElementById("mes").innerHTML = i;
            i--; 
        }
        </script>

여기서는 날짜 날짜 카테고리

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>日期类倒计时</title>
    <script type="text/javascript">
      window.onload=function(){
        var op=document.getElementById("time");
        var obtn=document.getElementById("btn");
        var omusic=document.getElementById("music");
        obtn.onclick=function(){//按钮点击 音乐停止播放
          omusic.pause();
        }
        function totwo(e){
          return e<10?"0"+e:""+e;//如果取得的数字为个数则在其前面增添一个0
        }
        function go(){//把获取时间的功能封装到函数内    注意 时间要向下取整避免小数
            var time1=new Date();//获取当前时间 获取的市1970年1年1月日到现在的毫秒数(必须写在函数或者定时器内 每一次变化都要重新获取当前时间)
            var time2=new Date(2017,9,27,17,20,10);//设置需要到达的时间 也是获取的毫秒数
            var conS=Math.floor((time2.getTime()-time1.getTime())/1000);//获得差值除以1000转为秒
            var day=totwo(Math.floor(conS/86400));// 差值/60/60/24获取天数
            var hour=totwo(Math.floor(conS%86400/3600)); //  取余/60/60获取时(取余是获取conS对应位置的小数位)
            var min=totwo(Math.floor(conS%86400%3600/60));// 取余/60获取分
            var s=totwo(Math.floor(conS%60)); //取总秒数的余数
            var html="倒计时"+day+"天"+hour+"时"+min+"分"+s+"秒"; 
            op.innerHTML=html;//把字符串添加进p中
            if(conS<0){//倒计时完成 执行功能,这里是播放MP3
              clearInterval(time);//执行功能时要清除时间函数
              omusic.play();
              op.innerHTML="春节快乐!";
            }          
        }
        go();//调用函数
        var time=setInterval(go,1000);//设置定时器 每一秒执行一次
      }
    </script>
  </head>
  <body>
    <button id="btn">停止</button>
    <audio src="music.mp3" id="music"></audio>
    <p id="time"></p>
  </body> 
</html>

효과 맵:


을 사용합니다.

위 내용은 Javascript 예제에서 시간 카운트다운을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.