JavaScript Browser BOM
概述
confirm
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>确认框</title>
</head>
<body>
<script type="text/javascript">
var result = window.confirm("您确定要进行删除吗");
if(result){
console.log("执行删除")
}else{
console.log("取消删除")
}
</script>
</body>
</html>
prompt
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>输入框</title>
</head>
<body>
<script type="text/javascript">
// 弹出一个让用户输入内容的弹窗
var result = window.prompt("请输入您的用户名");
console.log(result);
</script>
</body>
</html>
open/close
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>打开关闭窗口</title>
</head>
<body>
<script type="text/javascript">
window.open("http://www.baidu.com")
// 在编写js代码时, 如果发现代码执行不正常,F12观察控制台
window.close()
</script>
</body>
</html>
定时器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定时器</title>
</head>
<body>
<a href="demo05history.html">打开第五个页面</a>
<br />
<input type="button" value="五秒钟时候显示当前时间" onclick="showTime5()" />
<input type="button" value="关闭五秒钟的闹钟" onclick="closeTime5()" />
<br /> <input type="button" value="打开时钟" onclick="openClock()" />
<input type="button" value="关闭时钟" onclick="closeClock()" />
<br />
<script type="text/javascript">
function showTime() {
var date = new Date()
var spanTag = document.getElementById("id_span")
spanTag.innerHTML = date
}
var timer1 = null;
function showTime5() {
// 参数1:要执行的逻辑
// 参数2: 延时时间,单位是毫秒值
// 定时任务只执行一次
timer1 = setTimeout("showTime()", 5000)
}
function closeTime5() {
// 清除定时任务
clearTimeout(timer1)
}
var timer2 = null;
function openClock() {
// 参数1:要执行的逻辑
// 参数2: 延时时间,单位是毫秒值
// 定时任务会一直执行下去
timer2 = setInterval("showTime()", 1000)
}
function closeClock() {
// 清除定时任务
clearInterval(timer2)
}
</script>
<span id="id_span">
</span>
</body>
</html>
history
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>历史记录</title>
</head>
<body>
<a href="demo06location.html">打开第六个页面</a>
<br />
<input type="button" onclick="goforward()" value="前进" />
<input type="button" onclick="goback()" value="后退" />
<script type="text/javascript">
function goforward(){
history.forward()
}
function goback(){
history.back()
}
</script>
</body>
</html>
location
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>location</title>
</head>
<body>
第六个页面
<script type="text/javascript">
location.href="http://www.baidu.com"
console.log(location.href)
</script>
</body>
</html>
参考
- 黑马程序员 120天全栈区块链开发 开源教程 https://github.com/itheima1/BlockChain
一番雾语：JavaScript与浏览器的互动。
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2020-01-08，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录