IFE JavaScript Task0002-2 小练习2：日期对象的使用

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了IFE JavaScript Task0002-2 小练习2：日期对象的使用相关的知识，希望对你有一定的参考价值。

任务描述

在和上一任务同一目录下面创建一个task0002_2.html文件，在js目录中创建task0002_2.js，并在其中编码，实现一个倒计时功能。

  • 界面首先有一个文本输入框，允许按照特定的格式YYYY-MM-DD输入年月日；
  • 输入框旁有一个按钮，点击按钮后，计算当前距离输入的日期的00:00:00有多少时间差
  • 在页面中显示，距离YYYY年MM月DD日还有XX天XX小时XX分XX秒
  • 每一秒钟更新倒计时上显示的数
  • 如果时差为0，则倒计时停止

 

当时做这个时候我以为是挺简单的，但做起来时候发现很多不会，主要是对日期对象的不熟悉；

 

思路：

主要是获取输入的时间与当前时间的差值，用这个值算出具体相差的时间，再用setTimeout每过一秒获取这个相差时间同时对页面进行刷新；

网上找的一张关于日期对象的图：

技术分享

  • MDN上Date对象中处理时间和日期的常用方法；

 

在这里我直接用了html5 input的新属性“date”，点击的话直接显示日历；

将input的值转为日期对象；

new Date()如果没有输入任何参数，则Date的构造器会依据系统设置的当前时间来创建一个Date对象。表示当前系统时间。

getTime()--返回从1970-1-1 00:00:00 UTC（协调世界时）到该日期经过的毫秒数，对于1970-1-1 00:00:00 UTC之前的时间返回负值。

Date.now()--返回自 1970-1-1 00:00:00  UTC (时间标准时间)至今所经过的毫秒数。

总之就是先转换为相同的参考系再进行数值的转换啦；

 

<body>
<input type="date" id="date2"><button id="start">开始</button>
<div class="count-down"></div>

</body>
<script>
    document.getElementById("start").onclick=run;

    function run(){
            var endtime=new Date(document.getElementById("date2").value);
            var starttime=Date.now()
            var time=(endtime.getTime()-starttime)/1000;//毫秒变秒
            var day=parseInt(time/(60*60*24));//秒变日，下面以此类推；
            var hours=parseInt(time/(60*60)%24);
            var min=parseInt(time/60%60);
            var sec=parseInt(time%60);
            document.getElementsByClassName("count-down")[0].innerHTML="<span>"+"距离设置时间还有："+day+"天"+hours+"小时"+min+"分钟"+sec+"秒"+"</span>";
            setTimeout(run,1000);
             if(time<=0){
            clearTimeout(run);
            document.getElementsByClassName("count-down")[0].innerHTML="时间到了";
        }
}

</script>

 

以上是关于IFE JavaScript Task0002-2 小练习2：日期对象的使用的主要内容，如果未能解决你的问题，请参考以下文章

IFE 2015_spring task0002 自学记录

IFE_part1(task1-7)_about.html总结

JavaScript闭包学习笔记(ife2015spring)

ife2015-task2-4-5

ife2015-task2

ife2015-task2-1-2-3