Maison > interface Web > js tutoriel > Introduction au mode navigateur BOM et à l'objet fenêtre

Introduction au mode navigateur BOM et à l'objet fenêtre

一个新手
Libérer: 2017-10-11 09:43:53
original
1361 Les gens l'ont consulté

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>
BOM浏览器模式和window对象学习
</title>
  <!--
   BOM浏览器模式(Browser Object Mode)这是一种理想的模式,如果每个浏览器开发商都按照这种方式来开发,
   就会提高开发效率,使互联网朝着健康的方向发展。
  具体的实现是window对象
  
 
1.框体方法
:alert();警告,无返回值
     confirm();确认,有返回值,确定返回true,取消返回false
     prompt();提示,有返回值,确定返回当前输入的值,取消返回null
   
2.定时执行和间隔执行
:
    setTimeOut(code expresion,time),指定时间后开辟线程执行指定的函数,返回线程id
    setInterval(code expresion,time),指定时间后开辟线程执行指定的函数,返回id
    ClearInterval(id),关闭指定的interval开启的线程
    ClearTimeOut(id),关闭指定的Timeout开启的线程
  
 3.子页面
    open()使用此方法可以打开当前页面的子页面,使用以下属性可以设置子页面窗口的大小和其他属性
    //height width top left 
    //toolbar=yes; menubar=yes;scrollbars=no;resizable=no;location=no;status=no; 
    
    close(),在open()打开的子页面中调用此方法
    
   
 重要属性
    opener
,使用opener可以调用父页面的函数 window.opener.函数名();
  -->
  <script type="text/javascript">
  //window方法举例
   //1.警告框
   function testAlert(){
    window.alert("我是警告框");
   }
   //2.确认框
   function testConfirm(){
    var flag=window.confirm("你要卸载我吗?");
    window.alert(flag);
   }
   //3.提示框
   function testPrompt(){
    var str=window.prompt("请输入昵称:","例如:李白");
    window.alert(str);
   }
   /*--------------------------------------------------------------------------*/
   //定时执行
   var tid;
   function testSetTimeOut(){
    tid=window.setTimeout(function(){
     alert("定时执行");
    },3000);
   }
   //间隔执行
   var id;
   function testInterval(){
    id=window.setInterval(function(){
     alert("间隔执行");
    },2000);
   }
   //关闭间隔执行
   function testClearInterval(){
    window.clearInterval(id);
   }
   //关闭定时执行
   function testClearTimeOut(){
    window.clearTimeout(tid);
   }
/*----------------------------------------------------------------------------------------*/
   function testOpen1(){
    window.open("http://www.baidu.com");//使用open打开网络资源
    
   }
   function testOpen2(){
    window.open("sun.html");//使用open打开本地资源
    
   }
   //属性
   function testOpener(){
    alert("我是Opener");
   }
  </script>
 </head>
 <body>
  <input type="button" id="" value="测试windowAlert" onclick="testAlert();"/>
  <input type="button" id="" value="测试Confirm" onclick="testConfirm();"/>
  <input type="button" id="" value="测试prompt" onclick="testPrompt();" />
  <hr />
  <input type="button" id="" value="测试setTimeOut" onclick="testSetTimeOut();"/>
  <input type="button" id="" value="测试interval" onclick="testInterval();"/>
  <input type="button" id="" value="测试关闭clearInterval" onclick="testClearInterval();"/>
  <input type="button" id="" value="测试关闭TimeOut" onclick="testClearTimeOut();"/>
  <hr />
  <input type="button" id="" value="测试子页面" onclick="testOpen1();"/>
  <input type="button" id="" value="测试打开本地资源" onclick="testOpen2();"/>
 </body>
</html>
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal