28-Web-弹框和定时器

最新推荐文章于 2024-05-29 19:40:53 发布

qq_48486897

最新推荐文章于 2024-05-29 19:40:53 发布

阅读量218

点赞数

本文链接：https://blog.csdn.net/qq_48486897/article/details/107760828

版权

本文详细介绍了浏览器对象模型(BOM)的操作，包括各种弹框的使用方法及其实际练习，探讨了定时操作和自动页面跳转的实现技巧。

摘要由CSDN通过智能技术生成

1.BOM操作

<!-- 
 1. 什么是BOM
 Browser Object Model(浏览器对象模型)
 js默认提供了一个 window 对象，指向当前浏览器。其实js中定义的所有的全局变量都是绑定在 window上的属性。
 
 2. window的基本操作
 1)打开新的窗口：
 window.open()    -   创建一个新的窗口并且返回
 window.open(需要加载的网页路径)   -   创建一个新的窗口并且返回，窗口中会显示指定网页
 window.open(需要加载的网页路径,'','width=宽度,height=高度')
 
 2)关闭窗口
 窗口对象.close()
 
 3)移动窗口
 窗口对象.noveTo(x坐标, y坐标)
 
 4)获取窗口大小
 innerWidth/innerHeight    -   获取浏览器能够显示网页内容的有效宽高
 outerWidth/outerHeight    -   获取整个浏览器的宽度和高度
 -->

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        <button type="button" onclick="openNewWindow()">打开新的窗口</button>
        <button type="button" onclick="closeWindow()">关闭窗口</button>
        <button type="button" onclick="getWindowSize()">获取窗口大小</button>
	</body>
</html>
<script type="text/javascript">
    // 1.直接定义的全局变量就是绑定在window上的属性
    // name = '小明'
    window.name = '小明'
    console.log(window.name, name)
    
    function sum(a, b){
        console.log('函数调用', this)
    }
    // window.sum = function(a, b){
    //     console.log('函数调用')
    // }
    sum()
    // window.sum()
    
    // 2.打开新的窗口
    function openNewWindow(){
        
        // 1）打开空窗口
        // newWindow1 = window.open()
        
        // 2）打开有页面的窗口
        // newWindow2 = window.open('https://www.baidu.com')
        // newWindow2 = window.open('./04-添加标签练习.html')
        
        // 3）设置新建窗口的大小
        newWindow3 = window.open('./04-添加标签练习.html','','width=300,height=300')
        // 移动窗口
        newWindow3.moveTo(200, 200)
    }
    
    // 3.关闭窗口
    function closeWindow(){
        // 1）关闭当前窗口
        // window.close()
        
        // 2）关闭新建的窗口
        newWindow3.close()
    }
    
    // 4.获取窗口大小
    function getWindowSize(){
        console.log(window.innerWidth, window.innerHeight)
        console.log(window.outerWidth, window.outerHeight)
    }
    
    
</script>

2.弹框

<!-- 
1. alter(提示信息)  - 只有提示信息和确认按钮的弹框
2. confirm(提示信息)  -  带有确定、取消按钮和提示信息的弹框; 根据返回值是true还是false可以确定点击的是确定还是取消
3. prompt(提示信息,输入框默认值)  -  带有确定按钮、取消按钮、文本输入框和提示信息的弹框;
                                  如果点击取消按钮，返回值是null；如果点击确定按钮，返回值是输入框中输入的内容

 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        <!-- 1. alter -->
        <button type="button" onclick="alert('删除成功!')">删除</button>
        
        <!-- 2. confirm-->
        <br><br>
        <button type="button" onclick="deleteAction()">删除</button>
        
        <!-- 3.  prompt-->
        <br><br>
        <button type="button" onclick="buyAction()">购买</button>
        
	</body>
    
    <script type="text/javascript">
        
        // confirm提示框
       function deleteAction(){
           var result = confirm('是否删除？')
           console.log(result)
           if(result){
               alert('删除成功！')
           }else{
               alert('删除失败！')
           }
       }
       
       // prompt
       function buyAction(){
           var result = prompt('请输入要购买的数量:', 1)
           console.log(result)
       }
    </script>
</html>

3.弹框练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        <div id="box">
            <font size="" color="">大米</font>
            <button type="button" onclick="deleteAction()">删除</button>
            <button type="button" onclick="buyAction()">购买</button>
        </div>
	</body>
    
    <script type="text/javascript">
        // 删除功能
        function deleteAction(){
            var result = confirm('是否删除该商品?')
            if(result == false){
                return
            }
            // 删除
            document.getElementById('box').remove()
        }
        
        // 购买功能
        function buyAction(){
            var result = prompt('请输入商品数量', 1)
            if(result == null){
                return
            }
            alert('购买成功！')
        }
        
    </script>
</html>

4.定时操作

<!-- 
window提供了两组不同的定时器函数，用来完成定时功能：
1. 
setInterval(函数,定时时间)    -   每隔指定的时间就调用依次指定的函数(函数会被执行多次); 会返回一个定时器对象
clearInterval(定时器对象)   -   停止定时器

2.
setTimeout(函数,定时时间)   -   到了指定的时间，执行函数（函数只会执行1次）; 会返回一个定时器对象
clearTimeout(定时器对象)   -   停止定时器

注意：时间单位是：毫秒
 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        <button type="button" onclick="startAction()">start</button>
        <button type="button" onclick="stopAction()">stop</button>
        <br><br>
        <button type="button" onclick="setBomb()">埋炸弹</button>
        <button type="button" onclick="clearBomb()">拆炸弹</button>
	</body>
    <script type="text/javascript">
        // 1. setInterval的使用
        // 注意：定时器对象在保存的时候最好使用全局变量
        num = 0
        
        // 创建定时器（创建后会自动启动）
        function startAction(){
            timer1 = setInterval(function(){
                num ++
                console.log(num)
            }, 1000)
        }
        
        // 停止定时器
        function stopAction(){
            clearInterval(timer1)
        }
        
        // 2.setTimeout 的使用
        function setBomb(){
            timer2 = setTimeout(function(){
                console.log('爆炸')
            }, 5000)
        }
        
        function clearBomb(){
            clearTimeout(timer2)
        }
         
        
    </script>
</html>

5.自动跳转

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        <p id="p1">5s后自动跳转到百度....</p>
	</body>
    
    <script type="text/javascript">
        t = 5
        pNode = document.getElementById('p1')
        timer1 = setInterval(function(){
            // 每隔1秒时间值减1
            t--
            if(t==0){
                // 停止定时器
                clearInterval(timer1)
                // 打开百度页面
                // window.open('https://www.baidu.com')      //打开一个新的窗口
                window.location.href = 'https://www.baidu.com'    //修改当前窗口中加载的页面的地址
            }else{
                // 更新显示
               pNode.innerText = t+'s后自动跳转到百度....'
            }
        }, 1000)
    </script>
</html>