js学习笔记3：window的方法，定时器，图片切换

1、JavaScript的三个组成部分

ECMAscript（核心）：ECMAScript 仅仅是一个描述，定义了脚本语言的所有属性、方法和对象

BOM（浏览器对象模型）： BOM 主要处理浏览器窗口和框架

DOM（文档对象模型）：HTML 和 XML 的应用程序接口（API）。DOM 将把整个页面规划成由节点层级构成的文档

js的对象关系图

发现：

window对象最高级，表示浏览器打开的窗口
bom网页一打开就存在
dom：去操作的代码
document连接bom和dom; document有下级，其他没有下级（窗口）；

2、window的方法

window的3个弹出框

alert() 弹出一个警告窗口
prompt() 弹出一个让用户输入的窗口，加入提示性语句，也可以加入默认值。如果用户不填信息，得到空字符串。点取消得到null
```
<script type="text/javascript">
var m= window.prompt("请输入"，"默认值");//输入的数据传给m
</script>
```
confirm():弹出一个确认窗口，确认对应true，取消对应false

练习

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title> 开关练习</title>
<style type="text/css">
</style>
<script type="text/javascript">
 var n=window.confirm("晚饭你吃了没");
 if(n==true){
   var m=window.prompt("吃的啥");
   if(m=="黄焖鸡米饭"){
   alert("哦");
   }
   else{
   alert("不吃算了");
   }
 }else{
 
 alert("一起去吃吧");
 }
 
</script>
</head>
<body >
 
</body>
</html>

window.open 打开一个窗口

window.open("链接","name","设置");

width：设置宽度，height：设置高度 left top 设置坐标 scrollbar：滚动条 toolbar：工具栏 location：地址栏：about：config——>location-->dom.disable..-->false

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title> 开关练习</title>
<style type="text/css">
</style>
<script type="text/javascript">
window.onload=init;
function init(){
window.open("http://www.baidu.com","abcd","width=800,height=600,left=100,top=200,scrollbar=yes,toolbar=yes");
}
</script>
</head>
<body >
 abcd
</body>
</html>

window.close 关闭窗口

window.close();注：脚本只能关闭脚本打开的窗口默认不能关闭，要在浏览器about:config里设置

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title> 开关练习</title>
<style type="text/css">
</style>
<script type="text/javascript">
window.onload=init;
function init(){
window.open("http://www.baidu.com","abcd","width=800,height=600,left=100,top=200,scrollbar=yes,toolbar=yes");
}

function fn(){

window.close();
}
</script>
</head>
<body >
 abcd
 <input type="button" value="关闭窗口" onclick="fn()"/>
</body>
</html>

3.定时器

创建定时器

一次性定时器：window.setTimeout("js代码"，时间t); 在时间t之后执行代码，只执行一次。时间单位毫秒

反复性定时器：window.setInterval("js代码",时间t); 每隔时间t就执行一次代码。时间单位毫秒

清除定时器

window.clearTimeout(); 清除一次性定时器

window.clearInterval();清除反复性定时器

注：要想清楚定时器，必须给定时器名字

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title> 开关练习</title>
<style type="text/css">
</style>
<script type="text/javascript">
var timeout=window.setInterval("fn()",3000);
//var timeout=window.setTimeout("alert()",5000);
function  fn(){
alert(111);
}
function fun(){
window.clearTimeout(timeout);
}
function fun2(){
window.clearInterval(timeout);
}
</script>
</head>
<body >
<input type="button" value="清除一次性定时器" onclick="fun()"/>
<input type="button" value="清除反复性定时器" onclick="fun2()"/>
</body>
</html>

练习：网页版时钟

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title> 开关练习</title>
<style type="text/css">
div{
border:10px solid blue ;
font-size:60px;
background:yellow;
height:100px;
text-align:center;

}

</style>
<script type="text/javascript">
  window.onload=init;
  function init(){
  fn();
    window.setInterval("fn()",1000); 
  }
  function fn(){
     var d=new Date();
	 var obj=document.getElementById("d1");
     obj.innerHTML=d.toLocaleString();
  
  }
</script>
</head>
<body >
<div id="d1">
时间
</div>
</body>
</html>

4 图片切换案例

1.用到反复性定时器，2.页面加载完成后才会切换图片，onload事件。3.鼠标放上，图片停止，离开，图片恢复。4鼠标放在列表，切到对应图片，背景色改变，鼠标离开恢复

