BOM(浏览器对象模型)代表的就是浏览器的窗口
(1)消息框:alert, 常用。
alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。
(2)输入框:prompt,返回提示框中的值。
prompt() 方法用于显示可提示用户进行输入的对话框。
参数(可选):
第一个参数:要在对话框中显示的纯文本。
第二个参数:默认的输入文本。
(3)确认框:confirm,返回 true/false.
confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。
<script type="text/javascript">
// 消息框:alert
alert("消息框");
window.alert("消息框"); //window可以省略,就是上面一种情况
//输入框:prompt,返回提示框中的值。
var uname = window.prompt("请输入姓名:",'');
console.log(uname);
// 确认框:confirm,返回 true/false.
var flag = window.confirm("您确认要删除吗?");
if (flag) {
alert("删除成功!");
} else {
alert("没事别瞎点!");
}
</script>
打开和关闭窗口
基本上open偶尔用用,close基本不用,close关闭的一般是open方法的,新打开的窗口
<body>
<!--
2)打开窗口
window.open()方法既可以导航到一个特定的URL也可以用来打开一个新的窗口
3)关闭窗口
window.close():关闭窗口。
-->
<button onclick="openWindow()">打开窗口</button>
<button onclick="closeWindow()">关闭窗口</button>
</body>
<script type="text/javascript">
/**
* 打开窗口
*/
function openWindow(){
// 打开空白窗口
window.open();
// 打开指定窗口
window.open("http://www.baidu.com");
// 打开指定窗口并指定打开模式
window.open("http://www.baidu.com","_self");
window.open("index.html");
}
/**
* 关闭窗口
*/
function closeWindow(){
window.close();
}
</script>
时间函数
setTimeout()
延时指定毫秒后执行函数 (单位:毫秒)
var id = setTimeout(function,times);
clearTimeout(id)
清除指定时间函数
setInterval()
每隔指定秒数执行函数一次
setTimeout(function(){
console.log("不好意思,久等了...");
},3000);
setInterval(function(){
console.log("hahahah...");
},1000);
给标签赋值(例如给h2标签)
标签对象.innerHTML = "xxx";
输出当前时间在页面上,设置开始和结束按钮,当秒数为整十的时候就为红色,每秒会自动增加1
<body>
<button onclick="startDate()">开始</button>
<button onclick="stopDate()">结束</button>
<h2 id="currentDate"></h2> //用来显示时间
</body>
<script type="text/javascript">
setTimeout(function(){
console.log("不好意思,久等了...");
},5000);
var id; // setTimeout方法每次调用时,返回的唯一标识
//开始
function startDate() {
init();
}
//结束
function stopDate(){
clearTimeout(id);
}
// 第一次调用,显示初始时间
// init();
/**
* 初始化时间
*/
function init() {
// 得到格式化后的时间字符串
var mydate = formatDate(new Date());
//获取数据源
var h2 = document.getElementById("currentDate"); //让body中的标签的id为"currentDate"
if ((new Date()).getSeconds() == 0) {
// 给h2标签赋值 ,如果秒数为0,则字体变红
h2.innerHTML = "<span style='color:red'>"+mydate+"</span>";
} else {
// 给h2标签赋值
h2.innerHTML = mydate;
}
// 1秒钟后调用init方法
id = setTimeout(init,1000);
}
/**
* 格式化时间
* 2018年05月13日 12:23:34
* @param {Object} date
*/
function formatDate(date) {
// 获取时间的年份
var year = date.getFullYear();
// 获取月份 (0~11)
var month = date.getMonth() + 1;
// 如果月份小于10,则在其前面拼接"0"
if (month < 10) {
month = "0" + month;
}
// 获取天
var day = date.getDate();
// 如果天数小于10,则在其前面拼接"0"
if (day < 10) {
day = "0" + day;
}
// 获取时
var hour = date.getHours();
if (hour < 10) {
hour = "0" + hour;
}
// 获取分
var minute = date.getMinutes();
if (minute < 10) {
minute = "0" + minute;
}
// 获取秒
var second = date.getSeconds();
if (second < 10) {
second = "0" + second;
}
var mydate = year+"年"+month+"月"+day+"日" + " " +hour+":"+minute+":"+second;
return mydate;
}
</script>
setInterval(function(){},毫秒数); 能够更加简单的实现上述代码的功能.
history
history对象的属性:
length,返回浏览器历史列表中的 URL 数量。
history对象的方法:
back():加载 history 列表中的前一个 URL。
forward():加载历史列表中的下一个 URL。当页面第一次访问时,还没有下一个url。
go(number|URL): URL 参数使用的是要访问的 URL。而 number 参数使用的是要访问的 URL 在 History 的 URL 列表中的 go(-1|2),go正数前进,负数表后退哦
<body>
<h3>第二个页面</h3>
<a href="04-history对象-2.html">跳转至第二个页面</a>
<button onclick="window.history.forward();">前进</button>
<button onclick="window.history.back();">后退</button>
</body>
<script type="text/javascript">
console.log(history.length);
</script>
location
location 对象的属性href:
设置或返回完整的 URL
location 对象的方法:
reload():重新加载当前文档。
replace():用新的文档替换当前文档。 //不能回退
//获取当前访问的地址
var url1 = window.location.href;
console.log(url1);
//设置当前访问地址 (跳转到指定页面) 不会有历史记录
window.location.href = "http://www.baidu.com";
window.location.reload();