欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

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

程序员文章站 2022-06-01 16:06:45
...

1、JavaScript的三个组成部分

  • ECMAscript（核心）：ECMAScript 仅仅是一个描述，定义了脚本语言的所有属性、方法和对象
  • BOM（浏览器对象模型）： BOM 主要处理浏览器窗口和框架
  • DOM（文档对象模型）：HTML 和 XML 的应用程序接口（API）。DOM 将把整个页面规划成由节点层级构成的文档

js的对象关系图

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

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


发现：

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


2、window的方法

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




相关标签： js 前端

上一篇： 2018-06-10 JS 里的数据类型转换

下一篇： vue新增属性问题

推荐阅读