JavaScript的基础应用之BOM对象

喜欢ヅ旅行 2022-06-07 03:44 149阅读 0赞

JavaScript 是世界上最流行的编程语言。

这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

## JavaScript 是脚本语言 ##

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 很容易学习。

下面为大家简单介绍一些JavaScript中BOM对象

BOM里面的三个对象 1.window 窗口对象 2.history 历史对象 前进，后退，刷新 3.location 位置对象 定位的，相当于 <a>超链接</a> js的内置对象： Date 日期对象(掌握) Math Random... 定时函数 setInnervalTime(); 超时函数 setTimeout();

**示例图**

![Center][]

**源码**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>My JSP 'demo.jsp' starting page</title>
        <script type="text/javascript" src="jquery.1.12.4.js"></script>
    </head>
    <body>
    <div>window对象</div>
    <input type="button" value = "警示框" id= "b1" οnclick="m1()"/>
    <input type="button" value = "输入框" οnclick="m2()"/>
    <input type="button" value = "确定框" οnclick="m3()"/>
    <hr>
    <div>history对象</div>
    <input type="button" οnclick="h1()" value = "后退"/>
    <input type="button" οnclick="h2()" value = "前进"/>
    <input type="button" οnclick="h3()" value = "刷新"/>
    <div>location对象</div>
    <input type="button" οnclick="lo()" value="转到百度"/>
    <div>获取当前时间</div>
    <input type="button" οnclick="getTime()" value="获取当前时间"/>
    <div id = "time">
        时间
    </div>
    <div>定时和计时</div>
    <input type="button" value="5s超时" οnclick="time1()"/><br>
    <input type="button" value="每秒更新时间" οnclick="time2()"/>
    <script type="text/javascript">
        //弹出警示框 function m1(){
            alert("警示框");
        }
        //输入框 function m2(){
            //点击确定，获取的是输入的值 //取消，获取的是null var a = prompt("请输入你喜欢的演员");
            alert("原来你喜欢"+a);
        }
        //确定框 function m3(){
            //返回值是 boolean true/false var b = confirm("确定是否删除？");
            alert(b);
        }
        //后退 function h1(){
            //history.go(-1); history.back();
        }
        //前进 function h2(){
            //history.go(1); history.forward();
        }
        //刷新 function h3(){
            history.go(0);
        }
        //转到某个页面 function lo(){
            location.href="https://www.baidu.com";
        }
        //获取当前时间 function getTime(){
            //创建date对象 var date = new Date();
            alert(date);
            //获取年 var y = date.getFullYear();
            //月 默认是0-11 [0,12) var m = date.getMonth()+1;
            //日 var d  = date.getDay();//获取一个星期里面的第几天 var dd = date.getDate();//或某个月的某一天 //时分秒 var h = date.getHours();
            var mm = date.getMinutes();
            var s = date.getSeconds();
            //拼接 var t = y+"-"+m+"-"+dd+"-"+h+":"+mm+":"+s;
            // 如果用弹出框显示 alert(t); // 显示到标签div里面 // p, label , h1-6，a....有纯文本，有时需要操作里面的文本。 // 使用innerHTML属性 var div = document.getElementById("time");
            div.innerHTML=t;
        }
        //开始加载页面的时候就要显示时间怎么办？ getTime();
        //计时函数 function time1(){
            //setTimeout("要执行的方法"，"时间"); setTimeout("alert('5s超时了嘿嘿')",5000);
        }
        // function time2(){
            //"要执行的方法"，"时间" setInterval("gengxin()",1000);
        }
    
        function gengxin(){
            //创建date对象 var date = new Date();
    
            //获取年 var y = date.getFullYear();
            //月 默认是0-11 [0,12) var m = date.getMonth()+1;
            //日 var d  = date.getDay();//获取一个星期里面的第几天 var dd = date.getDate();//或某个月的某一天 //时分秒 var h = date.getHours();
            var mm = date.getMinutes();
            var s = date.getSeconds();
            //拼接 var t = y+"-"+m+"-"+dd+"-"+h+":"+mm+":"+s;
            // 如果用弹出框显示 alert(t); // 显示到标签div里面 // p, label , h1-6，a....有纯文本，有时需要操作里面的文本。 // 使用innerHTML属性 var div = document.getElementById("time");
            div.innerHTML=t;
        }
    </script>
    </body>
    </html>

以上只是BOM对象的基本应用，若想学习更多请关注本人博客,敬请期待.......

[Center]: /images/20220607/05c680dec51e40ba8f6de76698978745.png