九、BOM（一） -- BOM对象

最新推荐文章于 2024-09-25 20:00:36 发布
最新推荐文章于 2024-09-25 20:00:36 发布
阅读量213 收藏
点赞数
分类专栏： WEB基础-JS核心 文章标签： html5 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45602227/article/details/119090069
版权 
	DOM：文档对象模型
			通过JS来操作网页
			
	BOM：浏览器对象模型
			通过JS来操作浏览器的
			
			1、Window
					-Window对象代表整个浏览器的窗口
					-同时Window对象也是全局对象。
								在全局作用域中定义的变量会被当做window的属性来保存。
								在全局作用域定义的函数会被当做Window的函数来保存。
								
			2、Navigator
					-代表当前浏览器信息。通过该对象可以识别不同的浏览器
			
			3、Location
					-代表当前浏览器的地址栏信息。通过该对象可以获取地址栏信息或者跳转页面

			3、History
					-代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录。
					 由于隐私的原因，该对象不能获取到具体的历史记录。
					 只能操作浏览器向前或向后跳转。而且该操作只在当次访问时有效。
					 
			4、Screen
					-代表用户屏幕信息，通过该对象可以获取显示器的相关信息。
					-PC端很少用，移动端常用
			
			Window对象是全局对象，以上这些BOM对象都是作为Window的属性来保存的。
			所以可以直接通过Window对象来访问，也可以直接访问。

二、Navigator

	
	Navigator 
				1、代表浏览器信息，通过该对象可以识别不同的浏览器
				
				2、由于历史原因,Navigator对象中的大部分属性已经不能帮助我们识别浏览器了。		
								
								历史原因：IE浏览器为了防止歧视，就将Navigator对象中的属性设置为和其他浏览器相同的值。
								         这样就不能通过这些属性来区分IE浏览器了。
										 (牛X)
2.1 通过Navigator对象的userAgent属性来识别浏览器

	Navigator.userAgent	
			
			1) 用这个属性来判断浏览器。userAgent属性返回一个字符串，这个字符串中包含了浏览器的相关信息。
			2) 通过userAgent可以识别浏览器，但是不能识别IE11。因为IE11又同化了这个属性。		
	
	
			    - 火狐的userAgent
						Mozilla/5.0 (Windows NT 10.0; WOW64; rv:40.0) Gecko/20100101 Firefox/40.0
						
				- 谷歌的userAgent
						Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.125 Safari/537.36
				
				- IE8的userAgent
						Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; McAfee; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)	
			
				- IE9的userAgent
						Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; McAfee; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)	
				
				- IE11的userAgent
						Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; McAfee; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; rv:11.0) like Gecko
						在IE11中已经将微软和IE相关的标识都已经去除了，所以不能通过userAgent来识别IE了。

案例


      var ua=navigator.userAgent
      
      if(/Firefox/ig.test(ua)){
            alert("你是火狐浏览器")
      }

      if(/Chrome/ig.test(ua)){
            alert("你是谷歌浏览器")
      }

      //只能识别IE8、IE9、IE10浏览器
      if(/MSIE/ig.test(ua)){
            alert("你是IE浏览器")
      }
>>>>>> 可以识别谷歌浏览器

在这里插入图片描述

>>>>>> 可以识别火狐浏览器

在这里插入图片描述

>>>>>> 可以识别IE8、IE9、IE10浏览器

在这里插入图片描述

>>>>>> 不能识别IE11浏览器

在这里插入图片描述

2.2 通过ActiveXObject对象来识别IE浏览器

由于通过userAgent不能识别IE11浏览器，则需要通过其他方式来识别IE。

	
	如果通过userAgent不能判断IE浏览器，则可以通过浏览器特有对象来判断浏览器。
	 比如ActiveXObject。它是IE中特有对象。
>>>>>> 这种写法不能识别IE浏览器（不能识别IE11）
		
	这种写法可以识别IE7、8、9、10浏览器。但不能识别IE11浏览器
	因为IE11修改了这个默认值。 !!window.ActiveXObject =false
				
				IE真是小人啊。为了防止自己不被歧视，
				连原则都不坚持，将基本属性都改了。
					


        if(window.ActiveXObject) {
            console.log("你是IE浏览器")
        }

在这里插入图片描述
在这里插入图片描述

>>>>>> 这种写法可以识别IE浏览器

        if("ActiveXObject" in window) {
          			 console.log("你是IE浏览器")
       	}

在这里插入图片描述

2.3 识别浏览器综合处理

      var ua=navigator.userAgent
      
      if(/Firefox/ig.test(ua)){
            alert("你是火狐浏览器")
      }

      if(/Chrome/ig.test(ua)){
            alert("你是谷歌浏览器")
      }

      //只能识别IE8、IE9、IE10浏览器
      //   if(/MSIE/ig.test(ua)){
      //         alert("你是IE浏览器")
      //   }
       
      if("ActiveXObject" in window){
            alert("你是IE浏览器")
      }

三、History对象

	
	History
			-最初的设计来表示浏览器的历史记录。
			 由于隐私的原因，该对象不能获取到具体的历史记录。
			
			-只能操作浏览器在历史页面中向前或向后跳转。而且该操作只在当次访问时有效。
			
			 						
			切记
				【1、通过history跳转的页面是指那些在同一个页面窗口中已经访问的网页】
				【2、只在当前访问有效，只在当前页面窗口有效】
			 

	
	history.length 
				获取在同一个页面窗口中访问的页面数量。
	
	history.back()
				跳转到上一个历史页面，作用和浏览器回退相同
	
	history.forward()
				跳转到下一个历史页面，作用和浏览器前进相同
	
	history.go(数字)
				跳转到指定的历史页面。
				需要一个数字作为参数,表示跳转到第几个历史页面。 
				数字>0,向前跳转。数字<0,向后跳转。
				
						history.go(-1)  回退,作用和back() 相同
						history.go(1)   向前，作用和forward() 相同
						history.go(-3)  回退到第3个历史页面
>>>>>> history.length 获取当前页面窗口浏览的页面的个数，即历史页面的个数
<script>
        console.log(history.length);
</script>

在这里插入图片描述

在这里插入图片描述

>>>>>> history.back()、history.forward() 跳转历史页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <button>向前跳转</button>
    <button>向后跳转</button>

</body>

<script>

    var btns=document.getElementsByTagName("button");

    btns[0].onclick=function(){
        history.back(); //向前跳转，相当于浏览器的回退
    
    }

    
    btns[1].onclick=function(){
        history.forward(); //向后跳转，相当于浏览器的前进
    }

</script>

</html>
>>>>>> history.go(数字) 跳转到指定的历史页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <button>向前跳转</button>
    <button>向后跳转</button>
    <button>跳转到第3个历史页面</button>

</body>

<script>

    var btns=document.getElementsByTagName("button");

    btns[0].onclick=function(){
        //history.back(); //向前跳转，相当于浏览器的回退
        history.go(1)
    }

    
    btns[1].onclick=function(){
        // history.forward(); //向后跳转，相当于浏览器的前进
        history.go(-1)
    }

    btns[2].onclick=function(){
        history.go(3)
    }

</script>

</html>

四、Location对象

	
	Location
			- 代表当前浏览器的地址栏信息。通过该对象可以获取地址栏信息或者跳转页面
			
			- 直接打印Location,会获取到地址栏的URL路径
			-
4.1 location 对象的属性

		href		设置或返回 完整URL路径。
							可以设置绝对路径跳转
										location.href="http://www.baidu.com"
							可以设置相对路径跳转
										location.href="./index3.html"

							
		host		设置或返回 域名:端口
		hostname	设置或返回 域名		
		port		设置或返回 端口
		
		protocol	设置或返回协议。http 或 https
		pathname	设置或返回 URL 的路径部分。
		hash		设置或返回 从#开始的字符串。
		search		设置或返回 从?开始的字符串。
>>>>>> 设置或返回location对象的基本属性

<script>

    //设置或返回完整URL路径
    console.log("href:"+location.href);

    
    //设置或返回域名:端口
    console.log("host:"+location.host);
    //设置或返回域名
    console.log("hostname:"+location.hostname);
    //设置或返回端口
    console.log("port:"+location.port);


    //设置或返回协议
    console.log("protocol:"+location.protocol);
    //设置或返回URL的路径部分
    console.log("pathname:"+location.pathname);


    //设置或返回 从?开始的内容
    console.log("search:"+location.search);
    //设置或返回 从#开始的内容
    console.log("hash:"+location.hash);

</script>

在这里插入图片描述

>>>>>> 通过location.href跳转页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button> 跳转百度</button>
    <button> 跳转index9.html</button>

</body>

<script>

    var btns=document.getElementsByTagName("button");

    //通过绝对路径跳转
    btns[0].onclick=function(){
        location.href="http://www.baidu.com"
    }

    //通过相对路径跳转
    btns[1].onclick=function(){
        location.href="./index9.html"
    }

</script>

</html>

在这里插入图片描述

4.2 location 对象的方法

		location.assign("http://www.baidu.com");
					跳转页面，相当于 location.href="http://www.baidu.com"
		
		location.reload();
					刷新页面，相当于F5刷新
	
		location.reload(true);
					强制清空缓存刷新页面，相当于 ctrl+F5 强制清空缓存刷新网页
>>>>>> 通过location.assign跳转页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button> 跳转百度</button>
    <button> 跳转index9.html</button>

</body>

<script>

    var btns=document.getElementsByTagName("button");

    //通过绝对路径跳转
    btns[0].onclick=function(){
        location.assign("http://www.baidu.com")
    }

    //通过相对路径跳转
    btns[1].onclick=function(){
        location.assign("./index9.html")
    }

</script>

</html>

在这里插入图片描述

>>>>>> 通过location.reload()刷新页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text"><br/><br/>

    <button> 刷新</button>
    <button> 强制刷新</button>

</body>

<script>

    var btns=document.getElementsByTagName("button");

    //刷新
    btns[0].onclick=function(){
        location.reload();
    }

    //强制刷新
    btns[1].onclick=function(){
        location.reload(true);
    }

</script>

</html>

五、window对象


	
	+++ 对话框
	
			alert("123")	     显示带有一段消息和一个确认按钮的警告框。
			prompt("请输入姓名")	 显示可提示用户输入的对话框。
			confirm("请确认")	 显示带有一段消息以及确认按钮和取消按钮的对话框。



	+++ 定时函数	
			setInterval(show,1000)	
			setInterval("show()",1000)
			setInterval(function(){console.log("111")},1000)
								开启定时调用,每隔多少毫秒定时调用函数。
								返回一个number类型ID。用于定时器的唯一标识
								
			clearInterval(id)	关闭setInterval()开启的定时任务



	+++ 延时函数
			setTimeout(show,1000)	
			setTimeout("show()",1000)
			setTimeout(function(){console.log("111")},1000)
								开启延时调用,隔多少秒开始调用函数。只会调用一次
								返回一个number类型ID。用于定时器的唯一标识
				
			clearTimeout()	取消由 setTimeout() 方法设置的 timeout。
		



	+++ 其他
			print()	打印当前窗口的内容。
			close()	关闭浏览器窗口。
			open()	打开一个新的浏览器窗口或查找一个已命名的窗口。
5.1 对话框
<body>

    <button> 警告框</button>
    <button> 确认框</button>
    <button> 对话框</button>

</body>

<script>


    var btns=document.getElementsByTagName("button");

    //警告窗
    btns[0].onclick=function(){
       window.alert("qwe");
    }

    //确认框
    btns[1].onclick=function(){
        var flag=window.confirm("你确定?");
        console.log(flag)
    }

    //对话框
    btns[2].onclick=function(){
        var str=window.prompt("请输入你的姓名")
        console.log(str)
    }



</script>

警告窗
在这里插入图片描述
确认框
在这里插入图片描述
对话框
在这里插入图片描述

5.2 定时函数
1）开启定时函数

        //方式一
        function show(){
            console.log("123")
        }
        window.setInterval("show()",1000);


        //方式二
        function show(){
            console.log("123")
        }
        window.setInterval(show,1000);



        //方式三
        window.setInterval(function(){
            console.log("123")
        },1000);
2）关闭定时函数
<body>

    <div></div>
    <button >关闭定时任务</button>
    
</body>

<script>

  	
  	//开启定时任务
    var id=window.setInterval(function(){
        var div=document.getElementsByTagName("div")[0];
        div.innerHTML=new Date();
    },1000)

    //关闭定时任务
    document.getElementsByTagName("button")[0].onclick=function(){
        window.clearInterval(id);
    }

</script>

在这里插入图片描述

3）案例
>>>>>> 案例1：动态切换图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div{
            width:400px;
            height:400px;
            overflow: hidden;
            margin-bottom: 20px;
        }

        img{
            transition: 1s;
            width:400px;
            height:400px;
        }
      
    </style>
</head>
<body>
    
    <div>
        <img src="./img/1 (1).png">
    </div>

    <button>开始</button>
    <button>停止</button>
</body>

<script>

    var imgs=["1 (1).png","1 (2).png","1 (3).png","1 (4).png"];


    var img=document.getElementsByTagName("img")[0]
    var btn1=document.getElementsByTagName("button")[0]
    var btn2=document.getElementsByTagName("button")[1]
    var tFalg;

    btn1.onclick=function(){

        //阻止重复点击，开启多个定时事件
        if(tFalg){
            return;
        }

        var i=0;
        tFalg=window.setInterval(function(){
            i++;
            if(i==imgs.length){
                i=0;
            }
            img.src="./img/"+imgs[i];
        },1000);
    }

    btn2.onclick=function(){
        window.clearInterval(tFalg)
    }

   

</script>

</html>

在这里插入图片描述

>>>>>> 案例2：按键控制DIV移动

案例缺点：按键持续按下时，第一次有明显的卡顿

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body >

    <div style="width:100px;height: 100px;background-color: red; position: absolute;"></div>
</body>


<script>
    
    var div=document.getElementsByTagName("div")[0];
    document.onkeydown=function(event){

        event=event||window.event;

        //通过keyCode可以获取上下左右的码值
        //左:37   上:38  右:39   下:40
        console.log(event.keyCode)

        //按下左键
        if(event.keyCode==37){
            div.style.left=(div.offsetLeft-10)+"px"
        }
        //按下上键
        if(event.keyCode==38){
            div.style.top=(div.offsetTop-10)+"px"
        }
        //按下右键
        if(event.keyCode==39){
            div.style.left=(div.offsetLeft+10)+"px"
        }
        //按下下键
        if(event.keyCode==40){
            div.style.top=(div.offsetTop+10)+"px"
        }
        
        //取消浏览器默认行为
        return false;
    }

</script>

</html>

在这里插入图片描述

使用定时器修改上述案例，解决按键持续按下时，第一次的卡顿感

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    
</head>
<body>
        <div style="width:100px;height:100px;background-color: red;position: absolute;"></div>
</body>

<script>



    var key=null;
    var speed=10;
    //将速度的控制交给定时任务
    window.setInterval(function(){
            switch(key){
                    case 37:
                            div.style.left=div.offsetLeft-speed +"px";
                            break;
                    case 38:
                            div.style.top=div.offsetTop - speed +"px";
                            break;
                    
                    case 39:
                            div.style.left=div.offsetLeft+speed +"px";
                            break;

                    case 40:
                            div.style.top=div.offsetTop+speed +"px";
                            break;

            }                   
    },30); 


    //按键只控制方向
    var div=document.getElementsByTagName("div")[0];
    document.onkeydown=function(event){

        event=event||window.event;

        //如果按住ctrl键，代表加速
        if(event.ctrlKey){
            speed=30;
        }else{
            speed=10;
        }
        
        //按键只控制方向
         key=event.keyCode;

    }

    document.onkeyup=function(){
        key=null;
    }

</script>

</html>

在这里插入图片描述

5.3 延时函数
1）开启延时函数
<script>

        //方式一
        function show(){
            console.log("123")
        }
        window.setTimeout("show()",1000);


        //方式二
        function show(){
            console.log("123")
        }
        window.setTimeout(show,1000);



        //方式三
        window.setTimeout(function(){
            console.log("123")
        },1000);
        
</script>
2）关闭延时函数
<script>

     
        var id=window.setInterval(function(){
            console.log("123")
        },3000);

        window.clearTimeout(id);

</script>

六、定时函数完成JS动画特效

6.1 使用定时函数完成动画特效
1) 案例：回到顶部动画
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .top{
            width:80px;
            height:80px;
            background-color: red;
            color:rgba(0,0,0,0.5);
            border-radius: 10%;
            font-size: 30px;
            font-weight: bolder;
            text-align: center;
            line-height: 40px;
            padding:10px;

            position: fixed;
            top:800px;
            left:1900px;
        }

       
    </style>
</head>
<body>
    ----------------
    <div style="margin-bottom:2000px;"></div>
    ---------------

    <div class="top">回到顶部</div>
</body>

<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>

    var now=0;
    $(".top").click(function(){
        //顺时滚动到顶部
        // $("body,html").scrollTop(0);

        //使用定时器来完成动画滚动
        var id=setInterval(function(){
            now=$("body,html").scrollTop()-100;
            $("body,html").scrollTop(now);
            if(now<0){
                clearInterval(id);
            }
        },10);

    })  


</script>
</html>

在这里插入图片描述

2) 案例：移动div动画
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    
</head>
<body>
        <button> 向右移动div</button>
        <button> 向左移动div</button>
        <div style="width:100px;height:100px;background-color: red;position: absolute;margin-top:20px;"></div>

        <div style="width:2px;background-color: blue; height:800px;position: absolute; left:1200px;"></div>
</body>

<script>

        var timer;
        var div=document.getElementsByTagName("div")[0];
      
        var btn1=document.getElementsByTagName("button")[0];
        var btn2=document.getElementsByTagName("button")[1];

        //向右移动
        btn1.onclick=function(event){

            window.clearInterval(timer);
 
            event=event||window.event;
            var speed=11;

            timer=window.setInterval(function(){

                    var move=div.offsetLeft+speed;
                    if(move>=1200){
                        move=1200;
                        window.clearInterval(timer)
                    }
                    div.style.left=move +"px";

            },30)
        }

        //向左移动
        btn2.onclick=function(event){
            event=event||window.event;

            window.clearInterval(timer);
            var speed=11;

            timer=window.setInterval(function(){

                var move=div.offsetLeft-speed;
                if(move<=0){
                    move=0;
                    window.clearInterval(timer)
                }
                div.style.left=move +"px";
            },30)
        }

</script>

</html>

在这里插入图片描述

6.2 自定义动画函数
   
        //封装动画函数
        //obj   操作的元素对象
        //attr  操作的css属性
        //spped 速度
        //callFun 回调函数
        function move(obj,attr,target,speed,callFun){
           
            if(obj.timer){
                window.clearInterval(obj.timer);
            }
 
            event=event||window.event;
            var nowPosition=parseInt(obj.style[attr]);

            //设置speed正负号
            if(target <  nowPosition){
                speed=-speed;
            }

            obj.timer=window.setInterval(function(){
                console.log("1")
                var newPosition=parseInt(obj.style[attr])+speed;
                
                if((speed >0 && newPosition>=target) || (speed<0 && newPosition<=target)){
                    newPosition= target;
                }
                
                obj.style[attr]=newPosition+"px";

                if(newPosition == target){
                    window.clearInterval(obj.timer)
                    callFun.call();    
                }
            },30)

        }
1）自定义动画函数的演变过程
>>>>>> 案例1：移动盒子
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    
</head>
<body>
        <button> 向右移动div</button>
        <button> 向左移动div</button>
        <div style="width:100px;height:100px;background-color: red;position: absolute;margin-top:20px;"></div>

        <div style="width:2px;background-color: blue; height:800px;position: absolute; left:1200px;"></div>
</body>

<script>

        var timer;
        var div=document.getElementsByTagName("div")[0];
      
        var btn1=document.getElementsByTagName("button")[0];
        var btn2=document.getElementsByTagName("button")[1];

        //向右移动
        btn1.onclick=function(event){

            window.clearInterval(timer);
 
            event=event||window.event;
            var speed=11;

            timer=window.setInterval(function(){

                    var move=div.offsetLeft+speed;
                    if(move>=1200){
                        move=1200;
                        window.clearInterval(timer)
                    }
                    div.style.left=move +"px";

            },30)
        }

        //向左移动
        btn2.onclick=function(event){
            event=event||window.event;

            window.clearInterval(timer);
            var speed=11;

            timer=window.setInterval(function(){

                var move=div.offsetLeft-speed;
                if(move<=0){
                    move=0;
                    window.clearInterval(timer)
                }
                div.style.left=move +"px";
            },30)
        }

</script>

</html>

在这里插入图片描述

>>>>>> 案例2：由移动盒子案例为基础，封装移动函数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    
</head>
<body>
        <button> 向右移动div</button>
        <button> 向左移动div</button>
        <div style="width:100px;height:100px;background-color: red;position: absolute;margin-top:20px;left:0px;"></div>

        <div style="width:2px;background-color: blue; height:800px;position: absolute; left:1200px;"></div>
</body>

<script>


        
        //封装move移动函数
        function move(obj,target,speed){
           
            if(obj.timer){
                window.clearInterval(obj.timer);
            }
 
            event=event||window.event;
            var nowPosition=parseInt(obj.style.left);

            //设置speed正负号
            if(target <  nowPosition){
                speed=-speed;
            }

            obj.timer=window.setInterval(function(){
                console.log("1")
                var newPosition=parseInt(obj.style.left)+speed;
                
                if((speed >0 && newPosition>=target) || (speed<0 && newPosition<=target)){
                    newPosition= target;
                    window.clearInterval(obj.timer)
                }
                
                obj.style.left=newPosition+"px"
            },30)

        }


        var div=document.getElementsByTagName("div")[0];
      
        var btn1=document.getElementsByTagName("button")[0];
        var btn2=document.getElementsByTagName("button")[1];


        //向右移动
        btn1.onclick=function(event){
            move(div,1200,10);
        }

        //向左移动
        btn2.onclick=function(event){
            move(div,0,10);
        }

</script>

</html>

在这里插入图片描述

>>>>>> 案例3：由移动函数为基础，封装为动画函数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    
</head>
<body>
        <button> 向右移动1200px</button>
        <button> 高度增长到1000px</button>
        <button> 高度减少到200px</button>

        <div style="width:100px;height:100px;background-color: red;position: absolute;margin-top:20px;left:0px;"></div>

</body>

<script>


        
        //封装move移动函数
        function move(obj,attr,target,speed,callFun){
           
            if(obj.timer){
                window.clearInterval(obj.timer);
            }
 
            event=event||window.event;
            var nowPosition=parseInt(obj.style[attr]);

            //设置speed正负号
            if(target <  nowPosition){
                speed=-speed;
            }

            obj.timer=window.setInterval(function(){
                console.log("1")
                var newPosition=parseInt(obj.style[attr])+speed;
                
                if((speed >0 && newPosition>=target) || (speed<0 && newPosition<=target)){
                    newPosition= target;
                }
                
                obj.style[attr]=newPosition+"px";

                if(newPosition == target){
                    window.clearInterval(obj.timer)
                    callFun.call();    
                }
            },30)

        }


        var div=document.getElementsByTagName("div")[0];
      
        var btn0=document.getElementsByTagName("button")[0];
        var btn1=document.getElementsByTagName("button")[1];
        var btn2=document.getElementsByTagName("button")[2];


        btn0.onclick=function(event){
            move(div,"left",1200,10,function(){alert("执行完毕")});
        }


        btn1.onclick=function(event){
            move(div,"height",1200,10,function(){alert("执行完毕")});
        }

        btn2.onclick=function(event){
            move(div,"height",200,10,function(){alert("执行完毕")});
        }


</script>

</html>

在这里插入图片描述

>>>>>> 案例4：自定义动画函数的高级应用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    
</head>
<body>
        <button>开始动画</button>

        <div style="width:100px;height:100px;background-color: red;position: absolute;margin-top:20px;left:0px;"></div>

</body>

<script>


        
        //封装move移动函数
        function move(obj,attr,target,speed,callFun){
           
            if(obj.timer){
                window.clearInterval(obj.timer);
            }
 
            event=event||window.event;
            var nowPosition=parseInt(obj.style[attr]);

            //设置speed正负号
            if(target <  nowPosition){
                speed=-speed;
            }

            obj.timer=window.setInterval(function(){
                console.log("1")
                var newPosition=parseInt(obj.style[attr])+speed;
                
                if((speed >0 && newPosition>=target) || (speed<0 && newPosition<=target)){
                    newPosition= target;
                }
                
                obj.style[attr]=newPosition+"px";

                if(newPosition == target){
                    window.clearInterval(obj.timer)
                    callFun.call();    
                }
            },30)

        }


        var div=document.getElementsByTagName("div")[0];
      
        var btn0=document.getElementsByTagName("button")[0];


        btn0.onclick=function(event){
            //向右移动500px
            move(div,"left",500,10,function(){

                //高度增高500px
                move(div,"height",500,10,function(){
                    
                    //向左移动500px
                    move(div,"left",0,10,function(){
                        alert("动画完毕")
                    });
                });
            });
        }


      

</script>

</html>

在这里插入图片描述

2）自定义动画的使用
>>>>>> 轮播图

utils.js

 
        //封装动画函数
        //obj   操作的元素对象
        //attr  操作的css属性
        //spped 速度
        //callFun 回调函数
        function move(obj,attr,target,speed,callFun){
           
            if(obj.timer){
                window.clearInterval(obj.timer);
            }
 
            event=event||window.event;
            var nowPosition=parseInt(obj.style[attr]);
 
            //设置speed正负号
            if(target <  nowPosition){
                speed=-speed;
            }
 
            obj.timer=window.setInterval(function(){
                var newPosition=parseInt(obj.style[attr])+speed;
 
                if((speed >0 && newPosition>=target) || (speed<0 && newPosition<=target)){
                    newPosition= target;
                }
                
                obj.style[attr]=newPosition+"px";
 
                if(newPosition == target){
                    window.clearInterval(obj.timer)
                    callFun.call();    
                }
            },30)
 
        }

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>

    *{
        margin:0px;
        padding:0px;
        list-style: none;
    }

    .box{
        width:600px;
        height:470px;
        margin:20 auto;

        background-color: pink;
        padding:20px;
        padding-left:0px;

        margin:20px auto;

        position: relative;

        overflow:hidden;

    }

    .box ul:first-of-type{
        width:3600px;
        height:100%;

        position: absolute;
        left:0px;

    }

    .box img{
        width:580px;
        height:450px;
        
        float:left;
        margin-left:20px;
    }

    .box ul:last-of-type{
        position: absolute;
        width:500px;

        bottom:10px;
        left:25%;
        right:0px;
        margin:0px auto;


    }

    .box .dot{
        
        border:10px solid rgba(0,0,0,0.3);
        margin-left:20px;
        float:left;
    }

    .box .dot.w{
        border-color:white;
    }
    

</style>
<body>

    <div  class="box">
        <ul style="left:0px">
            <li><img src="1 (1).png"></li>
            <li><img src="1 (2).png"></li>
            <li><img src="1 (3).png"></li>
            <li><img src="1 (4).png"></li>
            <li><img src="1 (5).png"></li>
            <li><img src="1 (6).png"></li>
        </ul>
        
        <ul >
            <li class="dot w"></li>
            <li class="dot"></li>
            <li class="dot"></li>
            <li class="dot"></li>
            <li class="dot"></li>
            <li class="dot"></li>
        </ul>
</div>

</body>

<script type="text/javascript" src="./utils.js"></script>

<script>

    


       var imgUl=document.querySelector(".box ul:first-of-type");
       var dots=document.querySelectorAll(".box .dot");


       //刷新原点样式
       function refreshDot(target){
            for(var i=0;i<dots.length;i++){

                //清空样式
                dots[i].className="dot";
                
                if(i==target){
                    dots[i].className="dot  w";
                }

            }
       }


       // 轮播图
       var i=0;
       function callFun(){
            window.setTimeout(function(){
                
                if(i==6){
                    imgUl.style.left="0px"
                    i=0;
                }

                refreshDot(i);
                move(imgUl,"left",-600*i++,100,callFun);            
            },1000)
       }

      callFun();
      
      //点击原点切换图片
      for(var i=0;i<dots.length;i++){

        dots[i].index=i;

        dots[i].onclick=function(){
            i=this.index;
            refreshDot(this.index);

            imgUl.style.left=-600*this.index+"px";
        }
      }



</script>
</html>

在这里插入图片描述

二旬、
关注
专栏目录
QWeb知识点小结一 odoo13
fqfq123456的专栏
04-22 751
一：简介 QWeb是一个基于xml的模板引擎，用于生成HTML片段和页面。报表是使用qweb定义的，报表的pdf导出是使用wkhtmltopdf来完成的。如果需要为一个模型创建报表，需要定义report及对应模板。如果有需要的话还可以指定特定的纸张格式，如果需要访问其他模型，就需要定义Custom Report。仔细研究一下odoo原码，需多功能都离不开qweb.于Odoo前端来说，所有的js对象都是继承自openerp.web.Class这个类，然后由此派生出Widget，由Widget派生出其他诸如Vi
js--7.bom对象-5.定时调用
02-05
在"js--7.bom对象-5.定时调用"这个主题中，我们将深入探讨BOM中的定时调用机制，主要包括`setTimeout()`和`setInterval()`两个重要的函数。 `setTimeout()`函数是JavaScript中用于延迟执行某个函数或代码块的工具。...
WebOM:用于 Web 的 Java 对象映射器
06-26
网络管理系统 它将 HTTP 请求映射到 Java 对象，因此您不必自己担心类型转换和空检查。 还支持websockets！ 该项目仍在进行中，欢迎提出任何建议，不鼓励在生产环境中使用它。 例子： 初始化 WebOM server = new WebOM ( 5000 , " webom.examples " ); server . setStaticFileLocation( " public " ); server . start(); 只是简单的示例请求处理程序 @Handler ( method = RequestMethod . GET , path = " /hello " ) public class HelloWorld extends HTTPRequestHandler { @Override public Object handle ( Req
BOM--document对象
青柠小甜味
02-11 213
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BOM--document对象</title> <script> /* document对象: 常用对象集合: forms:代表页面中所有表单的集合 返回值是一个数组 常用对象方法: white():文档中打印信息 w
BOM浏览器对象模型
Learn to value time
02-20 148
什么是BOM？ BOM：Browser Object Model（浏览器对象模型） 提供了独立于内容与浏览器窗口进行交互的对象 使JavaScript有能力和浏览器“对话” 1. window(重要) 代表浏览器窗口，可以用来控制当前窗口或打开新的窗口 所有JavaScript全局对象、函数以及变量均自动成为window对象的成员 常用属性 history 有关客户访问过的URL的信息 location 有关当前URL的信息 window.location="http://ww
BOM与DOM
09-07 126
BOM和DOM和ECMAscript的关系： BOM是运行平台，BOM规则建立在ECMAscript的规则之上DOM是运行在平台上的页面ECMAscript是用来操作平台或运行在平台上的页面的工具 BOM:浏览器对象模型(BrowersObject MOdel) window是js中的顶层对象，所有的全局都属于window;window窗口：提供了浏览器的窗口之间的操作。...
Bom对象--＞笔记
零小唬的博客
10-26 310
Bom对象-->笔记
bom操作----history对象
赵佳敏的博客
12-18 405
目录一、后退---back()二、前进---forward()三、go()四、pushState()----创建一条历史记录五、replaceState()----修改当前的历史记录六、禁止主界面系统回退七、标签实现前进倒退 一、后退—back() 移动到上一个访问页面，等同于浏览器的后退键。 history.back();//后退 二、前进—forward() 移动到下一个访问页面，等同于浏览器的前进键。 history.forward();//前进 <butt.
BOM--浏览器对象模型
岂曰无衣
12-31 434
浏览器对象模型(BOM)是什么？ BOM是Browser Object Model的缩写，简称浏览器对象模型。 BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。 BOM体系结构图： BOM能做什么？ BOM提供了一些访问窗口对象的一些方法，我们可以用它来移动窗口位置，改变窗口大小，打开新窗口和关闭窗口，弹出对话框，进行导航以及获取客户的一些信息如：浏览器品牌版本，屏幕分辨率。但BOM最强大的功能是它提供了一个访问HTML页面的一入口——document对象，以使得我们可以通过这个入口来
js---bom---history对象
2301_80310942的博客
07-11 581
window对象给我们提供了一个history对象,与浏览器历史进行交互,该对象包含用户(在浏览器窗口中)访问过的url。go(参数)---前进后退功能 参数如果是1 前进 如果是-1 后退一个页面。back()---可以实现后退功能。forward()---前进功能。history对象方法。
BOM---
最新发布
mmkyyy的博客
09-25 722
BOM（Browser Object Model）浏览器对象模型 BOM 使 JavaScript 有能力与浏览器“对话” BOM尚无正式标准,但是浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性（window）
BOM----学习讲义
08-31
从erp100上DownLoad下来的资料,介绍了BOM的相关概念、BOM的用途说明、BOM的分类、BOM的维护与管理，可值值得一读,谢谢作者的共享。
slide-bom:浏览器对象模型 (BOM) 的网页幻灯片
07-10
BOM的核心对象是`window`，它是所有其他BOM对象的父对象，代表了浏览器的一个窗口或框架。 1. **Window对象**: `window`对象是全局对象，所有JavaScript代码都默认运行在`window`对象的上下文中。它包含了对页面、...
juzu-bom-core-0.6.0-beta12.zip
10-22
1. 类型转换器（Type Converters）：这是库的核心部分，可能包含一系列预定义的转换规则，用于将基本数据类型（如字符串、整数、浮点数等）互相转换，或者将复杂对象转换为可序列化的格式。 2. 自定义转换器机制：...
一、万维网简史
weixin_45602227的博客
05-31 7310
一、js起源 1.1 万维网起源 1990年底，欧洲核能研究组织（CERN）科学家Tim Berners-Lee，在全世界最大的电脑网络——互联网的基础上，发明了万维网（World Wide Web），从此可以在网上浏览网页文件。 最早的网页只能在操作系统的终端里浏览，也就是说只能使用命令行操作，网页都是在字符窗口中显示，这当然非常不方便。 1.2 最原始的Web浏览器 1990年，Tim以超文本语言HTML为基础在NeXT电脑上发明了最原始的Web浏览器。 体验版：https://worldwideweb
七、ES对象（二） -- 正则表达式
weixin_45602227的博客
07-28 3024
一、this关键字 1.1 前提 1. 在全局作用域中定义的变量或函数会被当做window的属性来保存。 2. 在函数作用域中不使用var关键字定义的变量也会被当做window的属性来保存。 1）s( ) 与 window.s( ) 等价 function s(){ c=function ss(){ console.log("12") } } s();
八、DOM（四） -- DOM事件2
weixin_45602227的博客
07-29 1722
一、滑轮滚动事件 +++ 绑定滚动事件(兼容谷歌、IE浏览器) elem.onmousewheel=function(){ } 绑定滚动事件 event.wheelDelta 只看正负，不看大小。向上滚>0 。向下滚<0 (通过该属性获取的是个数值,在不同的浏览器中获取的值是不同的。) +++ 绑定鼠标滚动事件(兼容火狐浏览器,火狐特有) elem.addE
七、ES对象（一） -- 数组对象
weixin_45602227的博客
07-28 1273
一、正则表达式的作用 正则表达式的作用： 1) 检查字符串是否符合规则 2) 将字符串中符合规则的内容提取出来。 二、创建正则表达式 +++ 创建正则表达式 使用RegExp创建正则表达式 var reg=new RegExp("正则表达式","匹配模式"); 使用字面量创建正则表达式 var reg=/正则表达式/匹配模式 +++ 正则表达式的匹配模式 i 忽略大小写
六、对象 (二) -- 普通对象
weixin_45602227的博客
07-28 1011
1.1 基本数据类型包装类 一、对象 1.1 对象的概念 1) 对象是都是通过函数创建的。函数相当于创建对象的模板类。 2) 对象是函数,而函数本身也是一种对象。 所以对象使用方式也适用于函数,而函数的使用方式也适用于对象。 3) 对象的属性值可以是任意数据类型，也可以是一个函数， 4) 直接调用函数，称为调用函数。 调用对象的函数，称为调用方法。 两者没什么区别。使我们为了方便与记忆，认为划分。 1）函数即对象，对象即函数 c
JavaScript BOM操作：window对象及其子级对象详解
BOM的核心对象是window对象，它代表了浏览器的一个实例，并提供了一系列的子级对象来管理浏览器窗口及其相关功能。 window对象： window对象是浏览器中的全局对象，它提供了许多属性和方法来控制浏览器窗口以及执行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值