综合技术

JS基础-Date内置对象

微信扫一扫,分享到朋友圈

JS基础-Date内置对象
0

Date内置对象

日期对象创建

时间戳是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总毫秒数(时间戳)

var date = new Date();//当前时间的日期对象
var data = new Date(2012,6,10);//2012年7月10号的日期对象

get系列API.png

set系列API.png

★注意:

1、setDay( 这个真没有!!!!,星期是通过设定日期自动计算的 )

2、set系列API可以设置比当前范围更精细的时间

比如:setFullYear(2012,3,5) 设置日期为2018年4月5号

setHours(13,30,0) 设置时间为13:30:00

1秒=1000毫秒

实例: setFullYear(year,month,day)    
year:必需,表示年份的四位整数
month:可选,介于 0 ~ 11 之间:如果不填,取系统当月
-1 为去年的最后一个月
12 为明年的第一个月
13 为明年的第二个月
date:可选,表示月中某一天的数值。如果不填,取系统当日
用本地时间表示。介于 1 ~ 31 之间:
0 为上个月最后一天
-1 为上个月最后一天之前的天数
如果当月有31天:
32 为下个月的第一天
如果当月有30天:
32 为下一个月的第二天
<script>
        var date = new Date(); ////Wed Feb 27 2019 17:22:46 GMT+0800 (中国标准时间)
        // var date = new Date(2018,2,10);
        console.log(date);
        console.log(date.toLocaleString()); //返回当前时区的时间,2019/2/27 下午5:22:46
        console.log(date.toLocaleDateString()); //2019/2/27,只返回日期
        console.log(date.getYear()); // 119 返回的是距离20世纪初即1900年的时间。(已废弃)
        console.log(date.getFullYear()); //2019 返回当前年份
        console.log(date.getMonth()); //返回表示月份的数字。返回值是 0(一月) 到 11(十二月) 之间的一个整数。一月为 0, 二月为 1, 以此类推。
        console.log(date.getDay());//返回一周(0~6)的某一天的数字。星期天为 0, 星期一为 1, 以此类推
        console.log(date.getDate());//返回某一天
        console.log(date.getTime());//返回距 1970 年 1 月 1 日之间的毫秒数
        date.setFullYear(2000,2,12);//用于设置年份,这个方法可用于设置月份及月份中的一天。
        console.log(date);
    </script>

定时器

<script>
            //超时定时器
            //间隔定时器
            
            setTimeout("console.log(111)", 2000);
            setTimeout(function(){
                console.log(222);
            }, 4000);
            
            setInterval("console.log(333)", 1000);
            setInterval(function(){
                console.log(444);
            },500);
            
        </script>

案例1:距妇女节还有多少天

<script>
            var nowDate = new Date();
            
            var nowTime = nowDate.getTime();
            
            nowDate.setMonth(2,8);
            
            var endTime = nowDate.getTime();
            
            /* console.log(nowDate);
            var endDate = new Date(2019, 2, 8);
            console.log(endDate); */

            //两个日期之间的时间戳差值
            //var distance = endDate.getTime() - nowDate.getTime();
            var distance = endTime - nowTime;
            var days = distance/1000/60/60/24;
            console.log(days);
        </script>

案例2:举例下课的倒计时

<script>
            //看看还有多久下课呢?
            setInterval(function(){
                
                var nowTime = Date.now();
                var date = new Date();
                date.setHours(15,0,0);
                var endTime = date.getTime();
                var distance = parseInt((endTime - nowTime)/1000);
                var seconds = distance%60;
                var minites = (distance - seconds)/60 % 60;
                var hours = (distance - seconds - minites*60)/60/60;
                
                console.log("距离下课还有"+hours+"小时,"+minites+"分钟,"+seconds+"秒");
            },1000);
            
        </script>

案例3:日历

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    <style>
*{margin:0;padding:0}
#calendar{width:210px;margin:100px auto; overflow:hidden;border:1px solid #000; padding:20px; position:relative}
#calendar h4{ text-align:center; margin-bottom:10px}
#calendar .a1{ position:absolute;top:20px;left:20px;}
#calendar .a2{ position:absolute;top:20px;right:20px;}
#calendar .week{height:30px; line-height:20px;border-bottom:1px solid #000; margin-bottom:10px}
#calendar .week li{ float:left;width:30px;height:30px; text-align:center; list-style:none;}
#calendar .dateList{ overflow:hidden; clear:both}
#calendar .dateList li{float:left;width:30px;height:30px; text-align:center; line-height:30px;list-style:none;}
#calendar .dateList .ccc{ color:#ccc;}
#calendar .dateList .red{ background:#F90; color:#fff;}
#calendar .dateList .sun{ color:#f00;}
</style>
<script>


