window
一、弹框
1.alert 警告框
alert(“提示!”);
2.prompt 带输入框的提示框 点击确定 该方法的返回值是输入的值或者默认值
var x=prompt(“请输入您的价格:”,1);//返回值是字符串类型
3.confirm 提示信息框 返回时true false
confirm(“确定删除?”);
二、网页打开关闭方法
open() 打开指定的网页
close() 关闭当前网页
getComputedStyle() 获取非行内样式 方法
getSelection() 获取用户网页选择的内容
三、window 相关尺寸问题
网页可视区域的宽和高:innerWidth innerHeight
屏幕尺寸: screen
不包含任务栏的高和宽:availHeight availWidth
实际的宽和高:height width
1.宽和高的其它获取方式
下面两个获取的也是可视区域的值(documentElement(dom元素))
console.log(document.documentElement.clientHeight);
console.log(document.documentElement.clientWidth);
2.获取实际的宽和高使用offset
console.log(document.body.offsetHeight);
console.log(document.body.offsetWidth);
3.获取不包含边框的宽和高 使用clientheight clientwidth
console.log(document.body.clientHeight);
console.log(document.body.clientWidth);
4.获取当前设备的相关信息,包含有关浏览器的信息(navigator )
console.log(navigator);
四、window对象中的计时器
1.一次性计时器 setTimeout 延迟多长时间去执行 返回值是数字
1.var time=setTimeout(function (){
console.log(1);
},1000);
console.log(time);
2.setTimeout(showData,1000);
function showData(){
console.log(1);
}
3.setTimeout("showData()", 1000);
function showData(){
console.log(1);
}
4.计时器里面的this指针
setTimeout(function () {
console.log(this);//window
}, 1000);
5.给计时器传值
计时器调用方法需要传递实参 在计时器的后边直接写值
setTimeout(function (data){
console.log(data);
},1000,10);
5.setTimeout 做成循环计时器,使用的是函数递归来实现()
var count = 0;
var time;
loadtime();
function loadtime() {
count++;
console.log(count);
if (count > 10) {
return;//递归在这里满足条件 直接跳出 也可以终止计时器
clearTimeout(time);//关闭计时器
}
time = setTimeout(loadtime, 1000);
console.log("time:" + time);
}
2.循环计时器
循环计时器setInterval 和 setTimeout 使用方式一致
var count=0;
var time=setInterval(function (){
count++;
console.log(count);
if(count>5){
clearInterval(time);}
},1000);
3.帧计时器 (按照电脑屏幕的刷新频率执行)
requestAnimationFrame
var requestAnimation = requestAnimationFrame || webkitRequestAnimationFrame || mozRequestAnimationFrame || msRequestAnimationFrame
|| function (callback) {
setTimeout(callback, 1000 / 60);
}
var cancelAnimation = cancelAnimationFrame || webkitCancelAnimationFrame || mozCancelAnimationFrame ||msCancelRequestAnimationFrame
|| function (number) {
clearTimeout(number);
}
var count = 0;
var time;
loop();
function loop() {
count++;
console.log(count);
if (count > 30) {
cancelAnimation(time);//关闭计时器
return;
}
time = requestAnimation(loop);//获取计时器
}
五、window解码转码方法
1.字符串的btoa 转码、atob解码
var str=“abc123”;
var s=window.btoa(str);//转码
console.log(window.atob(s));//解码
2.对汉字的解码转码
console.log(window.unescape(“张三”)); //解码
console.log(window.escape(“张三”));//转码
3.汉字转base64 位转码解码
var s=“李四”;
var b64=btoa(encodeURIComponent(s));//把汉字转成64位
console.log(decodeURIComponent(atob(b64)));//64位解码然后转成汉字
六、window事件
加载完成事件 window.οnlοad=function (){ }
浏览器窗口放生变化事件 window.οnresize=function (){ }
关闭事件 window.onclose=function (){ }
加载失败事件 window.οnerrοr=function (){ }
滚动条事件 window.onsroll=function (){ }
鼠标滚轮事件 window.onmouewheel=function (){ }
history
- hoistory 历史对象
console.log(history.back());//倒退
history.forward();//前进 - go方法里面 数字代表几个路径(有访问记录才能使用)
history.go(1);//前进一步
history.go(-1);//倒退一步
地址栏对象
console.log(location);
console.log(location.host);//localhost:63342
console.log(location.hostname);//localhost
console.log(location.pathname);///web/0523/3.location.html
console.log(location.href);//http://localhost:63342/web/0523/3.location.html
console.log(location.origin);//http://localhost:63342
console.log(location.port);//63342
console.log(location.protocol);//http:
2.重新加载location
setTimeout(function (){
location.reload();
},2000);
3.替换location路径
location.replace("./3.html");