李芳芳 發表於 2019-8-17 19:46:00

JavaScript实现倒计时

<h1 id="javascript实现倒计时">JavaScript实现倒计时</h1>
<blockquote>
<p>利用JS中的Date对象即可实现,创建目标时间和当前时间,利用getTime函数将两个时间转换成距离1970-01-01的秒数,相减后转化为年月日即可</p>
</blockquote>
<h3 id="js代码">js代码</h3>
<pre><code>&lt;script&gt;
    window.onload = function() {
      setInterval(function() {
            var nowTime = new Date();//获取当前时间
            //创建目标日期
            var endTime = new Date("2019-9-1 00:00:00");
            var seconds = parseInt((endTime.getTime() - nowTime.getTime()) / 1000);//两个时间点的时间差(秒)
            var d = parseInt(seconds / 3600 / 24);//得到天数
            var h = parseInt(seconds / 3600 % 24);//小时
            var m = parseInt(seconds / 60 % 60);//分钟
            var s = parseInt(seconds % 60);//秒
            document.getElementById("djs").innerHTML = "距离开学还有" + d +"天" + h + "小时" + m + "分钟" + s + "秒";
      }, 1000);
    }
&lt;/script&gt;
</code></pre>
<h3 id="html及样式">HTML及样式</h3>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;style&gt;
      p {
            font-size: 24px;
            color: red;
            border: 1px solid red;
            text-align: center;
            width: 600px;
            margin: 20% auto;
            line-height: 50px;
      }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;p id="djs"&gt;&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>


</div>
<div id="MySignature" role="contentinfo">
    <div>作者:Tuzilow</div>
<div>出处:https://www.cnblogs.com/xueyubao/</div>
<div>本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。 </div><br><br>
来源:https://www.cnblogs.com/xueyubao/p/11370082.html
頁: [1]
查看完整版本: JavaScript实现倒计时