使用JavaScript怎么實(shí)現(xiàn)一個(gè)給定時(shí)間的倒計(jì)時(shí)功能

發(fā)布時(shí)間：2021-04-15 16:40:28 來源：億速云閱讀：132 作者：Leah 欄目：web開發(fā)

使用JavaScript怎么實(shí)現(xiàn)一個(gè)給定時(shí)間的倒計(jì)時(shí)功能？針對這個(gè)問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。

代碼如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>倒計(jì)時(shí)</title>
  </head>
  <body>
    <input type="text" name="time" id="time" value="2017-09-22" />
    <input type="button" name="okbtn" id="okbtn" value="確認(rèn)" />
    <br />
    <p id="textp">這里顯示倒計(jì)時(shí)</p>
  </body>
<script type="text/javascript">
  var okbtn=document.getElementById("okbtn");
  textp=document.getElementById("textp");
  okbtn.onclick=function(){
    var time=document.getElementById("time");
    var timevalue=time.value;
    //通過正則表達(dá)式確認(rèn)輸入格式是否正確
    var patt=/^(\d{1,4})(-)(\d{1,2})\2(\d{1,2})$/;
    if(patt.test(timevalue)==false){
      //如果不正確
      textp.innerHTML="輸入格式不滿足YYYY-MM-DD";
      return false;
    }else{
      textp.innerHTML="這里顯示倒計(jì)時(shí)";
    }
    //獲取輸入的年月日
    var timearray=timevalue.split("-");
    //ShowLeftTime(timearray[0],timearray[1],timearray[2]);
    setInterval(function(){ShowLeftTime(timearray[0],timearray[1],timearray[2]);},1000);
  }
  function ShowLeftTime(year,month,date){
        //得出剩余時(shí)間
    var now=new Date();
    var endDate=new Date(year,month-1,date);
    var leftTime=endDate.getTime()-now.getTime();
    var leftsecond=parseInt(leftTime/1000);
    var day=Math.floor(leftsecond/(60*60*24));
    var hour=Math.floor((leftsecond-day*24*60*60)/3600);
    var minute=Math.floor((leftsecond-day*24*60*60-hour*3600)/60);
    var second=Math.floor(leftsecond-day*60*60*24-hour*60*60-minute*60);
    //顯示剩余時(shí)間
    textp.innerHTML="距離"+year+"年"+month+"月"+date+"日"
    +"還有"+day+"天"+hour+"小時(shí)"+minute+"分"+second+"秒";
  }
</script>
</html>

關(guān)于使用JavaScript怎么實(shí)現(xiàn)一個(gè)給定時(shí)間的倒計(jì)時(shí)功能問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識。

向AI問一下細(xì)節(jié)

使用JavaScript怎么實(shí)現(xiàn)一個(gè)給定時(shí)間的倒計(jì)時(shí)功能

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