JavaScript的基础应用之BOM对象

最新推荐文章于 2022-10-28 19:40:59 发布

xy8199

最新推荐文章于 2022-10-28 19:40:59 发布

阅读量317

点赞数 1

分类专栏： JavaScript 文章标签： javascript html web

本文链接：https://blog.csdn.net/xy8199/article/details/78185851

版权

JavaScript 专栏收录该内容

28 篇文章 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();

示例图

源码

<!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>