首页 > web前端 > js教程 > JS中BOM操作知识点

JS中BOM操作知识点

angryTom
发布: 2019-12-31 17:11:53
转载
2335 人浏览过

JS中BOM操作知识点

JS中BOM操作知识点

window对象

全局变量和全局方法都归在window上

alert-comfirm-prompt

让alert 、confirm等弹出框上的提示文字实现换行:\n

1

2

3

4

5

6

7

8

9

10

11

12

13

// confirm()

// 点击确定返回true,取消返回false

var btn=document.getElementById("btn");

btn.onclick=function(){           // 弹出确认对话框

   var result=window.confirm("您确定要删除吗?删除之后该信息\n将不可恢复!");           if(result){

           document.getElementById("box").style.display="none";

   }

}       // prompt("text","defaultText")

// text:对话框中显示的纯文本

// defaultText:默认的输入文本

// 点击确认返回文本,点击取消返回null

var message=prompt("请输入您的星座","天蝎座");

console.log(message);

登录后复制

open-close

如果open方法中的url参数为空的话,那么新窗口也会被打开只是不会显示任何文档

1

2

3

4

5

6

7

8

9

10

11

12

window.onload = function(){            

// 打开子窗口,显示

newwindow.html

window.open("newwindow.html","newwindow","width=400,height=200,

        left=0,top=0,toolbar=no,menubar=no,scrollbars=no,location=

        no,status=no");            

        var quit = document.getElementById("quit");            

    // 点击关闭当前窗口

     quit.onclick = function(){

           window.close("newwindow.html");

     }

}

登录后复制

延迟调用setTimeout()

1

2

3

4

5

6

7

8

9

10

//调用函数

var fnCall=function(){

     alert("world");

}

setTimeout(fnCall,5000);       //调用匿名函数

var timeout1=setTimeout(function(){

  alert("hello");

},2000)

 

clearTimeout(timeout1);

登录后复制

实现以下要求:

(1) 点击“删除”按钮3秒后,页面上p里面的文字消失

(2) 点击“删除”按钮之后的3秒内,如果点击“取消删除”按钮,那么页面上p里面的文字就不会被删除

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>定时器</title>

    <style type="text/css">

        p{width:400px;height:120px;margin-top:50px;border:2px solid gray;padding:10px;}   

    </style>

</head>

<body>

     <input type="button" value="删除">

     <input type="button" value="取消删除">

    <p>点击"删除"按钮后,里面的内容将在3秒钟后消失;

    <br/><br/>如点击了"删除"后又不想删除内容,请在点击"删除"按钮3秒之内点击"取消删除"按钮即可</p>

    <script type="text/javascript">      

    var btn1=document.getElementsByTagName(&#39;input&#39;)[0];      

    var btn2=document.getElementsByTagName(&#39;input&#39;)[1];      

    var p=document.getElementsByTagName(&#39;p&#39;)[0];      

    var timer;

 

       btn1.onclick=function(){

        timer=setTimeout(function(){

          p.innerHTML=&#39;&#39;;

        },3000);

       }

 

       btn2.onclick=function(){

          clearTimeout(timer);

        }    </script>

</body>

</html>

登录后复制

验证码倒计时案例:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script>

        window.onload=function(){           

        var  btn=document.getElementById("btn");           

        var  times=10;           

        var  timer=null;

            btn.onclick=function(){               

            if(this.getAttribute("clicked")){return false;}               

            var _this=this;

                timer=setInterval(function(){

                    times--;                   

                    if(times<=0){

                        clearInterval(timer);

                        _this.value="发送验证码";                        //_this.disabled=false;

                        _this.removeAttribute("clicked",false);

                        times=10;

                    }else{

                        _this.value=times+&#39;秒后重试&#39;;                        //_this.disabled=true;

                        _this.setAttribute("clicked",true);

                    }

                },1000)

            }

        }    </script>

</head>

<body>

 

<p class="box">

    <input type="button" value="发送验证码" id="btn">

</p>

 

</body>

</html>

登录后复制

会闪烁的文字:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

<!DOCTYPE html>

<html>

    <head lang="en">

        <meta charset="UTF-8">

        <title>闪烁的文字</title>

        <style type="text/css">

            p{

                width:200px;

                height:200px;

                line-height:200px;

                border:2px solid gray;

                text-align:center;

                color:red;

            }        </style>

    </head>

<body>

    <h3>会闪烁的文字</h3>

        <p id="text"> </p>

        <script type="text/javascript">           

            var text=document.getElementById(&#39;text&#39;);           

            var flag=0;

            setInterval(function(){             

            if(flag==0){

                flag=1;

                text.innerHTML=&#39;☆☆☆今日特卖☆☆☆&#39;;

              }else if(flag==1){

                flag=0;

                text.innerHTML=&#39;★★★今日特卖★★★&#39;;

              }

            },500);        </script>

    </body>

</html>

登录后复制

location.href返回当前页面的完整URL

location.hash 返回#后面的

1

2

3

4

5

6

7

8

9

10

11

12

console.log(location.href);

console.log(location.hash);      

var btn=document.getElementById("btn");

btn.onclick=function(){            

// 可以实现跳转

   location.hash="#top";

}       // 返回服务器名称和端口号

// 本地不行,要到服务器上      

console.log(location.host);       // 返回服务器名称      

console.log(location.hostname);       // 返回URL中的目录和文件名      

console.log(location.pathname);       // 返回URL中的查询字符串,以?开头

console.log(location.search);

登录后复制

改变浏览器的位置

1

2

3

4

5

6

7

8

setTimeout(function(){           // 会在历史记录中生成新纪录

    location.href=&#39;index6.html&#39;;

    window.location=&#39;index6.html&#39;;   // 不会在历史记录中生成新纪录

    location.replace("index6.html");

},1000)

 document.getElementById("reload").onclick=function(){   // 有可能从缓存中加载            location.reload();            // 从服务器重新加载

     location.reload(true);

 }

登录后复制

history保存用户访问页面的历史记录

forward 回到历史记录的下一步

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

var btn = document.getElementById("btn");   

var btn2 = document.getElementById("btn2");   

var btn3 = document.getElementById("btn3");   

// 点击btn按钮时回到历史记录的上一步,后退

btn.onclick = function() {        // 方法一       

        history.back();        // 方法二

    history.go(-1);

}   

// 点击btn2按钮时回到历史记录的下一步,前进

btn2.onclick = function() {  // 方法一       

history.forward();        // 方法二

    history.go(1);

}

btn3.onclick = function() {        // 前进n步       

    history.go(n);        // 后退n步

    history.go(-n);

}

登录后复制

screen对象

1

2

3

4

5

// 获取屏幕可用宽高

console.log("页面宽:"+screen.availWidth);

console.log("页面高:"+screen.availHeight);        // 获取窗口文档显示区的宽高

console.log("pageWidth:"+window.innerWidth);

console.log("pageHeight:"+window.innerHeight);

登录后复制

navigator对象

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

//console.log(navigator.userAgent);

// 判断浏览器

function getBrowser(){           var explorer = navigator.userAgent,browser;           if(explorer.indexOf("MSIE")>-1){

      browser = "IE";

   }else if(explorer.indexOf("Chrome")>-1){

      browser = "Chrome";

   }else if(explorer.indexOf("Opera")>-1){

      browser = "Opera";

   }else if(explorer.indexOf("Safari")>-1){

      browser = "Safari";

   }           return browser;

}       var browser = getBrowser();

console.log("您当前使用的浏览器是:"+browser);       // 判断终端

function isPc(){          var userAgentInfo = navigator.userAgent,

      Agents = ["Andriod","iPhone","symbianOS","windows phone","iPad","iPod"],

      flag = true,i;

      console.log(userAgentInfo);           for(i=0;i<Agents.length;i++){              if(userAgentInfo.indexOf(Agents[i])>-1){

         flag = false;                 break;

      }

   }           return flag;

}       var isPcs = isPc();

console.log(isPcs);

登录后复制

本文来自 js教程 栏目,欢迎学习!  

以上是JS中BOM操作知识点的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:cnblogs.com
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板