用JavaScript Date 对象做一个机械表

最近做项目需要做一个比赛倒计时，顺便也看了下Date对象复习下。

  • 日期转换：

var data = new Date(2017,10,28);

可以接受三种参数

2017,10,28

字符串日期格式"2017-1-2";

表示日期的毫秒数

  • 常用的获取日期的制定部分

getFullYear() //年

getMonth() //月

getMonth() //日

getFeature()

getMinutes()//分钟

getTime()//毫秒数

getDay() //周几

getSeconds()//秒
getHours(); //史
getMilliseconds();//毫秒

 

在做机械表之前做一个简单的电子表：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
     <div id = "box1"></div>
    </body>
</html>
<script>
    function clock(){
        var d = new Date();
        var h = d.getHours();
        //改善电子表格式 
        h<10?h+"0":h;
        var m = d.getMinutes();
        m<10?m+"0":m;
        var s = d.getSeconds();
        s<10?h+"0":s;
        var demo = document.getElementById("box1");
        var str = h +":"+ m +":"+ s ;
        demo.innerHTML = str;

    }
    
    setInterval(clock, 1000);
</script>

再来一个复杂的机械表。

1.先获取当前时间，再根据时间计算时，分，秒所旋转的度数。

2.封装一个旋转度数的函数

3.用定时器每秒调用一次。

分析下来其实很简单。css样式就不上传代码了。

<script>
    
    //需求：获取当前时间 根据时间 计算各个表针要旋转的度数 
    var hh = document.getElementById("h");//时针
    var mm = document.getElementById("m");//分针
    var ss = document.getElementById("s");//秒针
    //封装一个获取当前时间 并设置表针旋转角度的函数
    function clock() {
        var d = new Date();
        var s = d.getSeconds();//秒钟
        //60秒 转一圈 360度 一秒6度
        ss.style.transform = "rotate(" + (s * 6) + "deg)";
        var m = d.getMinutes();//分钟
        //60分 转一圈 360度 一分钟6度
        mm.style.transform = "rotate(" + (m * 6) + "deg)";
        var h = d.getHours();//小时
        //12小时 转一圈 360度 30度
        hh.style.transform = "rotate(" + (h * 30) + "deg)";
    }
    //clock();
    setInterval(clock, 1000);


</script>

 

posted @ 2017-10-31 15:02  Joyce前端  阅读(336)  评论(0)    收藏  举报