Math，时间对象知识点及相关案例

01.Math

Math.random();  // 0 - 1 的随机数
Math.round();   //四舍五入取整
Math.ceil();    //向上取整
Math.floor();   //向下取整
Math.abs();   //绝对值
Math.max(num1,num2,num3.....)  //比较最大值
Math.min(num1,num2,num3....)   //比较最小值
Math.PI  //π  3.1415926  - 3.1415927 
Math.pow(x,y)  // x的y次方
Math.sqrt()  // 开平方
Math.sin(x)  // 对/斜  正弦（x表示一个度数，用弧度表示（2 * Math.PI / 360) * x;将度数转换为弧度）
Math.cos(x)  // 邻/斜  余弦
Math.tan(x)  //  对/邻  正切

练习：
万花筒效果
<style>
    *{
        margin:0;
        padding:0;
    }
    section{
        300px;
        height:100px;
        background:black;
        position:fixed;
        top:0;bottom:0;
        right:0;left:0;
        margin:auto;
        transform :rotateX(20deg) rotateY(50deg);
        transform-style:preserve-3d;
    }
    div{
        300px;
        height:100px;
        position :absolute;
    }
</style>
<section id="box"></section>
<script>
    //分析：
    /*
            tan   对边比临边
            Math.tan((2 * Math.PI() / 360) * 30) = 对边 / 临边
        */
    //万花筒的效果
    var z = 150 / Math.tan((2 * Math.PI / 360) *30);
for(var i = 0 ; i < 6 ; i++){
    /*重新确定旋转中心，让回到小人的身上，绕着小人旋转，然后，让z轴，位移(采用三角函数计算位移的距离，有六个拼接，
            每个旋转360/60=60deg,做三角形，计算邻边的长度，每个图片的宽度为600，它的一半300为对边，使用Math.tan()计算出邻边)，
            让每一个图片使用一个随机色代替，最后拼成一个万花筒的效果*/
    box.innerHTML += '<div style="transform-origin:center center '+ (-z) +'px;transform:translateZ('+ z + 'px) rotateY('+ i * 60+ 'deg); background:'+ randomColor() + ' " ></div>';
}
//随机色
function randomColor(){
    var str = '0123456789abcdef';
    var color = '#';
    //颜色值为#6个16进制数
    for(var i = 0 ; i < 6 ; i++){
        //charAt()根据下标获取字符串中的某一个字符(每一次随机一个1-15下标)
        color += str.charAt(parseInt(Math.random()*16));
    }
    return color;
}
</script>

02.抛物线

<style>
    * {
        margin: 0;
        padding: 0;
    }
​
    /* 形成坐标轴的样式 */
    div:nth-of-type(1) {
         600px;
        height: 1px;
        background: red;
        position: absolute;
        top: 300px;
    }
​
    div:nth-of-type(2) {
         1px;
        height: 600px;
        background: blue;
        position: absolute;
        left: 300px;
    }
    span{
        display:block;
        2px;
        height:2px;
        background:red;
        position:absolute;
    }
</style>
<div></div>
<div></div>
<script>
    for(var x = -300 ; x < 300 ; x++){
        // 假设a=0.01;
        var y = (-0.01) * Math.pow(x,2);   //这里的负号代表的不是开口，由于定位的原因造成和数学里的开口方向的不同
        document.write('<span style="left:' + (x + 300) + 'px; top:' + (y + 300) + 'px; "></span>')
    }
</script>

03.随机颜色封装

<script src="../myApi.js"></script>
<script>
    /*
            rgb(255,255,0);
            16进制  #ff0000;
​
            toString(16)  把字符转进制
        */
    function randomColor(){
    var
    r = randomNum(0,255),   //rgb的取值范围为0-255
        g = randomNum(0,255),
        b = randomNum(0,255);
    return systemChange(r,g,b);
}
function systemChange(r,g,b){  //转进制，16进制后，如果得到的数为一位数，需要补零操作
    r = r.toString(16).length < 2 ? '0' + r.toString(16) : r.toString(16);
    g = g.toString(16).length < 2 ? '0' + g.toString(16) : g.toString(16);
    b = b.toString(16).length < 2 ? '0' + b.toString(16) : b.toString(16);
    return '#' + r + g + b;
}
document.body.style.background = randomColor();
console.log(randomColor());
</script>

04.时间对象

1.js里面的对象

1. 宿主对象： DOM 、 BOM

2. 内部对象： new Array() 、 new Object() 、new String() 、new Function()

3. 内置对象：Math

2.new Date()

存在着时间的信息（传参：字符串，数字，时间戳）

创建过去或者未来的时间对象

过去：

