js date对象及案例

DATE对象

语法 new date() 返回一个对象

<script>

    var date=new Date();
    //获取小时
    console.log(date.getHours());
    //获取分钟
    console.log(date.getMinutes());
    //获取秒
    console.log(date.getSeconds());
    //获取整年，使用getYear 是获取 89年格式的
    console.log(date.getUTCFullYear());
    //获取月份,月份是从0开始的  需要+1
    console.log(date.getMonth()+1);
    //获取日
    console.log(date.getDate());
    //获取星期
    console.log(date.getDay());

//获取时间戳时间戳（timestamp），一个能表示一份数据在某个特定时间之前已经存在的、完整的、

//可验证的数据,通常是一个字符序列，唯一地标识某一刻的时间。

console.log(date.getTime());

//获取当前时间戳

var time=new Date().getTime();

for(i=0;i<1000000;i++){

}

//输出for 循环使用多长时间

console.log((new Date().getTime())-time);

</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 146px;
            height: 240px;
            background-image: url("center.jpg");
            float: left;
        }
        span{
            float: left;
            font-size: 40px;
            line-height: 240px;
        }
    </style>
</head>
<body>
    <div id="hour1"></div>
    <div id="hour2"></div><span>:</span>
    <div id="minute1"></div>
    <div id="minute2"></div><span>:</span>
    <div id="second1"></div>
    <div id="second2"></div>



    <script>var hour1,hour2,minute1,minute2,second1,second2;
        // 这里面数组设计的思路 应该这样设计，数组的第0项对应图片中的0
        // 第一项对应数组中的1  依次往下排列
        // position 的定义是找图片的顶点就行
        var arr=[
            {x:640,y:240},
            {x:0,y:0},
            {x:150,y:0},
            {x:330,y:0},
            {x:480,y:0},
            {x:653,y:0},
            {x:0,y:220},
            {x:150,y:220},
            {x:330,y:220},
            {x:480,y:220}
        ]
　　　　　init();
        function init(){
            hour1=document.getElementById("hour1");
            hour2=document.getElementById("hour2");
            minute1=document.getElementById("minute2");
            minute2=document.getElementById("minute2");
            second1=document.getElementById("second1");
            second2=document.getElementById("second2");
　　　　　　  //打开网页直接获取，不在等待1s执行
            // animate();
            //只是时间间隔函数，没一次执行一次fn函数
            setInterval(animate,1000);
        }

        function animate(){
            var date=new Date();
            var hour=getString(date.getHours());
            var minue=getString(date.getMinutes()) ;
            var second=getString( date.getSeconds());
            //根据现在的时间设置当前div的图片
            show(hour1,hour[0]);
            show(hour2,hour[1]);
            show(minute1,minue[0]);
            show(minute2,minue[1]);
            show(second1,second[0]);
            show(second2,second[1]);
        }

        //获取的时间如果小于10 前面添加0返回字符串，不小于10 就返回当前值转换字符串
        function getString(num){
            return num<10 ? "0"+num : num.toString();
        }

        //显示团片的定位  给图片定位的时候  使用的是负值  别忘记
        function show(elem,num){
            elem.style.backgroundPositionX=-arr[num].x+"px";
            elem.style.backgroundPositionY=-arr[num].y+"px";
        }
    </script>




</body>
</html>

posted @ 2020-06-18 09:13 WhiteSpace 阅读(335) 评论(0) 收藏举报

刷新页面返回顶部

WhiteSpace

js date对象及案例

公告