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 实例化完为本地时间
注意月份加一的情况
- var time=new Date(2019,8,13,13,42); //Fri Sep 13 2019 13:42:00 GMT+0800 (中国标准时间)
//sep为9月,但现在实际上是8月- time.setMonth(0) //月 设置的月获取的时候,获取的时候,会出现月份加1的现象
- 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>