zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    什么时候用GET?什么时候用POST?
    Oracle存储过程in、out、in out 模式参数
    oracle的spool功能
    xshell-常用命令
    js Date()日期函数浏览器兼容问题解决方法
    spring-quartz
    spring-quartz普通任务与可传参任务
    MySQL服务安装和可视化工具安装
    PL/SQL Developer 查询的数据有乱码或者where 字段名=字段值 查不出来数据
    Windows下安装Redis服务
  • 原文地址:https://www.cnblogs.com/spezz07/p/5820047.html
Copyright © 2011-2022 走看看