先做图片自动切换1，2步

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title> 开关练习</title>
<style type="text/css">


</style>
<script type="text/javascript">
  window.onload=init;
   function init(){
   var timeour=window.setInterval("fimage()",2000);
   }
   var i=1;
   function fimage(){
   
   i++;
   if(i>6){i=1;}
   var obj=document.getElementById("d1");
   obj.src="images/"+i+".jpg";
   
   }
</script>
</head>
<body >
<image id="d1" src="images/1.jpg"/>
</body>
</html>

第3步；鼠标放到图片上就停止，移开则恢复

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title> 开关练习</title>
<style type="text/css">


</style>
<script type="text/javascript">
  window.onload=init;
  var timeout;
   
function init(){
    timeout=window.setInterval("fimage()",2000);
   }
   var i=1;
   function fimage(){
   
   i++;
   if(i>6){i=1;}
   var obj=document.getElementById("d1");
   obj.src="images/"+i+".jpg";
   }
   
   function stopimage(){
   
   window.clearInterval(timeout);
   
   }
   
   function startimage(){
      //init();
	  timeout=window.setInterval("fimage()",2000);
   }
</script>
</head>
<body >
<image id="d1" src="images/1.jpg" onmouseover="stopimage()" onmouseout="startimage()"/>
</body>
</html>

第4步：鼠标放到按钮上，图片就停在对应的图片上

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title> 开关练习</title>
<style type="text/css">
<!--设置样式-->
 div{
 border:solid 1px red;
 width:700px;
 height:450px;
 }
div ul{
float:right;
}
ul li{
 list-style:none;
 border:1px solid red;
 width:50px;
 height:60px;
 margin-top:2px;
 margin-right:8px;
 text-align:center;
 line-height:55px;
 }
</style>
<script type="text/javascript">
  window.onload=init;
  var timeout;
   function init(){
    timeout=window.setInterval("fimage()",2000);
   }
   var i=1;
   function fimage(){
   
   i++;
   if(i>6){i=1;}
   var obj=document.getElementById("d1");
   obj.src="images/"+i+".jpg";
   } 
   function stopimage(){ 
   window.clearInterval(timeout); 
   }
   
   function startimage(){
      //init();
	  timeout=window.setInterval("fimage()",2000);
   }  
   function pimage(obj2){
  //获取图片标签对象
  var obj1=document.getElementById("d1");
  var number=obj2.innerHTML;
  obj1.src="images/"+number+".jpg";
   //还要停止定时器
   window.clearInterval(timeout);
   }
</script>
</head>
<body >
<div>
<image id="d1" src="images/1.jpg" onmouseover="stopimage()" onmouseout="startimage()"/>
<ul>
  <li id="li1" onmouseover="pimage(this)" onmouseout="">1</li>
  <li id="li2" onmouseover="pimage(this)" onmouseout="">2</li>
  <li id="li3" onmouseover="pimage(this)" onmouseout="">3</li>
  <li id="li4" onmouseover="pimage(this)" onmouseout="">4</li>
  <li id="li5" onmouseover="pimage(this)" onmouseout="">5</li>
  <li id="li6" onmouseover="pimage(this)" onmouseout="">6</li>
</ul>
</div>
</body>
</html>

也可以这样写：

<ul>
  <li id="li1" onmouseover="pimage(1)" onmouseout="">1</li>
  <li id="li2" onmouseover="pimage(2)" onmouseout="">2</li>
  <li id="li3" onmouseover="pimage(3)" onmouseout="">3</li>
  <li id="li4" onmouseover="pimage(4)" onmouseout="">4</li>
  <li id="li5" onmouseover="pimage(5)" onmouseout="">5</li>
  <li id="li6" onmouseover="pimage(6)" onmouseout="">6</li>
</ul>

 function pimage(n){
  //获取图片标签对象
  var obj1=document.getElementById("d1");
  obj1.src="images/"+n+".jpg";
   //还要停止定时器
   window.clearInterval(timeout);
   }

第5步，鼠标离开，让图片恢复切换

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title> 开关练习</title>
<style type="text/css">
 div{
 border:solid 1px red;
 width:700px;
 height:450px;
 }
