六、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>

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 196,099评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,473评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,229评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,570评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,427评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,335评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,737评论 3 386
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,392评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,693评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,730评论 2 312
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,512评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,349评论 3 314
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,750评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,017评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,290评论 1 251
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,706评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,904评论 2 335

推荐阅读更多精彩内容