JavaScript-BOM

BOM

BOM(Browser Object Model)是指浏览器对象模型,

通过他,可以操作浏览器相关的功能。

更直白一点讲:BOM相当于是一个模块,提供了关于浏览器操作的功能。

提示框

  • alert,提示框。
  • confirm,确认框
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'/>
    <title>BOM</title>
</head>
<body>
<input type="button" value="提示框" onclick="showAlert();">
<input type="button" value="确认框" onclick="showConfirm();">
<script type="text/javascript">
    function showAlert() {
        alert('震惊了,Alex居然..');
    }
    function showConfirm() {
        // 显示确认框
        // result为true,意味着点击了确认。
        // result为false,意味着点击了取消。
        var result = confirm('请确认是否删除?');
        console.log(result);
    }
</script>
</body>
</html>

浏览器URL

  • location.href,获取当前浏览器URL。
  • location.href = "url",设置URL,即:重定向。
  • location.reload(),重新加载,即:刷新页面。
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'/>
    <title>BOM</title>
</head>
<body>
<input type="button" value="获取当前URL" onclick="getUrl();">
<input type="button" value="重新加载页面" onclick="reloadPage();">
<input type="button" value="重定向到百度" onclick="redirectToBaidu();">
<script type="text/javascript">
    function getUrl() {
        console.log(location.href);
    }
    function reloadPage() {
        location.reload();
    }
    function redirectToBaidu() {
        location.href = "http://www.baidu.com";
    }
</script>
</body>
</html>

定时器

  • setInterval(function(){},1000),创建多次定时器。
  • clearInterval(定时器对象),删除多次定时器。
  • setTimeout(function(){},1000),创建单次定时器。
  • clearTimeout(定时器对象),删除单次定时器。

后面数字的单位是毫秒

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'/>
    <title>BOM</title>
</head>
<body>
<h1>计时器:<span id="time"></span></h1>
<input type="button" value="开始计时" onclick="start();">
<input type="button" value="停止计时" onclick="stop();">
<script type="text/javascript">
    var time;
    function start() {
        time = 0;
        document.getElementById('time').innerText = time;
        interval = setInterval(function () {
            time += 1;
            document.getElementById('time').innerText = time;
        }, 1000);
    }
    function stop() {
        clearInterval(interval)
    }
</script>
</body>
</html>
posted @ 2020-06-07 22:44  Hedger_Lee  阅读(120)  评论(0编辑  收藏  举报