Java day_24 BOM

最新推荐文章于 2024-07-08 14:58:49 发布

CCCalga

最新推荐文章于 2024-07-08 14:58:49 发布

阅读量261

点赞数

分类专栏： Java 文章标签： java

本文链接：https://blog.csdn.net/qq_45836790/article/details/107745982

版权

Java 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

BOM Window对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- Windows:窗口对象
        1.创建:
        2.方法:
            1.与弹出框有关的方法
                alert()显示带有一段消息和一个确认的警示框
                confirm()显示带有一段消息以及确认按钮和取消按钮的对话框
                    如果用户点击确认按钮,则方法返回true
                    如果用户点击取消按钮,则方法返回false
                prompt()显示可提示用户输入的对话框
                    返回值:获取用户输入的值
            2.与打开关闭有关的方法
                close():关闭浏览器窗口
                    谁调用就关闭谁
                open(): 打开一个新的浏览器窗口
                    返回新的window对象
            3.与定时器有管的方法
                setTimeout():在指定的毫秒数后调用函数或计算表达式
                    参数:1.js代码或者方法
                        2.毫秒值
                    返回值:返回唯一编号,用于取消定时器
                clearTimeout():取消setTimeout()方法设置的timeout
                setInterval():按照指定的周期(以毫秒计)来调用函数或计算表达式
                clearInterval():取消由setInterval()方法设置的timeout
        3.属性:
        4.特点:
            window对象可以省略不需要创建可以直接使用 window.方法名();
            window引用可以省略,方法名(); -->
</head>
<body>
    <input type="button" id="btn_open" value="打开窗口">
    <input type="button" id="btn_close" value="关闭窗口">

    <script>
        alert("hello script");
        window.alert("hello windows");
        var flag=confirm("确认退出?");

        if(flag){
            alert("欢迎再次光临!");
        }else{
            alert("别手抖...");
        }

        var result=window.prompt("请输入用户名:");
        window.alert(result);

        var new_windows;
        var openbtn=document.getElementById("btn_open");
        openbtn.onclick=function(){
            new_windows=open("http://www.baidu.com");
        }

        var closebtn=document.getElementById("btn_close");
        closebtn.onclick=function(){
            new_windows.close();
        }

        var id=setTimeout(fun,2000);
        // clearTimeout(id);
        function fun(){
            alert('boom~');
        }

        var id1=setInterval(fun1,2000);
        // clearInterval(id1);
        function fun1(){
            alert('boom~');
        }
    </script>
    
</body>
</html>

案例1:轮播器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 1.在页面上使用img标签展示图片
2.定义一个方法.修改图片对象的src属性
3.定义一个定时器,每隔3秒调用一次方法 -->
<body>
    <img src="./imag/background1.jpg" width="100%" id="img">

    <script>

        // 1.修改图片属性
        var number=1;
        function fun(){
            number++;
            if(number>3){
                number=1;
            }
            var img=document.getElementById("img")
            img.src="./imag/background"+number+".jpg"
        }
        // 2.定义定时器
        setInterval(fun,3000);
    </script>
    
</body>
</html>

案例2:自动跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    p{
        text-align: center;
    }
    span{
        color: red;
    }
</style>
<script>
    // 1.显示页面效果<p>
    // 2.倒时器读秒效果实现
    //     1.定义一个方法,获取span标签,修改span标签内容,时间--
    //     2.定义一个定时器,1秒执行一次该方法
    var second=5;
    // 定义一个方法,获取span标签,修改span标签体内容,时间--
    function showTime(){
        second--;
        // 判断时间如果小于等于零,则跳转到百度
        if(second<=0){
            // 跳转到百度
            location.href="http://www.baidu.com";
        }
        var time=document.getElementById("time");
        time.innerHTML=second + "";
    }

    // 设置定时器
    setInterval(showTime,1000);
</script>
<body>
    <p>
        <span id="time">5</span>秒之后,自动跳转到百度...
    </p>    
</body>
</html>

BOM History对象

轮播器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 1.在页面上使用img标签展示图片
2.定义一个方法.修改图片对象的src属性
3.定义一个定时器,每隔3秒调用一次方法 -->
<body>
    <img src="./imag/background1.jpg" width="100%" id="img">
    <input type="button" id="back" value="后退">
    <script>

        // 1.修改图片属性
        var number=1;
        function fun(){
            number++;
            if(number>3){
                number=1;
            }
            var img=document.getElementById("img")
            img.src="./imag/background"+number+".jpg"
        }
        // 2.定义定时器
        setInterval(fun,3000);
        var back=document.getElementById("back");
        back.onclick=function(){
            history.back();
            // history.go(-1);
        }
    </script>
    
</body>
</html>

Histroy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- History:历史记录对象
    1.创建:
        window.history
        history
    2.方法:
        back():加载history列表中的前一个URL
        forward():加载history列表中的下一个URL
        go():加载history列表中的某一个具体页面
    3.属性:
        length:返回当前窗口历史列表中的URL数量 -->

<body>
<input type="button" id="btn" value="获取历史记录个数">
<br>
<input type="button" id="forward" value="前进">
<br>
<input type="button" id="go" value="go">
<br>
<a href="./轮播器.html">next</a>
    <script>
        var btn=document.getElementById("btn");
        btn.onclick=function(){
            var length=history.length;
            alert(length);
        }

        var forward=document.getElementById("forward");
        forward.onclick=function(){
            history.forward();
            // history.go(1);
        }
    </script>
    
</body>
</html>

CCCalga

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java day_24 BOM

BOM Window对象<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- Windows:窗口对象
复制链接

扫一扫