浏览器对象BOM

一  window对象的属性和方法

      1.window对象是浏览器窗口对文档提供的一个现实的容器

      2 window的属性和方法:window.属性 和window.方法  (可省略window对象)

      3 对话框  (BOM中的三种对话框)

   1.alert()   显示一段消息和一个带有确认按钮的警告框 ,//消息即为括号内的内容

        2 .confirm()   显示一段用户输入消息的对话框,返回值为布尔值 //显示的消息为用户在括号内写              的内容   

1.确认框通常用于验证是否接受用户操作。

        2.当确认卡弹出时,用户可以点击 "确认" 或者 "取消" 来确定用户操作。

        3.当你点击 "确认", 确认框返回 true, 如果点击 "取消", 确认框返回 false。

        3. prompt()   显示可提示用户输入的对话框,第一个参数是提示,第二个参数是默认值 

        1.提示框经常用于提示用户在进入页面前输入某个值。

        2.当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。

        3.如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。

<script type="text/javascript">
    document.write("第一种对话框alert"+'<br/>')
    alert("我是alert对话框");
    document.write('<br/>'+'<hr/>')
    document.write("第二种对话框confirm"+'<br/>')
    confirm("确认提交")
    document.write('<br/>'+'<hr/>')
    document.write("第三种对话框prompt"+'<br/>')
    var year=prompt("请输入","你好")//两个参数,第一个位提示信息,第二个为输入框中的默认值
    document.write('<br/>'+'<hr/>')
 </script>

//小案例

 4.窗体控制

              1.open()   打开一个新的浏览器窗口或者查找一个已命名的窗口

           1  url :新窗口路径

           2 新窗口的名称

           3  窗口属性

           width:新建窗口的宽度

           height:新建窗口的高度

           top:左上角垂直坐标

             left:左上角水平坐标

    2  close ()  关闭浏览器窗口

<body>
<input type="button" value=" open新窗口" onclick="openWin()"> <br>
<input type="button" value="close新窗口" onclick="closeWin()"> <br>
<input type="button" value="moveTo新窗口" onclick="moveWin1()"> <br>
<input type="button" value="moveBy新窗口" onclick="moveWin2()"> <br>
<input type="button" value="sizeBy新窗口" onclick="sizeWin1()"> <br>
<input type="button" value="moveTo新窗口" onclick="sizeWin2()"> <br>
    <script>
    // 打开和关闭窗口练习
    var newWindow;
    function openWin(){
        newWindow=window.open('','','top=150,left=150,width=300,height=300')
    }
  //第一个参数若为指定的url如(www.baidu.com)则moveTo moveBy resizeBy resizeTo没有效果,(只有当没有值时,各个功能才能实现)
  结果:打开一个长为300,宽为300,左上角坐标为(150,150)的窗口
    function closeWin(){
            newWindow.close() //关闭窗口
    }
    function moveWin1(){
            newWindow.moveTo(300,300) //移动到这里即为(300,300)
            newWindow.focus() //获得焦点
    }
    function moveWin2(){
            newWindow.moveBy(30,30)//相对于之前点再移动
            newWindow.focus() 
    }
    function sizeWin1(){
            newWindow.resizeBy(30,30)//把窗口大小增加或减小指定的宽度和高度
            newWindow.focus() 
    }
    function sizeWin2(){
            newWindow.resizeTo(30,30)//把窗口大小调整为指定的宽度和高度
            newWindow.focus() 
    }
    </script>
</body>

 4. 定时器

   1.setInterval(function ,millisecond)   按照指定周期(毫秒数)来调用函数或计算表达式

   2 clearInterval()清除计时器

   3 setTimeout(function,milliseconds)    按照指定时间后调用函数

   4 clearTimeout    清除定时器

               1.用setInterval()写图片轮播

