window对象的方法，window弹窗、定时器、窗口、滚动的设置使用

window对象的方法还是很常用的，window对象的方法都是可以直接调取的，不用写window对象。

• 弹窗

alert(message)方法：显示带有一条指定消息和一个 “确认” 按钮的警告框。比如：

alert('刘小妞');

confirm(message)方法：显示一个带有指定消息和“确定”及“取消”按钮的确认框。
如果点击"确定"，此方法返回true，否则返回false。比如：

<button onclick="test()">删除</button>
<p id="demo"></p>
<script>
function test(){
  var x;
  var r=confirm("确定删除吗？");
  if (r==true){
    x="已删除";
  }
  else{
    x="已取消";
  }
  document.getElementById("demo").innerHTML=x;
}
</script>

prompt(msg,defaultText)方法：显示提示用户进行输入的对话框。返回用户输入的字符串。比如：

<button onclick="test()">点我输入</button>
<p id="demo"></p>
<script>
function test(){
  var x;
  var person=prompt("请输入你的名字","比如,刘小妞");
  if (person!=null && person!=""){
      x="你好 " + person;
      document.getElementById("demo").innerHTML=x;
  }
}
</script>

• 定时器

setTimeout(code/function,milliseconds,param1,param2,……)方法：在指定的毫秒数后调用函数或计算表达式。返回一个ID，这个ID是数字。

参数：
code/function：调用的代码或者函数
milliseconds：可选。执行或调用 code/function 需要等待的时间，以毫秒计。默认为 0。
param1,param2,……：可选。传给执行函数的其他参数。比如：

setTimeout("alert('111')",3000);

setTimeout(function(){ alert("Hello"); }, 3000);

setTimeout(test,3000,123);

function test(a) {
  alert(a);
}

clearTimeout(id_of_settimeout) 方法：取消由 setTimeout() 方法设置的定时操作。比如：

<button onclick="startCount()">开始计数!</button>
<input type="text" id="txt">
<button onclick="stopCount()">停止计数!</button>

<script>
var c = 0;
var t;
var timer_is_on = 0;

function timedCount() {
    document.getElementById("txt").value = c;
    c = c + 1;
    t = setTimeout(function(){ timedCount() }, 1000);
}

function startCount() {
    if (!timer_is_on) {
        timer_is_on = 1;
        timedCount();
    }
}

function stopCount() {
    clearTimeout(t);
    timer_is_on = 0;
}
</script>

setInterval(code/function,milliseconds,param1,param2,……)方法：按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval和setTimeout的区别：setTimeout只执行一次，setInterval会一直执行，直到窗口关闭或者clearInterval()方法被调用。

clearInterval()和clearTimeout()方法类似，是用来停止setInterval()的。clearInterval的参数是setInterval方法返回的id。

上面的计时器，也可以用setInterval来实现，代码如下：

<button onclick="startCount()">开始计数!</button>
<input type="text" id="txt">
<button onclick="stopCount()">停止计数!</button>

<script>
var c = 0;
var t;
var timer_is_on = 0;

function timedCount() {
    document.getElementById("txt").value = c;
    c = c + 1;    
}

function startCount() {
    if (!timer_is_on) {
        timer_is_on = 1;
        t = setInterval(function(){ timedCount() }, 1000);
    }
}

function stopCount() {
    clearInterval(t);
    timer_is_on = 0;
}
</script>

• 窗口

open(url,name,specs,replace)方法：打开一个新的浏览器窗口或查找一个已命名的窗口。返回值是一个窗口。

参数都是可选的。

url：打开的窗口地址，默认是一个空白窗口。
name：指定target属性或窗口的名称。支持以下值：

_blank - URL加载到一个新的窗口。默认值；

_parent - URL加载到父框架；

_self - URL替换当前页面；

_top - URL替换任何可加载的框架集；

name - 窗口名称。

specs：一个逗号分隔的项目列表。支持以下值：

channelmode=yes|no|1|0：是否要在影院模式显示 window。默认是没有的。仅限IE浏览器

directories=yes|no|1|0：是否添加目录按钮。默认是肯定的。仅限IE浏览器

fullscreen=yes|no|1|0：浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window，还必须在影院模式。仅限IE浏览器

height=pixels：窗口的高度。最小.值为100

left=pixels：该窗口的左侧位置

location=yes|no|1|0：是否显示地址字段.默认值是yes

menubar=yes|no|1|0：是否显示菜单栏.默认值是yes

resizable=yes|no|1|0：是否可调整窗口大小.默认值是yes

scrollbars=yes|no|1|0：是否显示滚动条.默认值是yes

status=yes|no|1|0：是否要添加一个状态栏.默认值是yes

titlebar=yes|no|1|0：是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes

toolbar=yes|no|1|0：是否显示浏览器工具栏.默认值是yes

top=pixels：窗口顶部的位置.仅限IE浏览器
width=pixels：窗口的宽度.最小.值为100

replace：装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。

true - URL 替换浏览历史中的当前条目。

false - URL 在浏览历史中创建新的条目。

写个例子：

window.open("a.html","_self");
window.open("http://www.baidu.com","","width=200,height=200");

close()方法：关闭浏览器窗口。用法如下：

<input type="button" value="打开我的窗口" onclick="openWin()" />
<input type="button" value="关闭我的窗口" onclick="closeWin()" />

