BOM，AJAX

最新推荐文章于 2022-01-07 15:09:07 发布

enternal567

最新推荐文章于 2022-01-07 15:09:07 发布

阅读量272

点赞数

本文链接：https://blog.csdn.net/enternal567/article/details/78917301

版权

1.BOM:浏览器对象模型
window.innerHeight:获取浏览器高度
window.innerWidth:获取浏览器宽度
注:不包括滚动条和工具栏

<script>
    var w=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
    var h=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
    alert("浏览器宽度："+w+",浏览器高度"+h);
</script>

这里写图片描述
window其它方法：
1.window.open:打开新窗口
2.window.close:关闭当前窗口
3.window.moveTo:移动当前窗口
4.window.resizeTo:调整当前窗口尺寸
eg.点击按钮打开新窗口

<body>
<button>公告</button>
<script>
    document.getElementsByTagName("button")[0].onclick=function(){
        window.open("new.html","","width=200,height=300,top=100,left=100,status=no,menubar=no")
    }
</script>
</body>

这里写图片描述
eg2.点击弹出确认框

<body>
<p><a href="" class="btn">关闭窗口</a></p>
<script>
    window.onload=function(){
        document.getElementsByClassName("btn")[0].onclick=function(e){
            e.preventDefault();
            var msg=window.confirm("确定要退出吗?");
            if(msg){
                window.close();
            }
        };
    }
</script>
</body>

这里写图片描述
窗口特征：
1.divectories=yes/no/0/1 是否添加目录按钮，默认yes
2.fullscreen=yes/no/0/1 是否使用全屏，默认no
3.location=yes/no/0/1 是否显示地址字段，默认yes
4.menubar=yes/no/0/1 是否显示菜单栏，默认yes
5.resizable=yes/no/0/1 是否可调节窗口尺寸，默认yes
6.scrollbars=yes/no/0/1 是否显示滚动条，默认yes
7.ststus=yes/no/0/1 是否添加状态栏，默认yes
8.titlebar=yes/no/0/1 是否显示标题栏，默认yes
9.toolbar=yes/no/0/1 是否显示浏览器工具栏，默认yes

浮动框架
iframe

<body>
<div>
    <iframe src="close.html" frameborder="0" name="closeName" id="if1"></iframe>
    <iframe src="close.html" frameborder="0" name="closeName" id="if2"></iframe>
</div>
<script>
    console.log(window.length);//获取框架数
    console.log(document.getElementById("if1").name);//获取框架名
</script>
</body>

运行结果：2 closename
eg2.点击在指定位置显示内容

<body>
<p>
    <a href="eg/music.html" target="closeName">音乐</a>
    <a href="eg/game.html" target="closeName">游戏</a>
    <a href="eg/read.html" target="closeName">阅读</a>
</p>
<div>
    <iframe src="close.html" frameborder="0" name="closeName" id="if2"></iframe>
</div>
</body>

点击游戏结果：
这里写图片描述
调整窗口大小:
resizeBy()按照指定像素调整窗口大小
resizeTo()把窗口调整到指定宽度和高度
scrollBy()按照指定大小调整窗口
eg.

<body>
<p>
    <button>放大窗口</button>
    <button>缩小窗口</button>
    <button>调整指定大小</button>
</p>
<script>
    window.onload=function(){
        document.getElementsByTagName("button")[0].onclick=function(){
            window.resizeBy(200,200);
        };
        document.getElementsByTagName("button")[1].onclick=function(){
            window.resizeBy(-200,-200);
        };
        document.getElementsByTagName("button")[2].onclick=function(){
            window.resizeTo(300,300);
        }
    }
</script>
</body>

<body>
<a href="javascript:void(0)">打开窗口调整大小</a>
<script>
    window.onload=function(){
        document.getElementsByTagName("a")[0].onclick=function(){           window.open("resize.html","_blank","width=200,height=200,top=300,left=300");
        }
    }
</script>
</body>

注:必须从另一个页面链接打开才能改变大小
运行结果:点击放大窗口放大200px，点击缩小窗口窗口缩小200px，点击按照指定大小调整窗口，窗口调整到长300px，宽300px。

滚动条调整

<body>
<p>
    <button class="up">向上滚动</button>
    <button class="down">向下滚动</button>
    <button class="backup">回到顶部</button>
</p>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<script>
    window.onload=function(){
        document.getElementsByClassName("up")[0].onclick=function(){
           window.scrollBy(0,-300);
        };
        document.getElementsByClassName("down")[0].onclick=function(){
           window.scrollBy(0,300);
        };
        document.getElementsByClassName("backup")[0].onclick=function(){
           window.scrollTo(0,0);
        };
    }
</script>
</body>

运行结果：点击向上滚动，滚动条向上滚动300px，点击向下滚动，滚动条向下滚动300px，点击回到顶部，滚动条回到顶部。
注:向上为负，向下为正

