zoukankan      html  css  js  c++  java
  • 当前时间和倒计时效果

    这个效果的实现关键是对Date对象和setTimeout的使用。

    一共有三个例子,HTML结构如下,就不添加CSS样式了。

    <body>
        当前时间:<p id="p1"></p>
        高考倒计时:<p id="p2"></p>
        限时抢购:<p id="p3"></p>
    </body>

     主要体会javascript的实现

    复制代码
    window.onload=function () {  
        var p1=document.getElementById("p1"),
            p2=document.getElementById("p2");
            p3=document.getElementById("p3");
        showtime1();
        showtime2();
        showtime3();
    }   
    复制代码

    1.简单的实现当前时间的显示

    复制代码
     function showtime1() {
         var nowdate=new Date();//创建Date对象nowdate,以获取当前时间
         var year=nowdate.getFullYear(),//获取年份
             month=nowdate.getMonth()+1,//获取月份,getMonth()得到的是0-11,需要加1
             date=nowdate.getDate(),//获取日份
             day=nowdate.getDay(),//获取一周中的某一天,getDay()得到的是0-6
             week=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],
             h=nowdate.getHours(),
             m=nowdate.getMinutes(),
             s=nowdate.getSeconds(),
             h=checkTime(h),//函数checkTime用于格式化时,分,秒
             m=checkTime(m),
             s=checkTime(s);
         p1.innerHTML=year+"年"+month+"月"+date+"日"+week[day]+h+":"+m+":"+s;
         setTimeout(showtime1, 1000);//反复执行函数本身
     }       
    复制代码

    其中的checkTime函数如下:

    复制代码
    function checkTime(i) {
       if (i<10) {
          i="0"+i;
       }
       return i;
    }
    复制代码

    因为平时看到的时间格式一般是00:00:01,而getHours,getMinutes,getSeconds得到格式是0到9,不是00到09这样的格式。所以在从9变成10的过程中,有一位数,变成两位数,同样在充59秒变为0秒或者59分变为0分或者23时变为0时。

    比如 23:59:59 再下一秒 应该变为00:00:00;若未使用checkTime函数进行处理,则会变为0:0:0,这样格式上就有点不统一,而且视觉上也有字数增加或减少的突变。(后面两个例子就不用checkTime函数对时分秒进行处理了!!!)

    2.高考倒计时效果实现

    复制代码
    function showTime2() {
      var nowtime=new Date(),//获取当前时间
          endtime=new Date("2017/6/6");//定义结束时间
       var lefttime=endtime.getTime()-nowtime.getTime(),//距离结束时间的毫秒数
           leftd=Math.floor(lefttime/(1000*60*60*24)),//计算天数
           lefth=Math.floor(lefttime/(1000*60*60)%24),//计算小时数
           leftm=Math.floor(lefttime/(1000*60)%60),//计算分钟数
           lefts=Math.floor(lefttime/1000%60);//计算秒数
       p2.innerHTML=leftd+"天"+lefth+":"+leftm+":"+lefts;
       setTimeout(showTime2, 1000);    
    }    
    复制代码

    其中比较重要的几点:

    ① 定义结束的时间endtime=new Date("2017/6/6")是通过new一个带有参数的Date对象,直接 new Date()则是直接获取到当前的时间;

    ② getTime()方法得到的是距离1970 年 1 月 1 日的毫秒数。

    ③天数,小时数,分钟数和秒数的计算,%(取模运算)。得到距离结束时间的毫秒数(剩余毫秒数),除以1000得到剩余秒数,再除以60得到剩余分钟数,再除以60得到剩余小时数。除以24得到剩余天数。剩余秒数 lefttime/1000 模60得到秒数,剩余分钟数 lefttime/(1000*60) 模60得到分钟数,剩余小时数模 lefttime/(1000*60*60) 模24得到小时数。

    3.限时抢购倒计时效果

    复制代码
    function showtime3() {
      var nowtime=new Date(),
        endtime=new Date("2020/1/1,00:00:00"),//设置结束时间
        lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000),
        d=Math.floor(lefttime/(60*60*24)),
        h=Math.floor(lefttime/(60*60)%24),
        m=Math.floor(lefttime/60%60),
        s=Math.floor(lefttime%60);
      p3.innerHTML=d+"天"+h+"小时"+m+"分"+s+"秒";
      setTimeout(showtime3, 1000);    
    }
    复制代码

    其实和第二个例子大同小异,区别是结束时间的设置 new Date("2020/1/1,00:00:00")

    下面是完整的代码

    复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>倒计时效果</title>
        <script type="text/javascript">
            function checkTime(i) {
                if (i<10) {
                    i="0"+i;
                }
                return i;
            }
            window.onload=function () {
                
                var p1=document.getElementById("p1"),
                    p2=document.getElementById("p2");
                showtime1();
                showtime2();
                showtime3();
         } function showtime1() { var nowdate=new Date(); var year=nowdate.getFullYear(),//年份 month=nowdate.getMonth()+1,//月份 date=nowdate.getDate(),//日 week=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"], day=nowdate.getDay(),//getDay获取0-6 h=nowdate.getHours(), h=checkTime(h), m=nowdate.getMinutes(), m=checkTime(m), s=nowdate.getSeconds(), s=checkTime(s); p1.innerHTML=year+"年"+month+"月"+date+"日"+week[day]+h+":"+m+":"+s; setTimeout(showtime1, 1000); } function showtime2() { var nowtime=new Date(), endtime=new Date("2017/6/6"); var lefttime=endtime.getTime()-nowtime.getTime(), leftd=Math.floor(lefttime/(1000*60*60*24)), lefth=Math.floor(lefttime/(1000*60*60)%24), leftm=Math.floor(lefttime/(1000*60)%60), lefts=Math.floor(lefttime/1000%60); p2.innerHTML=leftd+"天"+lefth+":"+leftm+":"+lefts; setTimeout(showtime2, 1000); } function showtime3() { var nowtime=new Date(), endtime=new Date("2020/1/1,00:00:00"), lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000), d=Math.floor(lefttime/(60*60*24)), h=Math.floor(lefttime/(60*60)%24), m=Math.floor(lefttime/60%60), s=Math.floor(lefttime%60); p3.innerHTML=d+"天"+h+"小时"+m+"分"+s+"秒"; setTimeout(showtime3, 1000); } </script> </head> <body> 当前时间:<p id="p1"></p> 高考倒计时:<p id="p2"></p> 限时抢购:<p id="p3"></p> </body> </html>
  • 相关阅读:
    dell台式机网络唤醒
    今天学习到ROS的PCC的新的一种场景,用PCC不是为了带宽叠加而是为了换IP,PCC的标准做法
    默认ros安装好以后,可能对外开放的端口号,可能被黑客利用的地方,ros的0day漏洞
    ros-winbox利用防火墙安全登录,二次碰撞方法
    S5120V2-IRF2配置
    routeros ros mikrotik的ipsec配置,注意配置的步骤,以及哪些硬件支持哪种加速
    60岁-80岁老年人住院医疗险,既往症可理赔!家有长辈首选
    docker上2分钟安装mikrotik routeros
    pandas filter数据筛选
    (纪录片)光的故事 BBC Light Fantastic (2004)
  • 原文地址:https://www.cnblogs.com/fan-lily/p/5688292.html
Copyright © 2011-2022 走看看