<script>
var myWindow;

function openWin(){
  myWindow=window.open("","","width=200,height=100");
}
function closeWin(){
  myWindow.close();
}
</script>

stop()方法：停止页面载入。用法如下：

window.stop();

相当于浏览器上点击停止载入按钮。

focus()方法：把键盘焦点给予一个窗口。用法如下：

var myWindow=window.open("","","width=200,height=100");
myWindow.focus();

blur()方法：把键盘焦点从顶层窗口移开。用法如下：

myWindow=window.open("","","width=200,height=100");
myWindow.blur();

moveBy(x,y)方法：相对窗口的当前坐标把它移动指定的像素。用法如下:

<input type="button" value="打开我的窗口" onclick="openWin()" />
<input type="button" value="移动我的窗口" onclick="moveWin()" />

<script>
function openWin(){
  myWindow=window.open('','','width=200,height=100,left=100,top=100');

}
function moveWin(){
  myWindow.moveBy(200,200);
  myWindow.focus();
}
</script>

moveTo(x,y)方法：把窗口的左上角移动到一个指定的坐标，坐标相对于屏幕，opera里相对的是浏览器。

resizeTo(width,height)方法：把窗口大小调整为指定的宽度和高度。用法如下：

<button onclick="openwindow()">创建窗口</button>
<button onclick="myFunction()">调整窗口</button>

<script>
var w;
function openwindow(){
  w=window.open('','', 'width=100,height=100');
  w.focus();
}
function myFunction(){
  w.resizeTo(500,500);
  w.focus();
}
</script>

从 Firefox 7 开始，不能改变浏览器窗口的大小了，要依据下面的规则：

不能设置不是通过 window.open 创建的窗口或 Tab 的大小。
当一个窗口里面含有一个以上的 Tab 时，无法设置窗口的大小。

resizeBy(width,height)方法：根据指定的像素来调整窗口的大小。

width：必需，增加的宽度，可以是正、负数。
height：可选，增加的高度，可以是正、负数。

Opera和Chrome不支持。

指定窗口的右下角角落移动的像素，左上角将不会被移动(它停留在其原来的坐标)。

print()方法：打印当前窗口的内容。用法如下：

window.print();

• 滚动

scrollTo(xpos,ypos)方法：把内容滚动到指定的坐标。

xpos：窗口文档显示区左上角显示的文档的 x 坐标。
ypos：窗口文档显示区左上角显示的文档的 y 坐标。

用法如下：

window.scrollTo(100,500);

scrollBy(xnum,ynum)方法：把内容滚动指定的像素数。

xnum：文档向右滚动的像素数。
ynum：文档向下滚动的像素数。

用法如下：

window.scrollBy(50,50);

scrollTo和scrollBy方法的前提是有滚动条。

scrollTo定位的是坐标，scrollBy是滚动的像素数。

• 样式

matchMedia(mediaQueryString)方法：返回一个新的MediaQueryList对象，表示指定的媒体查询字符串解析后的结果。

mediaQueryString：媒体查询字符串，比如：min-height、min-width、max-height、max-width等等。

返回来的MediaQueryList对象有两个属性：

media：查询语句的内容。
matches：检测查询结果，如果文档匹配 media query 列表，值为 true，否则为 false。

有两个监听事件：

addListener(functionref)：添加一个新的监听器函数，该函数在媒体查询的结果发生变化时执行。

removeListener(functionref)：从媒体查询列表中删除之前添加的监听器。 如果指定的监听器不在列表中，则不执行任何操作。

写个例子：

function test(x) {
    if (x.matches) { // 媒体查询
      alert("大屏");  
    } else {
      alert("小屏");        
    }
}
 
var x = window.matchMedia("(min-width: 700px)")
test(x) // 执行时调用的监听函数
x.addListener(test) // 状态改变时添加监听器

getComputedStyle(element,pseudoElement)方法：获取指定元素的CSS 样式。获取的样式是元素在浏览器中最终渲染效果的样式。返回值是CSSStyleDeclaration对象。

element：必需，要获取样式的元素。
pseudoElement：可选，伪类元素，当不查询伪类元素的时候可以忽略或者传入 null。

写个例子：

<div onclick="test()" id="test" style="height: 50px;width:100px;background-color: red;">点我</div>
<p>背景色: <span id="demo"></span></p>

<script>
function test(){
    var elem = document.getElementById("test");
    var theCSSprop = window.getComputedStyle(elem, null).getPropertyValue("background-color");
    document.getElementById("demo").innerHTML = theCSSprop;
}
</script>

• 编码解码

btoa(str)方法：创建一个 base-64 编码的字符串。返回一个base64编码字符串。
参数str只能是"A-Z", “a-z”, “0-9”, “+”, “/” 和 “=” 字符。用法如下：

window.btoa('test');

atob(encodedStr)方法：解码使用 base-64 编码的字符串。

参数encodedStr是一个通过 btoa() 方法编码的字符串。用法如下：

var str = "test";
var enc = window.btoa(str); //编码
var dec = window.atob(enc); //解码

今天写的内容很多，需要慢慢消化，也希望能对大家有帮助，如果想看更多，更系统的前端知识，可以搜微信公众号：“刘小妞的栖息地”或者识别图片的二维码查看，感谢大家的支持与关注。