Date对象,时钟和倒计时-前端ABC

1.简要了解下date对象的方法.

 var d=new Date();
 console.log(d.getDate());// 一个月中某一天 
  console.log(d.getDay());// 星期 
  console.log(d.getMonth());// 月份 
  console.log(d.getFullYear());// 返回年份 
  console.log(d.getTime());// 返回1970年至今的毫秒数

2.结合呼吸效果的时钟.网站里有很多朋友自己上手的纯css3时钟,这里主要是为了复习下date对象,就用js了.animation只是用在了呼吸效果上,有关于css3的transition和animation可以去看看张鑫旭大神的讲解的内容.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <style>
    .main{
        width:800px;
        height:500px;
        background: #333;
        border:1px solid #333;
        -webkit-border-radius:10px;
        -moz-border-radius:10px;
        border-radius:10px;
        margin:60px auto;
        font-family:'微软雅黑',sans-serif;
    }

    .clock{
         width:600px;
        height:150px;
        color: #3bffff;
        -webkit-border-radius:10px;
        -moz-border-radius:10px;
        border-radius:10px;
        margin:150px  auto;
        -webkit-animation-timing-function: linear;/*动画播放速度曲线*/
        -webkit-animation-name: breathe;
        -webkit-animation-duration: 2000ms;
        -webkit-animation-iteration-count: infinite;/*动画播放次数*/
        -webkit-animation-direction: alternate;/*动画是否反向播放*/
    }
    @-webkit-keyframes breathe {
        0% { opacity: .2; box-shadow:0 0 5px rgba(255,255,255,0.1);}
        100% { opacity: 1;box-shadow:0 0 50px rgb(59, 255, 255);}
    }
        .days{
            width:600px;
            height:75px;
            line-height:75px;
            font-size:3rem;
            text-align: center;
            display: block;
        }
        #time{
            width:600px;
            height:75px;
            line-height:75px;
            font-size:2.5rem;
            text-align: center;
        }
    </style>
    <script>
        var t= null;// setTimeout调用自身可以做到setInvertal效果,但是不知道为什么要这样写,有了解的朋友希望能够解答下.
        t=setTimeout(getTime,1000);
        function getTime(){
            var date=new Date();
            var week = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六")[date.getDay()];
            document.getElementById("mon").innerHTML=date.toLocaleDateString();
            document.getElementById("days").innerHTML=week;
            document.getElementById("time").innerHTML =  date.toLocaleTimeString();//这样写更方便,但是在火狐和IE上会显示上午,下午,不知道什么问题.
            t = setTimeout(getTime,1000); //设定定时器，循环执行
        }
    </script>
</head>
<body>
<div class="main">
       <div class="clock">
           <div class="days">
               <span id="mon"></span>
               <span id="days"></span>
           </div>
           <div id="time">
           </div>
       </div>
</div>
</body>
</html>

3.倒计时,根据getTime()

<!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
<div id="div1"></div>
    </body>
    <script>
     function time(){
            var div1=document.getElementById('div1');
            var date=new Date();
            var nextTime=new Date('2018/06/05 ');//  此处需要改进 
            var t=nextTime.getTime()-date.getTime();
            var d=Math.floor(t/1000/60/60/24);
            var h=Math.floor(t/1000/60/60%24);
            var m=Math.floor(t/1000/60%60);
            var s=Math.floor(t/1000%60);
            var str= new String();
            str="距今还有"+d+"天"+m+"小时"+m+"分钟"+s+"秒";
            div1.innerHTML=str;
        }
        setInterval(time,1000)

    </script>
</html>

欢迎分享本文，转载请保留出处：前端ABC » Date对象,时钟和倒计时

Date对象,时钟和倒计时

相关推荐

发表评论 0