六、JavaScript时间(date)对象和数学(Math)对象

时间对象


创建时间对象 var date = new Date();

最好将其转化为字符串,date.toString();

1、date.setTime() 以毫秒设置Date对象。

此处必须要写参数,如果不写参数或者写undefined则返回NaN,除此之外可以传入任何数字和任何纯数字的字符串包括空白字符。

    var date = new Date();
    console.log(date);

    // 返回一个月的第几天
    console.log(date.getDate());
    // 以毫秒设置时间。
    // console.log(date.setDate(false));
    console.log(date.setDate(undefined));

    // 返回从1970年1月1日至今的毫秒数
    console.log(date.getTime());

date.setTime(),参数为undefined或不写参数的结果

2、date.getTime() 返回从1970年1月1日至今的毫秒数。
3、date.setDate() 设置第几天,要先设置在获取时间。
4、date.getDate() 返回一个月的第几天,范围是从1~31。

    var date = new Date();
    console.log(date);

    // 返回一个月的第几天
    console.log(date.getDate());
    // 以毫秒设置时间。
    console.log(date.setDate('  '));

    // 返回从1970年1月1日至今的毫秒数
    console.log(date.getTime());

    //设置第几天
    date.setDate(10)
    console.log(date.getDate());

date.setTime(),参数为空白字符

5、date.getDay() 返回一周中的第几天(0~6,0表示周日)。
6、date.getMonth() 返回月份(0~11,0表示1月)。
7、date.setMonth() 设置月份。
8、date.getFullYear() 获取年份。
9、date.setFullYear() 设置年份。
10、date.getHours() 获取小时。
11、date.setHours() 设置小时。
12、date.getMinutes() 获取分钟。
13、date.setMinutes() 设置分钟。
14、date.getSeconds() 获取秒数。
15、date.setSeconds() 设置秒数。
16、date.getMilliseconds() 获取毫秒数。
17、date.setMilliseconds() 设置毫秒数。
18、date.toTimeString() 将时间转化为字符串。
19、date.toDateString() 将日期转化为字符串。

    // 返回一周中的第几天(0~6,0表示周日)。
    console.log(date.getDay());
    // 返回月份(0~11,0表示1月)
    console.log(date.getMonth());
    // 获取年份
    console.log(date.getFullYear());
    // 获取小时
    console.log(date.getHours());
    // 获取分钟
    console.log(date.getMinutes());
    // 获取秒数
    console.log(date.getSeconds());
    // 获取毫秒数
    console.log(date.getMilliseconds());
    // 将时间转化为字符串
    console.log(date.toTimeString());
    // 将日期转化为字符串
    console.log(date.toDateString());
代码执行效果

定时器

  • setInterval(function(){},1000); 循环任务定时器,隔一定时间循环执行。
  • setTimeout(function(){},1000); 延时定时器,只执行一次。

注意二者之间的区别,它们的单位都是毫秒。

  • clearInterval(null); 清除定时器。

数学对象

Math 对象用于执行数学任务。

Math.random() 返回0~1之间的随机数。
Math.PI 圆周率π。
Math.abs() 返回绝对值。
Math.minx() 返回最小值。
Math.max() 返回最大值。
Math.pow(x, y) 返回x的y次幂。
Math.round() 把数字进行四舍五入。
Math.aqrt() 返回平方根。
Math.ceil() 向上取整。
Math.floor() 向下取整。

练习

1、获取某一范围内的随机整数

function random (min, max) {
            return parseInt(Math.random() * (max - min + 1) + min);
}

2、计算从现在开始到2017年还有多少天,多少小时,多少分,多少秒。


代码执行效果
    var h1 = document.querySelector("h1");

    setInterval(function(){
        // 获取当前时间
        var date = new Date();
        // 获取2017年1月1日的时间
        var futureDate = new Date("01/01/2017");
        var ms = futureDate.getTime() - date.getTime();
        var d = parseInt(ms/1000/60/60/24);
        var h = parseInt((ms - d*24*60*60*1000)/1000/60/60);
        var m = parseInt((ms - (d*24*60*60*1000) - (h*60*60*1000))/1000/60);
        var s = parseInt((ms - (d*24*60*60*1000) - (h*60*60*1000) - (m*60*1000))/1000);
        h1.innerHTML = '距2017年还剩'+ d +'天'+ h +'时'+ m +'分'+ s +'秒';
    },100)

3、绘制时钟

时钟
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>时钟</title>
        <style media="screen">
            * {
                margin: 0;
                padding: 0;
            }
            .clock {
                margin: 80px auto;
                width: 300px;
                height: 300px;
                border: 20px solid hotpink;
                border-radius: 100%;
                position: relative;
            }
            .numbers>div {
                width: 300px;
                height: 40px;
                font-size: 28px;
                line-height: 40px;
                position: absolute;
                left: 0;
                top: 50%;
                margin-top: -20px;
            }
            span {
                position: absolute;
                /*width: 40px;
                height: 40px;*/
            }
            .hour {
                width: 6px;
                height: 112px;
                background-color: yellow;
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -3px;
                margin-top: -112px;
                transform-origin: 50% 100%;
            }
            .minute {
                width: 4px;
                height: 124px;
                background-color: blue;
                position: absolute;
                left: 50%;
                margin-left: -2px;
                top: 50%;
                margin-top: -124px;
                transform-origin: 50% 100%;
            }
            .second {
                width: 2px;
                height: 130px;
                background-color: red;
                position: absolute;
                left: 50%;
                margin-left: -1px;
                top: 50%;
                margin-top: -130px;
                transform-origin: 50% 100%;

            }
        </style>
    </head>
    <body>
        <div class="clock">
            <div class="numbers">
                <!-- div*12>span{$}*12 -->
                <div><span>9</span></div>
                <div><span>10</span></div>
                <div><span>11</span></div>
                <div><span>12</span></div>
                <div><span>1</span></div>
                <div><span>2</span></div>
                <div><span>3</span></div>
                <div><span>4</span></div>
                <div><span>5</span></div>
                <div><span>6</span></div>
                <div><span>7</span></div>
                <div><span>8</span></div>
            </div>
            <div class="hour"></div>
            <div class="minute"></div>
            <div class="second"></div>

        </div>
    </body>
    <script type="text/javascript">
        // 获取元素
        var nums = document.querySelectorAll('.numbers > div');
        var spans = document.querySelectorAll('span');
        var hour = document.querySelector('.hour');
        var minute = document.querySelector('.minute');
        var second = document.querySelector('.second');

        var timer = null;

        for (var i = 0; i < nums.length; i++) {
            nums[i].style.transform ='rotate('+ i*30 + 'deg)';
            spans[i].style.transform ='rotate('+ i*-30 + 'deg)';
        }

        if (timer) {
            clearInterval(timer)
        }
        timer = setInterval(function() {
            // 声明变量获取时间
            var oDate = new Date ();
            var h = oDate.getHours();
            var min = oDate.getMinutes();
            var s = oDate.getSeconds();
            // 将时间调整为12小时制
            if (h >= 12) {
                h -= 12;
            }
            // 声明变量获取旋转角度
            var degh = h/12*360+min/60*30;
            var degm = min/60*360+s/60*6;

            hour.style.transform = 'rotate('+ degh + 'deg)';
            minute.style.transform = 'rotate('+ degm + 'deg)';
            second.style.transform = 'rotate('+ s*6 + 'deg)';

        },100)


    </script>
</html>

以上内容纯属个人理解,由于水平有限,若有错漏之处敬请指出斧正,小弟不胜感激。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容