eg.

<script>
    window.onload=function(){
        var backtop=document.getElementsByClassName("backtop")[0];
        var header=document.getElementsByClassName("header")[0];
        window.onscroll=function(){
            var scroltop=document.documentElement.scrollTop || document.body.scrollTop;
            if(scroltop>=300){
                backtop.style.display="block";
                header.style.display="block";
            }else{
                backtop.style.display="none";
                header.style.display="none";
            }
        };
        backtop.onclick=function(){
            var timer=setInterval(function(){
                var scroltop1=document.documentElement.scrollTop || document.body.scrollTop;
                window.scrollBy(0,-100);
                if(scroltop1<=0){
                    clearInterval(timer);
                }
            },100);

        }
    }
</script>

这里写图片描述
运行结果:
当滚动条滚动到大于300px的时候出现搜索框和右下角的图标，点击图标回到顶部。
cookie:是一些数据存储于电脑文本文件中，用于解决“如何记录客户端用户信息”以名/值形式存储。

<body>
<button>获取cookie</button>
<script>
    window.onload=function() {
        var times = new Date();
        times.setTime(times.getTime() + 10000);
        document.cookie = "username=lisi; expires=" + times.toGMTString();
        document.getElementsByTagName("button")[0].onclick = function () {
            alert(document.cookie)
        };
    }
</script>
</body>

这里写图片描述

ajax
1.作用：在不刷新整页面的情况下更新数据
节省用户操作时间，提高用户体验，减少数据请求，传输获取数据。
过程：初始化，发送请求，服务器收到请求，服务器处理，返回结果
表单
get：通过url地址传输，有数据量限制每个浏览器都不同
post：通过浏览器内部传输，数据量理论无上限

<button>点击</button>
<script>
    window.onload=function(){
        var btn=document.getElementsByTagName("button")[0];
        btn.onclick=function(){
            var xmlhttp;
            if(window.XMLHttpRequest){
                xmlhttp=new XMLHttpRequest()
            }else{
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.open("get","links/1.txt",true);
            xmlhttp.send();
            xmlhttp.onreadystatechange=function(){
                if(xmlhttp.readyState==4){
                    if(xmlhttp.status==200){
                        alert(xmlhttp.responseText);
                    }
                }
            }
        }
    }
</script>
</body>

运行结果：这里写图片描述
eg2.

<body>
<p class="btn"><button>点击显示</button></p>
<div class="show"></div>
<script>
   window.onload=function(){
       var btn=document.getElementsByClassName("btn")[0];
       btn.onclick=function(){
           var xhr=null;
           try{
               xhr=new XMLHttpRequest();
           }catch(e){
               xhr=new ActiveXObject("Microsoft.XMLHTTP");
           }
           xhr.open("get","links/getNews.php",true);
           xhr.send();

           xhr.onreadystatechange=function(){
               if(xhr.readyState==4){
                   if(xhr.status==200){
                       var data=JSON.parse(xhr.responseText);
                       var msg="";
                       var show=document.getElementsByClassName("show")[0];

                       for(var i=0;i<data.length;i++){
                           msg+="<p><a href=''>"+data[i].title+"</a><span>"+data[i].date+"</span></p>"
                       }

                       show.innerHTML=msg;
                   }
               }
           }
       }
   }
</script>
</body>

运行结果：点击显示链接文字
eg3.图片瀑布流代码

<body>
<div class="show"></div>
<div class="showbtn"><input type="button" value="加载中" class="btn"/></div>

<script src="js/ajax.js"></script>
<script>
    window.onload=function(){
        var btn=document.getElementsByClassName("btn")[0];
        var show=document.getElementsByClassName("show")[0];
        var loading=false;
        var page=0;
        loadpage();
        btn.onclick=function(){
            if(!loading){
                loadpage();
            }
        };
        function loadpage(){
            loading=true;
            btn.value="加载中...";
            ajax("get","links/getImages.php?page="+page,"",function(da){
                var data=JSON.parse(da);
                if(!data.err){
                    var msg="";
                    for(var i=0;i<data.length;i++){
                        msg+="<div><p><img src='"+data[i].src+"'/></p><p><span>"+data[i].name+"</span></p></div>"
                    }
                    var newsdiv=document.createElement("div");
                    newsdiv.innerHTML=msg;
                    show.appendChild(newsdiv);
                    page++;
                    loading=false;
                }
                else{
                    btn.value=data.err
                }
            })
        }
    }
</script>
</body>

运行结果：往下会出现加载中字样，最后出现没有图片的字样。

enternal567

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
BOM，AJAX

1.BOM:浏览器对象模型 window.innerHeight:获取浏览器高度 window.innerWidth:获取浏览器宽度注:不包括滚动条和工具栏<script> var w=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth; var h=window
复制链接

扫一扫

BOM，AJAX

“相关推荐”对你有帮助么？