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>