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>
时间: 2024-10-13 01:32:20

IFE JavaScript Task0002-2 小练习2:日期对象的使用的相关文章

JavaScript初探系列之日期对象

时间对象是一个我们经常要用到的对象,无论是做时间输出.时间判断等操作时都与这个对象离不开.它是一个内置对象--而不是其它对象的属性,允许用户执行各种使用日期和时间的过程. 一   Date 日期对象 日期对象可以储存任意一个日期,并且可以精确到毫秒数(1/1000 秒). 定义一个时间对象 : var Udate=new Date(); 注意:使用关键字new,Date()的首字母必须大写. 使 Udate 成为日期对象,并且已有初始值:当前时间(当前电脑系统时间). 如果要自定义初始值,可以用

JavaScript--Date 日期对象

日期对象可以储存任意一个日期,并且可以精确到毫秒数(1/1000 秒). 定义一个时间对象 : var Udate=new Date(); 注意:使用关键字new,Date()的首字母必须大写. 使 Udate 成为日期对象,并且已有初始值:当前时间(当前电脑系统时间). 如果要自定义初始值,可以用以下方法: var d = new Date(2012, 10, 1); //2012年10月1日 var d = new Date('Oct 1, 2012'); //2012年10月1日 我们最好

日期对象的时间推迟

<script type="text/javascript"> var mydate=new Date(); //定义日期对象document.write("当前时间:"+mydate+"<br>"); mydate.setTime(mydate.getTime() + 60 * 60 * 1000); 设置获取的日期推迟-->> 注意: 1. 一小时 60 分,一分 60 秒,一秒 1000 毫秒 2. 时间

web实践小项目&lt;一&gt;:简单日程管理系统(涉及html/css,javascript,python,sql,日期处理)

暑假自学了些html/css,javascript和python,苦于学完无处练手几乎过目即忘...最后在同学的建议下做了个简单日程管理系统.借第一版完成之际,希望能将实践期间犯过的错误和获得的新知进行整理,希望能给其他初学者提供参考,也希望有大神在浏览我粗糙的开发过程中能指出一些意见或建议. (阅读以下内容需要有一定的html/css,javascript,python和sql基础,and谢谢阅读!) 注:实践中的环境为ubuntu 14.04操作系统,python3.4(2.7实测也可行),

JavaScript日期对象使用总结

javascript Date日期对象的创建 创建一个日期对象: var objDate=new Date([arguments list]); 我总结了参数形式主要有以下3种: new Date("month dd yyyy hh:mm:ss"); //后面的hh:mm:ss可选(不选的话就是默认的开始时间),而且前三项的顺序可以随意,甚至各字段后面可以加逗号 new Date(yyyy,mth,dd,hh,mm,ss); //除了前两个字段(年.月字段)外,其余的都是可选的(不选的

JavaScript基础——引用类型(二)日期类型Date、正则表达式类型RegExp

Date类型 ECMAScript中的Date类型是在早期Java中的java.util.Date类基础上构建的.为此,Date类型使用自UTC(CoordinatedUniversal Time,国际协调时间)1970年1月1日午夜(零时)开始经过的毫秒数来保存日期.在使用这种数据存储格式的条件下,Date类型保存的日期能够精确到1970年1月1日之前或之后的285 616年. 要创建一个日期对象,使用new 操作符和Date构造函数即可,如: var now = new Date(); 在调

javascript的日期对象Date操作时间日期值

创建一个日期对象: var objDate=new Date([arguments list]); 我总结了参数形式主要有以下3种: new Date("month dd yyyy hh:mm:ss");//后面的hh:mm:ss可选(不选的话就是默认的开始时间),而且前三项的顺序可以随意,甚至各字段后面可以加逗号 new Date(yyyy,mth,dd,hh,mm,ss); //除了前两个字段(年.月字段)外,其余的都是可选的(不选的话就默认为开始的),不过,此处顺序最好别随意变换

JavaScript Date日期对象以及日期格式化方法

前言 Date对象是javascript语言中内置的数据类型,用于提供日期和时间的操作接口.Date对象是在早期java中的java.util.Date类基础上创建的,为此,Date类型使用自UTC1970年1月1日0点开始经过的毫秒数来保存日期,它可以表示的时间范围是1970年1月1日0点前后的各1亿天. 静态方法 总共有3个静态方法:Date.now().Date.parse().Date.UTC() [Date.now()] ECMAScript5新增了now()方法,该方法返回当前时间距

JavaScript性能优化小知识总结(转)

JavaScript的性能问题不容小觑,这就需要我们开发人员在编写JavaScript程序时多注意一些细节,本文非常详细的介绍了一下JavaScript性能优化方面的知识点,绝对是干货. 前言 一直在学习javascript,也有看过<犀利开发Jquery内核详解与实践>,对这本书的评价只有两个字犀利,可能是对javascript理解的还不够透彻异或是自己太笨,更多的是自己不擅于思考懒得思考以至于里面说的一些精髓都没有太深入的理解. 鉴于想让自己有一个提升,进不了一个更加广阔的天地,总得找一个