<body>
    <p>请点击一下图片</p>
    <div class="div1" onclick="autoplay()">
        <img src="image/10.jpg" alt="" id="pic">
    </div>
    <script>
    var imageArr=["image/9.png","image/7.jpg","image/11.jpg","image/15.png","image/10.jpg"]
    var i=0;
    function autoplay(){
        setInterval(cycle,2000);
    }
    function cycle(){
        i++;
        if(i==imageArr.length) i=0;
        document.getElementById("pic").src=imageArr[i];
    }   
    </script>
    
</body>

                   2 使用setTimeout写图片轮播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片轮播效果(使用setTimeout实现)</title>
    <style>
    #div1{
        width:320px;
        height: 320px;
        margin:0 auto;
        background: url(image/9.png);
    }
    
    </style>
</head>
<body>
    <div id="div1">
     
    </div>
    <script>
    var div1=document.getElementById("div1");
    var imageArr=["url(image/7.jpg)","url(image/10.jpg)","url(image/11.jpg)"]
   
    div1.onclick=fun1;
    function fun1(){
        div1.style.backgroundImage="url(image/7.jpg)";
        setTimeout('fun2()',1000)
    
    }
       function fun2(){
        div1.style.backgroundImage="url(image/10.jpg)";
        setTimeout('fun3()',1000)
    
    }
       function fun3(){
        div1.style.backgroundImage="url(image/11.jpg)";
        setTimeout('fun1()',1000)
    
    }
 
    </script>
</body>
</html>

 5   Window 对象属性

    1 innerHeight  :返回窗口文档显示区的高度  

    2 innerWidth:返回窗口文档显示区的宽度

二   History 对象的常用方法

  1.back() 加载history 列表中的前一个URL

        2 forword()  加载history列表中的下一个URL

        3 go() 加载history列表中的某个具体页面

三 Screen 对象

  • availHeight 返回显示屏幕的高度 (除 Windows 任务栏之外)。
  • availWidth 返回显示屏幕的宽度 (除 Windows 任务栏之外)。
  • height 返回显示屏幕的高度。
  • width 返回显示器屏幕的宽度。
  • bufferDepth 设置或返回调色板的比特深度。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Google Dart

AngularDart Material Design 记分卡 顶

(adsbygoogle = window.adsbygoogle || []).push({}); fun...

1374
来自专栏不止是前端

Vue:父子组件信息传递

3718
来自专栏前端人人

React第三方组件5(状态管理之Redux的使用①简单使用)

本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件5(状态管理之Redux的使用①简...

2624
来自专栏技术博文

jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后

当对象获得焦点后,自动把光标移到内容最后,使用focus()函数便可实现,下面有个不错的示例,感兴趣的朋友可以参考下 jquery获取焦点后光标在字符串后,当i...

3867
来自专栏进击的君君的前端之路

事件

1863
来自专栏闻道于事

Layui常见问题

为什么表单不显示?当你使用表单时,Layui会对select、checkbox、radio等原始元素隐藏,从而进行美化修饰处理。但这需要依赖于form组件,所以...

6445
来自专栏vue学习

23、一看就懂父子组件之间的传值

通过"props down , events up"我们就简单的实现了父子组件之间的双向传值,这是很基本的知识点,其它还有$invoke等等方法,大家可以去官网...

6533
来自专栏陈仁松博客

UWP基础教程 - XAML依赖属性和附加属性

前面两章介绍了XAML的命名空间、元素和属性的概念,从本篇开始接下来会介绍XAML的高级特性,本篇主要会介绍两个概念: 依赖属性(Dependency Prop...

3465
来自专栏Web 开发

getBoundingClientRect

今天fix一个拖拽库的IE8bug,发现DOM元素有一个getBoundingClientRect的方法。

1100
来自专栏JetpropelledSnake

Vue学习笔记之Vue组件

vue的核心基础就是组件的使用,玩好了组件才能将前面学的基础更好的运用起来。组件的使用更使我们的项目解耦合。更加符合vue的设计思想MVVM。

831

扫码关注云+社区

领取腾讯云代金券