11月12号本周知识点总结

11月6号

日期时间对象

       

     new Date(); 返回时间,格式不是很满意

        */

        var d = new Date(); // 返回当前时间

        // var d = new Date("2008-8-8 8:00:0"); // 返回当前时间

        // var d = new Date(1699236104); // 返回当前时间

        // var d = new Date(2021,9,10,12,45,12); // 返回当前时间

        // var d = new Date(2021,12,1,12,0,0); // 返回当前时间

        /*

        创建日期时间对象       ‘

’

        方法:

        1) 将日期转为字符串     

     

      toLocaleString()  整个日期时间转为字符串

            toLocaleDateString()  日期转为字符串

            toLocaleTimeString()  时间转为字符串



        console.log(d.toLocaleString());

        console.log(d.toLocaleDateString());

        console.log(d.toLocaleTimeString());

        2. 单独获取年(year)月(month)日(date)

       

            年:getFullYear() 四位数的年

            月份:getMonth 必须+1,得到我们想要的月份

            console.log(d.getYear());

            console.log(d.getFullYear());

            console.log(d.getMonth()+1);

            console.log(d.getDate());

        */

        /*

        3. 获取小时(hours),分钟(minutes),秒钟(seconds)

            console.log(d.getHours());

            console.log(d.getMinutes());

            console.log(d.getSeconds());

        4. 星期

            getDay() 0-6 星期日 - 星期六

            console.log(d.getDay());

        5. 获取时间戳(毫秒数) 1970 年 1 月 1 日至今的毫秒数

            计算时间的差值

            getTime

            console.log(d.getTime());

            console.log(d.valueOf());

            console.log(Date.now());

            console.log(+new Date());

        补充:setInterval(function(){},1000) 定时器

            setInterval(function(){

                var d = new Date(); // 返回当前时间

                console.log(d.getSeconds());

            },1000)

 6.数字对象

console.log(Math);

        // 属性

        console.log(Math.PI);

        // 方法

        console.log(Math.abs(-100));

        // 向上取整

        console.log(Math.ceil(1.258));

        // 向下取整

        console.log(Math.floor(1.858));

        console.log(Math.round(1.152));

        console.log(Math.min(12,45,78,9,54,32));

        console.log(Math.max(12,45,78,9,54,32));

        console.log(Math.pow(2,3));

        console.log(Math.sqrt(9));

        // 随机数   

     // console.log(Math.random());

        // console.log(Math.floor(Math.random()*10));

        // console.log(Math.floor(Math.random()*10));

        // Math.floor(Math.random()*(max-min+1))+min

        console.log(Math.floor(Math.random()*(10-5+1)+5));

        // 1-23  var arr = [];

        var arr = [];

        while(arr.length < 5){

            var rand = Math.floor(Math.random()*(23-1+1)+1);

            if(arr.indexOf(rand) == -1){

                arr.push(rand);

            }

        }

        console.log(arr);

11月10号

1）事件

        1. 添加事件

       

 js获取元素

            btn.事件名称 = function(){

               

            }

            var btn = document.querySelector('button');

            btn.onclick = function(){

                console.log('123');

            }

        2. 元素.事件名称 = 函数名称

       function show(msg){

            console.log(msg);

        }

        var btn = document.querySelector('button');

        // btn.onclick = show;

        btn.onclick = function(){

            show('123');

        };

        3. 在html中触发

        onclick = "代码段 / 函数调用"

        */

        var btn = document.querySelector('button');

        function show(msg){

            console.log(msg);

            btn.style.backgroundColor = msg;

        }

2）鼠标事件

var btn = document.querySelector('div');

    var span = document.querySelector('span');

    单击事件

    // btn.onclick = function(){

    //     btn.style.backgroundColor = 'red';

    // }

    双击

    btn.ondblclick = function(){

        btn.style.backgroundColor = 'green';

    }

    var i = 1;

     鼠标悬浮

    // btn.onmouseover = function(){

    //     btn.style.backgroundColor = 'pink';

    //     console.log(++i);

    // }

     鼠标离开

    // btn.onmouseout = function(){

    //     btn.style.backgroundColor = 'blue';

    // }

    鼠标移动

    // btn.onmousemove = function(){

    //     btn.style.backgroundColor = randColor();

    // }

    鼠标被按下

    btn.onmousedown = function(){

        btn.style.backgroundColor = 'orange';

    }

    鼠标被弹起

    btn.onmouseup = function(){

        btn.style.backgroundColor = 'yellow';

    }

    右键被触发

    btn.oncontextmenu = function(){

        console.log(123);

        // 阻止默认事件

        return false;

    }

    btn.onmousewheel = function(){

        console.log(123123);

    }

    btn.onmouseenter = function(){

        btn.style.backgroundColor = 'blue';

        console.log(++i);

    }

    btn.onmouseleave = function(){

        btn.style.backgroundColor = 'pink';

    }

3）键盘事件

1. onkeydown键盘按下

        var box = document.querySelector('.box');

        var left = 0;

        var tops = 0;

        document.onkeydown = function(){

2. 获取键盘码

             console.log(event.keyCode);

            switch(event.keyCode){

                case 65:

                    left -= 10;

                    break;

                case 87:

                    tops -= 10;

                    break;

                case 68:

                    left += 10;

                    break;

                case 83:

                    tops += 10;

                    break;

            }

            box.style.top = `${tops}px`;

            box.style.left = `${left}px`;

        }