div ul{
float:right;
}
ul li{
 list-style:none;
 border:1px solid red;
 width:50px;
 height:60px;
 margin-top:2px;
 margin-right:8px;
 text-align:center;
 line-height:55px;
 }
</style>
<script type="text/javascript">
  window.onload=init;
  var timeout;
   function init(){
    timeout=window.setInterval("fimage()",2000);
   }
   var i=1;
   function fimage(){
   i++;
   if(i>6){i=1;}
   var obj=document.getElementById("d1");
   obj.src="images/"+i+".jpg";
   }  
   function stopimage(){  
   window.clearInterval(timeout);   
   }   
   function startimage(){
      //init();
	  timeout=window.setInterval("fimage()",2000);
   }   
   function pimage(n){
   i=n;
  //获取图片标签对象
  var obj1=document.getElementById("d1");
  
  obj1.src="images/"+n+".jpg";
   //还要停止定时器
   window.clearInterval(timeout);
   }
</script>
</head>
<body >
<div>
<image id="d1" src="images/1.jpg" onmouseover="stopimage()" onmouseout="startimage()"/>
<ul>
  <li id="li1" onmouseover="pimage(1)" onmouseout="startimage()">1</li>
  <li id="li2" onmouseover="pimage(2)" onmouseout="startimage()">2</li>
  <li id="li3" onmouseover="pimage(3)" onmouseout="startimage()">3</li>
  <li id="li4" onmouseover="pimage(4)" onmouseout="startimage()">4</li>
  <li id="li5" onmouseover="pimage(5)" onmouseout="startimage()">5</li>
  <li id="li6" onmouseover="pimage(6)" onmouseout="startimage()">6</li>
</ul>
</div>
</body>
</html>

6.鼠标放上时按钮背景色改变，离开背景色就恢复

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title> 开关练习</title>
<style type="text/css">
 div{border:solid 1px red; width:700px;height:450px; }
div ul{float:right;}
ul li{ list-style:none; border:1px solid red;width:50px; height:60px;margin-top:2px; margin-right:8px; text-align:center; line-height:55px; }
</style>
<script type="text/javascript">
  window.onload=init;
  var timeout;
   function init(){
    timeout=window.setInterval("fimage()",2000);
   }
   var i=1;
   function fimage(){
   i++;
   if(i>6){i=1;}
   var obj=document.getElementById("d1");
   obj.src="images/"+i+".jpg";
   }
   function stopimage(){   
   window.clearInterval(timeout); 
   } 
   function startimage(){
      //init();
	  timeout=window.setInterval("fimage()",2000);
   }
     
   function pimage(n,obj2){
   i=n;
  //获取图片标签对象
  var obj1=document.getElementById("d1");
  obj1.src="images/"+n+".jpg";
//把所有li标签的背景颜色设置成白色
 for(var j=1;j<=6;j++){
    var obj=document.getElementById("li"+j);
   obj.style.background="white";
  }
   //还要停止定时器
   window.clearInterval(timeout);
   obj2.style.background="orange";
   }
</script>
</head>
<body >
<div>
<image id="d1" src="images/1.jpg" onmouseover="stopimage()" onmouseout="startimage()"/>
<ul>
  <li id="li1" onmouseover="pimage(1,this)" onmouseout="startimage()">1</li>
  <li id="li2" onmouseover="pimage(2,this)" onmouseout="startimage()">2</li>
  <li id="li3" onmouseover="pimage(3,this)" onmouseout="startimage()">3</li>
  <li id="li4" onmouseover="pimage(4,this)" onmouseout="startimage()">4</li>
  <li id="li5" onmouseover="pimage(5,this)" onmouseout="startimage()">5</li>
  <li id="li6" onmouseover="pimage(6,this)" onmouseout="startimage()">6</li>
</ul>
</div>
</body>
</html>

7.图片切换时对应的按钮背景色改变

function init(){
    var obj=document.getElementById("li1");
	obj.style.background="orange";
    timeout=window.setInterval("fimage()",2000);
   }
   var i=1;
   function fimage(){  
	 i++;
   if(i>6){i=1;}
   var obj=document.getElementById("d1");
   obj.src="images/"+i+".jpg";
   //修改li标签的背景颜色
   for(var j=1;j<=6;j++){
    var obj=document.getElementById("li"+j);
   obj.style.background="white";
  }
   var obj2=document.getElementById("li"+i);
     obj2.style.background="orange";
	
   }