JavaScript的基础应用之BOM对象

来源：互联网发布：sw画图软件编辑：程序博客网时间：2024/05/16 15:40

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();

示例图

源码

<!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" onclick="m1()"/><input type="button" value = "输入框" onclick="m2()"/><input type="button" value = "确定框" onclick="m3()"/><hr><div>history对象</div><input type="button" onclick="h1()" value = "后退"/><input type="button" onclick="h2()" value = "前进"/><input type="button" onclick="h3()" value = "刷新"/><div>location对象</div><input type="button" onclick="lo()" value="转到百度"/><div>获取当前时间</div><input type="button" onclick="getTime()" value="获取当前时间"/><div id = "time">    时间</div><div>定时和计时</div><input type="button" value="5s超时" onclick="time1()"/><br><input type="button" value="每秒更新时间" onclick="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对象的基本应用，若想学习更多请关注本人博客,敬请期待.......

阅读全文

1 0