var agoTime = new Date('2018-09-04 12:00:00');
                    var agoTime = new Date('2018/09/04 12:00:00');
                    var agoTime = new Date(2018,00,01);

未来：

var futuerTime = new Date('2037-09-04');

现在：

var nowTime = new Date()

获取时间戳：获取的是1970年1月1日到现在的毫秒数

date.getTime();

简单测试：
var nowTime = new Date();
console.log(nowTime);
​
//过去
var agoTime = new Date('1997-11-04');   //传一个字符串
console.log(agoTime);    //Tue Nov 04 1997 08:00:00 GMT+0800 (中国标准时间)
var agoTime = new Date('1997/11/04 12:00:00');   //以斜杠隔开
console.log(agoTime);   //Tue Nov 04 1997 12:00:00 GMT+0800 (中国标准时间)
var agoTime = new Date('1997,11,04 12:00:00');   //以逗号隔开
console.log(agoTime);   //Tue Nov 04 1997 12:00:00 GMT+0800 (中国标准时间)
​
//未来
var futureTime = new Date('2024-3-20');
console.log(futureTime);   //Wed Mar 20 2024 00:00:00 GMT+0800 (中国标准时间)
​
//创建一个五天之后的时间（可以传递时间戳）
var nowTime = new Date();
var futureTime = new Date(nowTime.getTime() + (5 * 24 * 60 * 60 * 1000));
console.log(futureTime);  

查看元素的一些属性：console.dir

eg：console.dir(Math);

05.时间对象api

获取里面：年月日 时分秒 星期几 毫秒数

时间的对象api

1：年份
    getFullYear()  获取
    setFullYear()  设置
2：月份
    getMonth();  获取0-11;
    setMonth();  设置
3：星期
    getDay() 获取
4:多少号
    getDate()  获取
    setDate()  设置  如果把日期设置为0的情况下。保存的是上个月的天数
    eg：怎么获取当月的天数
    分析：
        a:先把月份设置成下个月
            date.setMonth(date.getMonth()+1);
        b:再把日期设置为0
            date.setDate(0);
        c:在获取getDate();
5:时
    getHours()  获取
    setHours()  设置
6:分钟
    getMinutes()  获取
    setMinutes()  设置
7:秒
    getSeconds()  获取
    setSeconds()  设置
8:毫秒
    getMilliseconds()  获取
    setMilliseconds()  设置

对时间对象api的检测：
var date = new Date();
//获取年份
var year = date.getFullYear();
console.log(year);   //2019
//设置年份
date.setFullYear(2012);
var year = date.getFullYear();
console.log(year);      //2012
​
//获取月份
var month = date.getMonth();
console.log(month);      //8  (9月份，由于月份是从0-11)
//设置月份
date.setMonth(3);
var month = date.getMonth();
console.log(month);      //3
​
//星期
var day = date.getDay();
console.log(day);   //3   不能设置，只能获取
​
//多少号
console.log(date.getDate());    //4
// //设置多少号
date.setDate(10);
console.log(date.getDate());    //10
​
//时
var hours = date.getHours();
console.log(hours);   //17
//设置多少时
date.setHours(4);
var hours = date.getHours();
console.log(hours);   //4
​
//分
var minutes = date.getMinutes();
console.log(minutes);   //24
//设置多少分
date.setMinutes(40);
var minutes = date.getMinutes();
console.log(minutes);   //40
​
//秒
console.log(date.getSeconds());   //26
//设置多少秒
date.setSeconds(30);
console.log(date.getSeconds());
​
//毫秒
console.log(date.getMilliseconds()); //801   1s = 1000ms
//设置毫秒
date.setMilliseconds(2);
console.log(date.getMilliseconds());  //2

06.日历效果

<style>
    *{
        margin:0;
        padding:0;
    }
    header{
        770px;
        overflow:hidden;
        margin:30px auto 0;
    }
    div{
        float:left;
        100px;
        height:100px;
        border-radius:50%;
        background:tomato;
        margin:5px;
        text-align:center;
        line-height:100px;
        font-size:30px;
        font-weight:bold;
        color:#fff;
    }
    section{
        770px;
        overflow:hidden;
        margin:0 auto;
    }
    /*span*/
    span{
        float:left;
        100px;
        height:100px;
        border-radius: 50%;
        background:#ccc;
        margin:5px;
    }
    section div{
        background:gold;
    }
</style>
<header id="box1">
    <div>日</div>
    <div>一</div>
    <div>二</div>
    <div>三</div>
    <div>四</div>
    <div>五</div>
    <div>六</div>
</header>
<section id="box2">
​
    </section>
​
<script>
    /*
            1.获取当月第一天为周几（打的空格的数量）
            2.获取当月的天数
        */
    var date = new Date();
