前端：javaScript之操作BOM对象

最新推荐文章于 2019-06-27 10:12:16 发布

dream_Felix

最新推荐文章于 2019-06-27 10:12:16 发布

阅读量160

点赞数

文章标签： java 学习

本文链接：https://blog.csdn.net/yalu_123456/article/details/93388971

版权

操作BOM对象

BOM模型

BOM : 浏览器对象模型 ( Browser Object Model )
BOM提供了独立于内容的 , 可以与浏览器窗口进行互
BOM可实现功能
弹出新的浏览器窗口
移动 , 关闭浏览器窗口以及调整窗口的大小
页面的前进 , 后退

Window对象的常用属性

常用的属性
语法

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <script>
        alert("你好");
        window.alert("你好");

        //所有自定义的函数都属于window.
        function alert() {
            console.log("自定义的")
        }

        window.alert();


    </script>



</head>
<body>

</body>
</html>

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //浏览器自动加载跳转到指定的url
        window.location.href="https://www.baidu.com";


        //跳板

    </script>
</head>
<body>

<!--<a href="javascript:location='https://www.baidu.com'">点击跳转到百度</a>-->


</body>
</html>

Window对象的常用方法

在这里插入图片描述

confirm()方法

confirm()：将弹出一个确认对话框
confirm()与alert ()、 prompt()区别

alert( )：一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变
prompt( )：两个参数，输入对话框，用来提示用户输入一些信息，单击“取消”按钮则返回null，单击“确定”按钮则返回用户输入的值，常用于收集用户关于特定问题而反馈的信息
confirm( )：一个参数，确认对话框，显示提示对话框的消息、“确定
”按钮和“取消”按钮，单击“确定”按钮返回true，单击“取消”按钮返回false，因此与if-else语句搭配使用
案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>

        var flag = confirm("你真的要退出吗?");
        if (flag){
            while (true){
                document.write("1<br>")
            }
        }

    </script>

</head>
<body>

</body>
</html>

open（）方法

window.open(“弹出窗口的url”,“窗口名称”,"窗口特征”)

history对象

常用方法

location对象

常用属性
常用方法

Document对象

常用属性
常用方法
访问相同name的元素
document.getElementById(“book”).innerHTML=“替换后的文字”;
案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--
    JavaScript操作BOM;
        window事件
            加载
            弹窗
                普通
                带输入框的
                带确定取消的
            location-history

        核心掌握操作通过指定的id,name获取指定的元素 , 然后修改它的值.
    -->

    <script>
        function show() {
            document.getElementById("a").innerText="<h1>你好啊<h1/>";
        }

        function hidden2() {
            //document.getElementById("a").innerText="";
            document.getElementById("a").innerHTML="<h1>你好啊<h1/>" +
                "<hr>" +
                "<a href='#'>点击</a>"
        }
        function test() {
            var are = document.getElementsByTagName("textarea");
            var msg = are[0].value.app;
            //document.write(are[0].value);
            document.getElementById("msg").innerText = msg;

        }
    </script>


</head>
<body>

<div id="a"></div>
<textarea>1231231</textarea>
<p>
    <input type="button" value="发表留言" onclick="test()">
</p>

<hr>

<div id="msg" style="border: 5px solid blue"></div>


<!--&lt;!&ndash;-->
<input type="button" onclick="show()" value="显示" style="height: 50px;width: 50px">
<input type="button" onclick="hidden2()" value="隐藏" style="height: 50px;width: 50px">


</body>
</html>

Data对象

var 日期对象=new Date(参数)
在这里插入图片描述

制作时钟特效

使用Date对象的方法显示当前时间的小时、分钟和秒

定时函数

在这里插入图片描述
案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="time"></div>

<input type="button" value="start" onclick="startTime()">
<input type="button" value="stop" onclick="stopTime()">

<!--
走动
停止
-->


<script>
    var myTime;
    function clock() {
        //<!--获得一个时间-->
        var now = new Date();
        console.log(now);

        var hh =  now.getHours();
        var mm = now.getMinutes();
        var ss = now.getSeconds();

        document.getElementById("time").innerHTML ="现在时间为:" + hh + ":" + mm + ":" + ss;
    }

    function startTime() {
        myTime = setInterval("clock()",1000);
    }

    function stopTime() {
        clearInterval(myTime);
    }



</script>
</body>
</html>

清除函数

clearTimeout()
clearTimeout(setTimeOut()返回的ID值)
clearInterval()

Math对象

常用方法
实现返回的整数范围为2~99
var iNum=Math.floor(Math.random()*98+2);
案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div>
    选择颜色 : <span id="color"></span>
    <input type="button" value="点我变色" onclick="test()">

</div>

<script>

    function test() {
        var color = Array("红色","绿色","蓝色","紫色","黑色","棕色","青色");
        var num = Math.ceil(Math.random()*7)-1;
        document.getElementById("color").innerHTML = color[num];
    }

</script>

</body>
</html>

dream_Felix

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端：javaScript之操作BOM对象

操作BOM对象BOM模型BOM : 浏览器对象模型 ( Browser Object Model )BOM提供了独立于内容的 , 可以与浏览器窗口进行互BOM可实现功能弹出新的浏览器窗口移动 , 关闭浏览器窗口以及调整窗口的大小页面的前进 , 后退Window对象的常用属性常用的属性语法Window对象的常用方法confirm()方法confirm()：将...
复制链接

扫一扫