弹窗

window.alert( 1 ) 弹窗

window.confirm( “msg”) 包含确定和取消弹窗

功能：显示一个带有指定消息和包含确定和取消按钮的对话框。点击确定返回true,取消返回false;

  1. var value = window.confirm("去不去")
  2. console.log(value)  // true / false

window.prompt(“text”,”defaultText”) 输入型弹窗

  1. 参数说明
  2. text:在对话框中显示的文本
  3. defaultText:默认输入文本
  4. 返回值:点取消按钮,返回null
  5.            点确定按钮,返回输入的文本
  1. var temp = window.prompt("请输入","hello world")
  2. console.log(temp);

定时器

setTimeout 超时调用

特点：间歇一段时间，只会触发一次

  1. setTimeout(function(){
  2.   console.log("hello");
  3. },2000)
  1. //使用递归 让超时调用实现间歇调用
  2.         function show(){
  3.             setTimeout(function(){
  4.                 console.log(1);
  5.                 show();
  6.             },1000)
  7.         }
  8.         show()

setInterval 间歇调用

特点：每间隔一段时间就会触发

  1. setInterval(function(){
  2.   console.log("world");
  3. },2000)

清除定时器

  1. <button id="btn">停止定时器</button>
  2.     <script>
  3.         var btn = document.getElementById("btn")
  4.         var timer = setInterval(function(){
  5.             console.log(2);
  6.         },1000)
  7.         btn.onclick = function(){
  8.             clearInterval(timer)
  9.         }
  10.     </script>

location

Window Location 主机名

window.location.hostname 属性返回（当前页面的）因特网主机的名称。

  1. 显示主机的名称：
  2. document.getElementById("demo").innerHTML = "页面主机名是 " + window.location.hostname;
  3. 结果是：
  4. 页面主机名是 www.w3school.com.cn

Window Location 路径名

window.location.pathname 属性返回当前页面的路径名。

  1. 显示当前 URL 的路径名：
  2. document.getElementById("demo").innerHTML = "页面路径是 " + window.location.pathname;
  3. 结果是：
  4. 页面路径是 /js/js_window_location.asp

history

Window History Back

history.back() 方法加载历史列表中前一个 URL。这等同于在浏览器中点击后退按钮。

  1. <html>
  2. <head>
  3. <script>
  4. function goBack() {
  5.     window.history.back()
  6.  }
  7. </script>
  8. </head>
  9. <body>
  11. <input type="button" value="Back" onclick="goBack()">
  13. </body>
  14. </html>

Window Histore Forword

history forward() 方法加载历史列表中下一个 URL。这等同于在浏览器中点击前进按钮。

  1. <html>
  2. <head>
  3. <script>
  4. function goForward() {
  5.     window.history.forward()
  6.  }
  7. </script>
  8. </head>
  9. <body>
  11. <input type="button" value="Forward" onclick="goForward()">
  13. </body>
  14. </html>

screen

Window Screen 宽度、高度

screen.width 属性返回以像素计的访问者屏幕宽度。
screen.height 属性返回以像素计的访问者屏幕的高度。

  1. 显示以像素计的屏幕宽、高度：
  2. document.getElementById("demo").innerHTML = "Screen Width: " + screen.width;
  3. document.getElementById("demo").innerHTML = "Screen Height: " + screen.height;
  4. 结果将是：
  5. Screen Width: 1536
  6. Screen Height: 864

可用宽度、高度

screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去诸如窗口工具条之类的界面特征。
screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去诸如窗口工具条之类的界面特征。

  1. 显示以像素计的屏幕可用宽度：
  2. document.getElementById("demo").innerHTML = "Available Screen Width: " + screen.availWidth;
  3. 结果将是：
  4. Available Screen Width: 1536
  5. 显示以像素计的屏幕可用高度：
  6. document.getElementById("demo").innerHTML = "Available Screen Height: " + screen.availHeight;
  7. 结果将是：
  8. Available Screen Height: 864