//date.setMonth(4);  //因为刚好9月的第一天是星期天，所以，测试了4月的，当第一天不从周天开始的时候，用span补齐
//设置当月的第一天
date.setDate(1);
var week = date.getDay();  //0 周日 （当月的第一天是星期几）
//打印空格
for(var i = 0 ; i < week ; i++){
    box2.innerHTML += '<span></span>';
}
//打印日期
/*
        获取当月的天数
            1：先把月份设置为下个月
            2：把日期设置为0
            3：getDate();
       */
//先把月份设置为下个月
date.setMonth(date.getMonth() + 1);
date.setDate(0);  //如果把日期设置为0的情况下。保存的是上个月的天数
var days = date.getDate();
//打印日期：
for(var i = 1 ; i <= days ; i++){
    box2.innerHTML += '<div>' + i + '</div>';
}
</script>

07.把时间转成字符串放在页面中

<script>
    var date = new Date();
//封装 将时间转成 年月日 时分秒  2019/09/04
function printDate(d,sign){  //d表示date的形参，sign表示 用什么符号进行拼接（如 - / ,)
    //如果没有sign的时候，给一个默认的字符
    sign = !sign ? '/' : sign;  //如果给了字符，用该字符，否则，用默认 /
    //获取d里面  年月日  时分秒(月要加1，因为是从0-11.当得到的结果为一位数时，需要补零操作)
    return  + d.getFullYear() + sign + mendZero(d.getMonth() + 1) + sign + mendZero(d.getDate()) +' ' + mendZero(d.getHours()) + ':' + mendZero(d.getMinutes()) + ':' + mendZero(d.getSeconds());
}
//补零
function mendZero(num){
    return num = num < 10 ? '0' + num : num;
}
document.write(printDate(date,'-'));
</script>

08.定时器

1.setInterval(参数1,参数2) //定时器

参数1： 回调函数 定时器要执行的代码块

参数2： 时间 1000ms

2.清除定时器

clearInterval()

参数：可以是定时器编号（从1开始），可以是定时器的名称（常用）

简单测试：
var count = 0;
var timer = setInterval(function(){
    console.log(count);
    count++;
    //关闭定时器
    if(count >= 10){
        clearInterval(timer);   //清除定时器的名称
    }
},1000)
​
​
setInterval(function(){
    console.log('a');
},1000)
setInterval(function(){
    console.log('b');
},1000)
setInterval(function(){
    console.log('c');
},1000)
clearInterval(2);  //清除定时器的编号

练习：
//打印日期
<style>
        *{
            margin:0;
            padding:0;
        }
        #box{
            300px;
            height:40px;
            margin:100px auto;
            background:red;
            color:#fff;
            font-size:20px;
            font-weight:900px;
            text-align:center;
            line-height:40px;
        }
</style>
function printDate(d,sign){
    //如果没有sign的时候 给一个默认的字符
    sign = !sign ? '/' : sign;
    //获取d  里面  年月日 时分秒 
    return '' + d.getFullYear() + sign + mendZero(d.getMonth() + 1) + sign + mendZero(d.getDate()) + ' ' + mendZero(d.getHours()) + ':' + mendZero(d.getMinutes()) + ':' + mendZero(d.getSeconds());
}
//补零操作
function mendZero(num){
    return num = num < 10 ? '0' + num : num; 
}
//设置定时器
setInterval(function(){
    var d = new Date();
    box.innerHTML = printDate(d);
},1000)

09.计算两个日期的差值

<style>
        *{
            margin:0;
            padding:0;
        }
        #box{
            300px;
            height:40px;
            margin:100px auto;
            background:red;
            color:#fff;
            font-size:20px;
            font-weight:900;
            text-align: center;
            line-height:40px;
        }
</style>
<div id="box"></div>
<script>
    //计算两个时间之间的天数
    setInterval(function(){
    var agoTime = new Date('2018-10-23 12:40:00');
    var nowTime = new Date();
    //相差多少毫秒
    var ms = nowTime - agoTime;
    //转成天
    var day = parseInt(ms / (24 * 60 * 60 *1000));
    //小时
    var hours = parseInt(ms % (24 * 60 * 60 * 1000) / (60 * 60 * 1000));
    //分
    var minutes = parseInt(ms % (24 * 60 * 60 * 1000) % (60 * 60 * 1000) / (60 * 1000));
    //秒
    var seconds = parseInt(ms % (24 * 60 * 60 * 1000) % (60 * 60 * 1000) % (60 * 1000) / 1000);
    box.innerHTML = '相恋' + day + '天' + hours + '小时 ' + minutes + '分' + seconds + '秒';
},1000)
</script>