JS9---js内置对象---三大计时器

js内置对象

window(顶级对象) history location document

内置对象

Date Math String Array

一. window

1.①window.alert();

②window.confirm(); 带确认取消的提示框

③window.prompt(); 带输入框的提示框

2.js中的全局变量，也在window中（可以通过window. 出来）

var name="zhangsan";
console.log(window.name);  //zhangsan

3.js中存在大量的on…事件

4.js中的三大计时器

4.1. setInterval 循环计时器，延迟多久去反复执行

①写法
第一种直接写

setInterval(function(){
    console.log(1);
},1000);

第二种方法，将函数提出去单独写，这样方便函数调用

 function show(){
            console.log(1);
        }
        setInterval("show()",1000);

②清除计时器
clearInterval(time); 用变量去接收计时器，清除这个变量
计时器的返回值为数字

count=0;
var time=setInterval(function(){
    count++;
    console.log(count);
    if(count>10){
        console.log(time);   //1
        clearInterval(time);
    }
},1000);

4.2. setTimeout 一次性计时器

也可以通过函数的递归改装成循环计时器

①写法
只输出一个1（只执行一次）

  var timer=setTimeout(function(){
        console.log(1);
    },1000);

②异步现象（面试例题）
①js为单线程，settimeout会占线程（一个运行完，才可以去运行下一个）
②运行顺序是：先将for循环执行完，再去执行settimeout（for运行完i的值为10）
③将settimeout换为setinterval 也会出现异步现象，setinterval也在占线程
④若将var改为let 则输出为正常。let声明了局部变量，限制了作用域

  for(var i=0;i<10;i++){
        console.log(i);      //0 1 2 3 4 5 6 7 8 9 
        setTimeout(function(){
           console.log(i);   //输出10个 10
       },1000)
    }

③将settimeout改装为循环计时器（函数的递归）
一定要注意return；跳出
关闭了计时器后，下边的代码又会重新开启计时器，函数的递归使用时，一定要记得return跳出

var count=0;
loop();
function loop(){
    count++;
    if(count>10){
        clearTimeout(timer);
        return;
    }
    console.log(count);
    var timer=setTimeout(loop(),1000);

4.2. requestAnimationFrame 在浏览器放小切换选项卡的时候，会暂停

settimeout setinterval 在浏览器变化时不会暂停

①根据电脑的频率（fps）1000/16 每16ms自动刷新一次（不需要写时间）

  	loop();
    function loop(){
        console.log(1);
        window.requestAnimationFrame(loop)
    }

②清除 没有request

window.cancelAnimationFrame( ) 
clearTimeout( );

二.location 当前页面地址的相关信息

代码跳转路径 location.href

location.href="http://www.baibu.com";

三.history 当前页面的历史记录

不在script标签中写

back() forward() go()

    <a href="javascript:history.back()">倒退</a>
    <a href="javascript:history.forward()">前进</a>
    <a href="javascript:history.go(1)">前进一个页面</a>
    <a href="javascript:history.go(-1)">倒退一个页面</a>

四.Math 对象

不需要实例化 直接使用（主要记方法）

语句	作用
Math.abs(-1)	绝对值
Math.PI	π
Math.floor(0.9) 0	向下取整
Math.ceil(0.9) 1	向上取整
Math.round(4.4)	四舍五入
Math.max(1, 2）	判断最大值的
Math.min(1, 2)	取最小值
Math.random()	随机数 0-1 取小不取大 （验证码）
Math.sqrt(4)	开平方
Math.pow(8, 1 / 3)	求幂的

五.Date对象

Date 内置对象 时间对象

new 实例化完为本地时间

注意月份加一的情况

1. var time=new Date(2019,8,13,13,42); //Fri Sep 13 2019 13:42:00 GMT+0800 (中国标准时间)
   //sep为9月，但现在实际上是8月
2. time.setMonth(0) //月 设置的月获取的时候，获取的时候，会出现月份加1的现象
3. getMonth 获取的月 比正常月多1

一. set** get*** 方法

1.设置时间

var time=new Date();
console.log(time);     //Wed Aug 14 2019 17:30:37 GMT+0800 (中国标准时间)

直接设置

    var time=new Date("2019 8-13 13:42");  //Tue Aug 13 2019 13:42:00 GMT+0800 (中国标准时间)
    console.log(time);
    //2019,8,13,13,42   方式的赋值   月份上面有+1情况
    var time=new Date(2019,8,13,13,42);   //Fri Sep 13 2019 13:42:00 GMT+0800 (中国标准时间)
    //sep为9月，但现在实际上是8月
    console.log(time);

2.set方法设置时间

    var time=new Date();
    
    time.setDate(20)         //日
    time.setFullYear(2020)   //设置年
    time.setHours(0)         //小时
    time.setMilliseconds(0)  //毫秒
    time.setMinutes(0)       //分
    time.setMonth(0)         //月  设置的月获取的时候，获取的时候，会出现月份加1的现象
    time.setSeconds(0)       //秒
    time.setTime()           //设置当前时间到1970年0点的总毫秒数
    time.setYear()           //设置  119   1900---  119   2019

3.get方法获取时间

和set一致的get方法获取时间

①getMonth 获取的月 比正常月多1
②设置没有setDay，但获取有getDay 为获取周
③getTime 当前时间的总毫秒数

4.to方法

主要的是 toLocaleString

    var time =new Date();
    console.log(time.toDateString());        // Wed Aug 14 2019(前部分)
    console.log(time.toISOString());         // 2019-08-14T09:55:04.237Z（后部分）
    
    console.log(time.toLocaleDateString());  // 2019/8/14（前部分）
    console.log(time.toLocaleString());      // 2019/8/14 下午5:55:04
    console.log(time.toLocaleTimeString());  // 下午5:55:04（后部分）
    
    console.log(time.toTimeString());        // 17:55:04 GMT+0800 (中国标准时间)
    console.log(time.toUTCString());         // Wed, 14 Aug 2019 09:55:04 GMT

六.自定义对象

写法：①var stu=new Object(); ②var students={ }

stu[‘getxifu’]=“已婚”;

stu.age=18;

<script>
   // new  实例化对象      
    var stu=new Object();    //标准写法 
    stu.name="毛豆";
    stu.sex="男";
    stu.age=18;
    stu.job="tea";
    stu.eat=function (){  
        //this 指代当前的对象
        return this.name+"啥都吃！";
    }
    stu['getxifu']="已婚";
    console.log(stu);
    // Objectage: 18eat: ()
    getxifu: "已婚"
    job: "tea"
    name: "毛豆"
    sex: "男"
    __proto__: Object
    
    console.log(stu.name);     //毛豆
    console.log(stu.eat());    //毛豆啥都吃！
    //通过键直接取值
    console.log(stu["name"]);  //毛豆



   //白话写法     直接对象{}
    var students={             
        name:"毛豆",
        sex:"男",
        eat:function (){
            return this.name+"啥都吃！";
        }
    };
    students['sleep']=function (){
        return this.name+"每天都睡！";
    }
    console.log(students.name);     //毛豆
    console.log(students['sex']);   //男
    console.log(students);          //object
    console.log(students.sleep());  //毛豆每天都睡！

</script>

七.Json