</script>
</head>

<body>
<div id="calendar">
    <h4>2013年10月</h4>
    <a href="javascript:;" class="a1" id="prev">上月</a>
    <a href="javascript:;" class="a2" id="next">下月</a>
    <ul class="week">
        <li>日</li>
        <li>一</li>
        <li>二</li>
        <li>三</li>
        <li>四</li>
        <li>五</li>
        <li>六</li>
    </ul>
    <ul class="dateList" id="dateList">
        
    </ul>
</div>  
<script>
    var iNow = 0;
    var dateList = document.getElementById("dateList");
    var prev = document.getElementById("prev");
    var next = document.getElementById("next");
    prev.onclick = function(){
        iNow--;
        calender(iNow);
    }
    next.onclick = function(){
        iNow++;
        calender(iNow);
    }
    // n->1后面一个月  n->-2往前两个月
    calender(iNow);
    function calender(n){
        var date = new Date();
        //获取今天是几号
        var nowDate = date.getDate();
        //把时间拨到n的偏移量所代表的月份的1号
        date.setMonth(date.getMonth()+n,1);
        //得到一号是星期几
        var week = date.getDay();
        //这个月总共有多少天
        //把日期拨到下个月的0号(这个月的最后一天)
        date.setMonth(date.getMonth()+1, 0);
        var allDays = date.getDate();
        
        var str = "";
        //week个空的li
        for(var i = 0; i < week; i++){
            str += "<li></li>";
        }
        //allDays个有日期的li
        for(var j = 1; j <= allDays; j++){
            //判断月份是当前的还是以后的?
                
            if(n > 0){
                //以后的月份,只需要判断周末
                if((week+j)%7 === 0 || (week+j)%7 === 1){
                    //判断周末
                    //空白li的数量加上当前日期对7求余
                    str += "<li class='sun'>"+j+"</li>";
                }else{
                    str += "<li>"+j+"</li>";
                }
            }else if(n < 0){
                //以前的日期,直接全部置灰
                str += "<li class='ccc'>"+j+"</li>";
            }else{
                //当前月
                if(j < nowDate){
                    //以前的日期
                    str += "<li class='ccc'>"+j+"</li>";
                }else if(j === nowDate){
                    //今天
                    str += "<li class='red'>"+j+"</li>";
                }else if((week+j)%7 === 0 || (week+j)%7 === 1){
                    //判断周末
                    //空白li的数量加上当前日期对7求余
                    str += "<li class='sun'>"+j+"</li>";
                }else{
                    str += "<li>"+j+"</li>";
                }
            }
            
            
        }
        dateList.innerHTML = str;
    }
    
</script>
    </body>
</html>

案例4:时钟

<body>
    <div id="div">
        <img src="img/0.png" />
        <img src="img/8.png" />
        时
        <img src="img/1.png" />
        <img src="img/5.png" />
        分
        <img src="img/0.png" />
        <img src="img/9.png" />
        秒
    </div>
</body>
</html>
<script>
    var aImg = document.getElementsByTagName("img");
    function addZero(n){
        return n < 10 ? "0"+n : ""+n;
    }
    function getTime(){
        
        var date = new Date(),
            hours = addZero(date.getHours()),
            minutes = addZero(date.getMinutes()) ,
            seconds = addZero(date.getSeconds());
        
        //150103
        var timeStr = hours+minutes + seconds;
        
        for(var i = 0; i < aImg.length; i++){
            aImg[i].src = "img/"+timeStr[i]+".png";
        }
        
        return getTime;
        
    }
    //getTime();
    
    //getTime()自己先调用一次,调用之后的结果就是这个函数的返回值
    //而返回值就是函数本身,所以就又把这个函数交给了setInterval取执行
    setInterval(getTime(),1000);
    
    
</script>
阅读原文...

微信扫一扫,分享到朋友圈

JS基础-Date内置对象
0
简书

python一两行代码完成的骚操作

上一篇

小度智能音箱1S发布:可红外控制传统家电

下一篇

评论已经被关闭。

插入图片

热门分类

往期推荐

JS基础-Date内置对象

长按储存图像,分享给朋友